Skip to content

Text Variant Option

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

Attributes

Besides all the attributes described below, the <text-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 text 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 text
order number - Order in which the text variant option control will be rendered related to the other variant controls

Example

Here is an example of <text-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 text_variant_option macro.

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

    {% set productOptions = product.options %}

    {% for option in productOptions %}
        {% if option.isText and option.values.count > 0 %}
            <text-variant-option
                option-id="{{ option.id }}"
                type="text"
                order="{{ option.order }}"
                {% if option.isRequired %} required {% endif %}
                validation-name-label="{{ option.name }}"
                class="control"
            >
                // render text variant option content like label or text here
            </<text-variant-option>
        {% endif %}
    {% endfor %}

Macros reference

Object Api methods reference

Webcomponents reference