Skip to main content

Products

Display one product​

The products.one component allows you to display One-Time purchase products for your users to buy them.

This component reads all the data that you entered about your product in the Admin Panel and displays it in beautiful widget, so you can easily show your users what you have to offer, and you can change the data in the Admin Panel without having to touch the code.

one product

Usage​

<x-products.one slug="lemon">
    <x:slot name="extraDescription">
        <p class="mt-4 text-xs">
            {{ __('Try before you commit.') }}
        </p>
    </x:slot>
</x-products.one>

That's all you need to display your product.

The component accepts the following parameters:

  • slug: The slug of the product to display (you can get that from Admin Panel).

You can also use the extraDescription slot to add extra content to the product widget that will be displayed below the buy button.

Display all products​

The products.all component allows you to display all active products you have on your website.

Same as the products.one component, this component reads all the data that you entered about your products in the Admin Panel and displays it in a beautiful widget, so you can easily show your users a list of all the products you offer, and you can change the data of each product in the Admin Panel without having to touch the code.

all products

Usage​

<x-products.all sort-by="price" sort-direction="asc">
    <x:slot name="extraDescription">
        <p class="mt-4 text-xs">
            {{ __('100% money-back guarantee') }}
        </p>
    </x:slot>
</x-products.all>

You can use the extraDescription slot to add extra content to each product widget that will be displayed below the buy button.

The component accepts the following parameters:

  • sort-by: The field to sort the products by. You can use id, name, price, created_at, or updated_at.
  • sort-direction: The direction to sort the products by. You can use asc or desc.

Frequently Asked Questions​

My product is not appearing in the component, what's wrong?​

Make sure that the product is active on the admin panel, and that it has a price with the currency set to the Default Currency that you defined on the settings page.