Product Variants¶

The <product-variants> webcomponent is used to validate and properly change the stock of variants of a given product.

Attributes¶

Attribute name	Type	Default	Description
`product-id`	`number`	-	Id of the product related to the product variants we want to display
`variant-id`	`number`	-	Id of the stock product variant related to the product variants we want to display
`has-product-variant`	`boolean`	-	Set to `true` if a product has variants. It is mandatory for a correct validation of variants
`module-instance-id`	`string`	-	Instance id of the module that the component should refer to
`no-messages`	`boolean`	-	If set to `true` flash messages will not be displayed within the associated flash messenger
`group-flash-messenger-name`	`string`	-	Name of a different flash messenger where potential messages should be sent to

DOM events¶

This webcomponent listens to the following DOM events:

Event Bus events¶

This webcomponent dispatches the following events with the Event Bus:

product.stockChanged

Example¶

Here is an example of <product-variants> element usage on a product card. To get the necessary data we use the getProduct() method from the ObjectApi. To see the whole process of rendering variants see product_variants macro.

Twig

    {% set product = ObjectApi.getProduct(product_id) %}

    {% set defaultVariant = product.variant %}

    <product-variants
        module-instance-id="{{ moduleInstance }}"
        class="product-variants"
        {% if defaultVariant.optionValues.count %} has-default-variant {% endif %}
        product-id="{{ product.id }}"
        variant-id="{{ product.variant.id }}"
    >
        // here render the variants
    </product-variants>

Macros reference¶

product_variants

ObjectApi methods reference¶

getProduct()