Skip to content

Select Variant Option

The <select-variant-option> webcomponent is used to manage select type variant options and is used inside the select_variant_option macro.

Attributes

Besides all the attributes described below, the <select-variant-option> as a form control also accepts general validation attributes described here

Attribute name Type Default Description
option-id string - Id of the product stock associated with the select variant option control we want to display
type string - type of the variant option. For this webcomponent in most cases it should be set to select
order number - Order in which the select variant option control will be rendered related to the other variant controls
is-stock string - If the variant is a stock variant this attribute should be set to true
stock-order string - Order in which the select variant option control will be rendered related to the other variant controls when product has stock options. Pairs with is-stock attribute

Example

Here is an example of <select-variant-option> 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 or select_variant_option macro.

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

    {% set productOptions = product.options %}

     {% set stockOptionsOrder = 1 %}

    {% for option in productOptions %}
        {% if option.isSelect and option.values.count > 0 %}
            <select-variant-option
                option-id="{{ option.id }}"
                type="select"
                order="{{ option.order }}"
                {% if option.isStockOption %}
                    is-stock
                    stock-order="{{ stockOptionsOrder }}"
                {% endif %}
                {% if option.isRequired %} required {% endif %}
                validation-name-label="{{ option.name }}"
                class="control"
            >
                // render select variant option content like label or h-select control here
            </<select-variant-option>
        {% endif %}

        {% if option.isStockOption %}
            {% set stockOptionsOrder = stockOptionsOrder + 1 %}
        {% endif %}
    {% endfor %}

Macros reference

Object Api methods reference

Webcomponents reference