radio_variant_option

The radio_variant_option macro is used to render an option of the product in a radio format.

Definition

{% radio_variant_option(options) %}

Input parameters

options

object represents an object of radio variant option attributes:

Option key	Type	Default	Required	Description
options.option	ProductOption	null	yes	ProductOption object representing the given option of the product
options.stockOptionsOrder	number	-	no	Number of the sorting order of the stock options
options.hasSelectedValuesByDefault	boolean	false	no	If set to true the option has selected values by default
options.selectedOptionsValues	ProductVariantOptionValuesList	null	no	ProductVariantOptionValuesList of the selected option values by default
options.showGrossPrice	string	""	no	If set to true the gross price will appear instead of the net price
options.moduleConfig	object	null	no	The object of product variants configuration options

options.moduleConfig

object represents an object of product variants configuration options

Option key	Type	Default	Required	Description
options.moduleConfig.showStockVariantOptionUnavailability	number	1	no	If set to 1 and unavailable variant is selected, a proper message will be displayed.
options.moduleConfig.singleChoiceBoxDisplayStyle	string	isClassicRadioButtonStyle	no	Either isClassicRadioButtonStyle or isModernRadioButtonStyle. Defines a display style of checkboxes. If isClassicRadioButtonStyle is set, one checkbox per line will be displayed, otherwise there will be multiple checkboxes in one line.

Example

In this example we render a basic list of radio variant options from a certain product. We also set an additional parameter stockOptionsOrder that increases every time we encounter a stock option. This helps keep all the options in the correct order.

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

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

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isRadio %}
        {{ radio_variant_option({
            option: option,
            stockOptionsOrder: stockOptionsOrder
        }) }}

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

Example

In this example we render a very similar list but this time we also set selectedOptionValues attribute based on the default variant of the product. The hasSelectedValuesByDefault is set to true if there are any values in the selectedOptionValues variable.

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

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

{% set selectedOptionsValues = defaultVariant.optionValues|map(optionValue => optionValue.optionValue.id) %}

{% set hasSelectedValuesByDefault = selectedOptionsValues|length > 0 %}

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isRadio %}
        {{ radio_variant_option({
            option: option,
            stockOptionsOrder: stockOptionsOrder,
            selectedOptionsValues: selectedOptionsValues,
            hasSelectedValuesByDefault: hasSelectedValuesByDefault
        }) }}

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

Example

In this example we render a list of radio variant options but modify the default moduleConfig options.

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

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

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isRadio %}
        {{ radio_variant_option({
            option: option,
            stockOptionsOrder: stockOptionsOrder,
            moduleConfig: {
              "showStockVariantOptionUnavailability": 0,
              "singleChoiceBoxDisplayStyle": "isModernRadioButtonStyle"
            },
        }) }}

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

Example

In this example we render a list of radio variant options but we set a showGrossPrice attribute based on the global prices setings with the help of a special Object Api method getProductPricesSettings().

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

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

{% set globalPricesSettings = ObjectApi.getProductPricesSettings() %}

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isRadio %}
        {{ radio_variant_option({
            option: option,
            stockOptionsOrder: stockOptionsOrder,
            showGrossPrice: globalPricesSettings.showGrossPrice
        }) }}

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

Macro source code

{% macro radio_variant_option(options) %}
    {% from "@macros/radio.twig" import radio %}
    {% from "@macros/radio_variant_option_label.twig" import radio_variant_option_label %}

    {% set variantOption = options.option %}
    {% set shouldInitallyHideVariantOption = options.stockOptionsOrder > 1 and not options.hasSelectedValuesByDefault %}
    {% set isStockOption = variantOption.isStockOption %}

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

    <radio-variant-option
        {% if isStockOption %}
            is-stock stock-order="{{ options.stockOptionsOrder }}"
            {% if shouldInitallyHideVariantOption %}hidden{% endif %}
        {% endif %}
        order="{{ variantOption.order }}"
        {% if variantOption.isRequired %}requiredInGroup{% endif %}
        type="radio"
        option-id="{{ variantOption.id }}"
        option-name="{{ controlName }}"
        {% if options.moduleConfig.singleChoiceBoxDisplayStyle == "isModernRadioButtonStyle" %}variant="box"{% endif %}
        validation-name-label="{{ variantOption.name }}"
        class="control">
            <div class="control__label">
                <label class="label {% if variantOption.isRequired %}label_required{% endif %}">
                    {{ variantOption.name }} {% if not variantOption.isRequired %}<span class="label__optional">{{ translate('Optional') }}</span>{% endif %}
                </label>
            </div>

            <div class="control__content">
                <div class="control__element {% if options.moduleConfig.singleChoiceBoxDisplayStyle == "isModernRadioButtonStyle" %}control__element_radio-box{% endif %}">
                     {% if not variantOption.isRequired %}
                        <div class="control">
                            <div class="control__content">
                                <div class="control__element">
                                    {{ radio({
                                        name: controlName,
                                        id: controlId,
                                        label: translate("Don't select"),
                                        value: -1,
                                        variant: options.moduleConfig.singleChoiceBoxDisplayStyle == 'isModernRadioButtonStyle' ? 'box' : null,
                                    }) }}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {{ variantOption.values.setItemCountPerPage(variantOption.values.count) }}

                    {% for value in variantOption.values %}
                        {% set hasPriceModification = options.hasPriceModification and (value.isPriceModifier or value.isPercentagePriceModifier) %}

                        {% set hasIncrisingPriceModification =  hasPriceModification and value.priceModification.grossValue > 0 or value.percentagePriceModification > 0  %}

                        {% if value.isPriceModifier %}
                            {% set formatPriceModification = options.showGrossPrice ? value.priceModification.formatGross : value.priceModification.formatNet %}
                        {% endif %}

                        {% if value.isPercentagePriceModifier %}
                            {% set formatPriceModification = value.formatPercentagePriceModification %}
                        {% endif %}

                        {% if hasPriceModification %}
                            {% set formatPriceModification = hasIncrisingPriceModification ? "+#{formatPriceModification}" : formatPriceModification %}
                        {% endif %}

                        {% set isValueUnavailable = isStockOption and not value.isAvailable and options.moduleConfig.showStockVariantOptionUnavailability %}

                        {% set isValueSelected = value.id in options.selectedOptionsValues %}

                        <div class="control">
                            <div class="control__content">
                                <div class="control__element">
                                    {{ radio({
                                        name: controlName,
                                        id: controlId ~ "-#{ value.id }",
                                        value: value.id,
                                        label: radio_variant_option_label({
                                            name: value.name,
                                            formatPriceModification: hasPriceModification ? formatPriceModification : null
                                        }),
                                        checked: isValueSelected,
                                        variant: options.moduleConfig.singleChoiceBoxDisplayStyle == 'isModernRadioButtonStyle' ? 'box' : null,
                                        hintContent: isValueUnavailable ? translate('Unavailable') : null,
                                        disabled: isValueUnavailable,
                                        clickable: isValueUnavailable,
                                        required: variantOption.isRequired ? true : false,
                                        dataSet: {
                                            'data-option-value-unavailable': isValueUnavailable ? true : null,
                                            'data-price-modifier': hasPriceModification ? formatPriceModification : null,
                                            'data-option-value-product-image-url': value.productImage ? value.productImage.webpUrl : null,
                                            'data-user-value': value.name
                                        }
                                    }) }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

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

Webcomponents reference

• h-radio
• radio-variant-option

Object Api methods reference

• getProduct()
• getProductPricesSettings()

Object Api objects reference

• ProductOption
• ProductVariantOptionValuesList