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](/docs/assets/images/one-product-2fbe97905dc8fb23c437559ea26a95b7.png)
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](/docs/assets/images/all-products-a679e5dbe94330adddbb42354e31f311.png)
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 useid
,name
,price
,created_at
, orupdated_at
.sort-direction
: The direction to sort the products by. You can useasc
ordesc
.
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.