Skip to content

color_variant_option

The color_variant_option macro is used to render color control to product variants. Internally is uses - color-variant-option, h-color-item, h-color-swatches and h-color-swatches-control webcomponents. This macro has no meaning if used outside product-variants webcomponent.

Definition

{% color_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 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.hasPriceModification string "" no Set to true if the change of the color should indicate a price change price
options.showGrossPrice string "" no If set to true the gross price will appear instead of the net price
options.selectedOptionsValues ProductVariantOptionValuesList null no ProductVariantOptionValuesList of the selected option values by default
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.

Example

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

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

{% set defaultVariant = product.variant %}

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

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

{% set showGrossPrice = globalPricesSettings.showGrossPrice or (globalPricesSettings.showGrossPrice and globalPricesSettings.showNetPrice) %}

{% set stockOptionsOrder = 1 %}

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

    {% if option.isColor and option.values.count >  %}
        {{ color_variant_option({
            productId: product.id,
            option: option,
            stockOptionsOrder: stockOptionsOrder,
            selectedOptionsValues: selectedOptionsValues,
            showGrossPrice: showGrossPrice,
            moduleConfig: moduleConfig,
            hasSelectedValuesByDefault: hasSelectedValuesByDefault,
            hasPriceModification: not moduleConfig.hidePriceModification
        }) }}
    {% endif %}

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

Macro source code

{% macro color_variant_option(options) %}
    {% set variantOption = options.option %}
    {% set numberOfVisibleColor = 15 %}
    {% set bigColorItemsThreshold = 10 %}
    {% set showSmallColorItems = variantOption.values.count > bigColorItemsThreshold %}
    {% set shouldInitallyHideVariantOption = options.stockOptionsOrder > 1 and not options.hasSelectedValuesByDefault %}
    {% set isStockOption = variantOption.isStockOption %}

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

    <color-variant-option
        {% if isStockOption %}is-stock stock-order="{{ options.stockOptionsOrder }}"
            {% if shouldInitallyHideVariantOption %}hidden{% endif %}
        {% endif %}
        order="{{ variantOption.order }}"
        option-id="{{ variantOption.id }}"
        option-name="{{ optionName }}"
        {% if variantOption.isRequired %}required="true"{% endif %}
        validation-name-label="{{ variantOption.name }}"
        type="color"
        class="control">
            <div class="control__label">
                <label class="label {% if variantOption.isRequired %}label_required{% endif %}">
                    {{ variantOption.name }}<span hidden class="js__variant-option-value"></span>

                    {% if not variantOption.isRequired %}
                        <span class="label__optional">{{ translate('Optional') }}</span>
                    {% endif %}
                </label>
            </div>

            <div class="control__content">
                <div class="control__element">
                    <h-color-swatches-control {% if variantOption.isRequired %}required{% endif %} control-id="{{ variantOption.id }}" control-name="{{ optionName }}">
                        <h-color-swatches
                            number-of-visible-colors="{{ numberOfVisibleColor }}"
                            {% if showSmallColorItems %}class="color-swatches_s"{% 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 %}

                                <h-hint>
                                    <h-color-item
                                        class="
                                            {% if showSmallColorItems %} color-item_s {% endif %}
                                        "
                                        {% if isValueUnavailable %}data-option-value-unavailable disabled{% endif %}
                                        label="{{ variantOption.name }} {{ value.color }}"
                                        value="{{ value.id }}"
                                        color="{{ value.color }}"
                                        data-option-name="{{ value.name }}"
                                        {% if value.productImage %}data-option-value-product-image-url="{{  value.productImage.webpUrl }}"{% endif %}
                                        {% if hasPriceModification %}data-option-value-price-modifier="{{ formatPriceModification }}"{% endif %}
                                        {% if isValueSelected %}selected{% endif %}></h-color-item>

                                        <h-hint-content>
                                            {{ value.name }} {% if hasPriceModification %} {{ formatPriceModification }} {% endif %}

                                            {% if isValueUnavailable %}
                                                ({{ translate('Unavailable') }})
                                            {% endif %}
                                        </h-hint-content>
                                </h-hint>
                            {% endfor %}
                        </h-color-swatches>
                    </h-color-swatches-control>
                </div>
            </div>

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

Webcomponents reference

Object API objects reference

Form reference