select_variant_option¶

The select_variant_option macro is used to display an option of the product in a select format.

Definition¶

{% select_variant_option(options) %}

Input parameters¶

options¶

object represents an object of select variant option attributes

Option key	Type	Default	Required	Description
options.option	`ProductOption`	null	yes	ProductOption object representing a product option
options.stockOptionsOrder	`number`	-	yes	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`	""	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`	""	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.
options.moduleConfig.moduleTitleInProductVariants	`string`	""	yes	Title of the variant module. If not specified no title will be displayed.
options.moduleConfig.instanceId	`string`	""	no	A unique identifier commonly provided by a special module variable `moduleInstance`

Example¶

In this example we render a basic list of select 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/select_variant_option.twig" import select_variant_option %}

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

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isSelect %}
        {{ select_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/select_variant_option.twig" import select_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.isSelect %}
        {{ select_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 select variant options but modify the default moduleConfig options.

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

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

{% set stockOptionsOrder = 1 %}

{% for option in product.options %}
    {% if option.isSelect %}
        {{ select_variant_option({
            option: option,
            stockOptionsOrder: stockOptionsOrder,
            moduleConfig: {
              "showStockVariantOptionUnavailability": 0,
              "singleChoiceBoxDisplayStyle": "isModernRadioButtonStyle",
              "moduleTitleInProductVariants": {"en_US": "Choose a product variant you like:"}
            },
        }) }}

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

Example¶

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

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

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

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

{% set stockOptionsOrder = 1 %}

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

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

Macro source code¶

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

    {% set controlName = "option_#{variantOption.id}" %}

    <select-variant-option
        {% if isStockOption %}
            is-stock stock-order="{{ options.stockOptionsOrder }}"
            {% if shouldInitallyHideVariantOption %}hidden{% endif %}
        {% endif %}
        order="{{ variantOption.order }}"
        option-id="{{ variantOption.id }}"
        option-name="{{ controlName }}"
        {% if variantOption.isRequired %}required="true"{% endif %}
        validation-name-label="{{ variantOption.name }}"
        type="select"
        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">
                    <h-select {% if variantOption.isRequired %}required{% endif %} class="select" control-id="option_{{ variantOption.id }}" control-name="{{ controlName }}">
                        <h-select-toggler class="select-toggler" aria-label="{{ translate('Select') }}">
                            <span class="select-toggler__placeholder" slot="placeholder">{{ translate('Select') }}</span>
                        </h-select-toggler>

                        {{ 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 %}

                            <h-option data-user-value="{{ value.name }}" value="{{ value.id }}"
                                {% if value.productImage %}data-option-value-product-image-url="{{  value.productImage.webpUrl }}"{% endif %}
                                {% if isValueUnavailable %}data-option-value-unavailable disabled clickable{% endif %}
                                {% if isValueSelected %}selected{% endif %}
                                {% if hasPriceModification %}data-price-modifier="{{ formatPriceModification }}"{% endif %}>
                                    <h-option-content>{{ value.name }} {% if hasPriceModification %} ({{ formatPriceModification }}) {% endif %}</h-option-content>
                                    {% if isValueUnavailable %}
                                        <span class="select-option__additional-content">
                                            {{ translate('Out of stock') }}
                                        </span>
                                    {% endif %}
                            </h-option>
                        {% endfor %}
                    </h-select>
                </div>
            </div>

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

Webcomponents reference¶

Object Api methods reference¶

Object Api objects reference¶

ProductOption