Skip to content

checkbox

The checkbox_variant_option macro is used to render checkbox control to select product variants. Internally is uses checkbox macro and checkbox-variant-option webcomponent. This macro has no meaning if used outside product-varaints webcomponent.

Definition

{% checkbox_variant_option(options) %}

Input parameters

options

object represents an object of variant option attributes

Option key Type Default Required Description
options.option ProductOption null yes object representing ProductOption
options.hasPriceModification boolean false no whether this product option will modify product price
options.formatPriceModification Price null no how much will the price be modified

Example

{% from "@macros/checkbox_variant_option.twig" import checkbox_variant_option %}

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

{% for option in product.options %}
    {% set hasPriceModification = option.isPriceModifier or option.isPercentagePriceModifier %}
    {% set formatPriceModification = option.priceModification.formatGross %}

    {% if option.isCheckbox %}
        {{ checkbox_variant_option({
            option: option,
            hasPriceModification: hasPriceModification,
            formatPriceModification: formatPriceModification
        }) }}
    {% endif %}
{% endfor %}

Macro source code

{% macro checkbox_variant_option(options) %}
    {% from "@macros/checkbox.twig" import checkbox %}
    {% from "@macros/variant_option_label.twig" import variant_option_label %}

    {% set variantOption = options.option %}

    {% set controlName = options.name ?: "option_#{ variantOption.id }" %}
    {% set controlId = options.id ?: "option-#{ variantOption.id }" %}

    <checkbox-variant-option
        order="{{ variantOption.order }}"
        option-id="{{ variantOption.id }}"
        option-name="{{ controlName }}"
        {% if variantOption.isRequired %}required="true"{% endif %}
        validation-name-label="{{ variantOption.name }}"
        type="checkbox"
        class="control">
            <div class="control__content">
                <div class="control__element">
                    {{ checkbox({
                        name: controlName,
                        id: controlId,
                        value: 1,
                        label: variant_option_label({
                            id: controlId,
                            name: variantOption.name,
                            isRequired: variantOption.isRequired,
                            formatPriceModification: options.hasPriceModification ? options.formatPriceModification : null
                        }),
                        dataAttributes: {
                            'yes': translate('Yes'),
                            'no': translate('No')
                        }
                    }) }}
                </div>
            </div>

            <control-errors></control-errors>
    </checkbox-variant-option>
{% endmacro %}

Form reference