Skip to content

Checkbox Variant Option

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

Attributes

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

Example

Here is an example of <checkbox-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 checkbox_variant_option macro.

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

    {% set productOptions = product.options %}

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

Macros reference

Object Api methods reference

Webcomponents reference