Skip to content

Radio Variant Option

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

Attributes

Besides all the attributes described below, the <radio-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 radio 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 radio
order number - Order in which the radio 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 radio variant option control will be rendered related to the other variant controls when product has stock options. Pairs with is-stock attribute
variant string - Visual variant of a radio button. Supported values are classic and box

Example

Here is an example of <radio-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 radio_variant_option macro.

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

    {% set productOptions = product.options %}

     {% set stockOptionsOrder = 1 %}

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

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

Macros reference

Object Api methods reference

Webcomponents reference