Product

The Product component displays a single Product or Variant.

Properties

product (mixed)

Display a specific Product. Possible values are:

Value	Description
:slug	Use the page's :slug URL parameter to find the Product to display
8	Display the Product with ID 8 (use any integer)

variant (mixed)

Display a specific Variant. Possible values are:

Value	Description
:slug	Use the page's :slug URL parameter to find the Variant to display
8	Display the Variant with ID 8 (use any integer)

redirectOnPropertyChange (boolean)

Redirect the user to the new Variant/Product detail page if a property was changed.

Default behaviour is to only reload the "add to cart" partial where new pricing information and stock values are displayed. The title, description and product images remain unchanged. Set this property to true if you need the whole page to update.

filterOutOfStock (boolean)

By default, the component will display all available variants.

Set this property to true to only display variants that are in stock.

currentVariantReviewsOnly (boolean)

If Reviews are enabled, display only Reviews for the currently viewed Variant.

By default Reviews from all Variants of the same Product are shown.

Example implementations

Display the Variant defined in the URL

[product]
product = ":slug"
variant = ":slug"

Display Variant ID 2 of Product ID 1

[product]
product = "1"
variant = "2"

Always update the whole page if a product property has changed

[product]
product = ":slug"
variant = ":slug"
redirectOnPropertyChange = 1

Example of Usage

When considering 'product' as our component, we can access the reviews in the following manner:

{% for review in product.product.reviews  %}