text_variant_option

The text_variant_option macro is used to render an option of the product in a text format.

Definition

{% text_variant_option(options) %}

Input parameters

options

object represents an object of text variant option attributes

Option key	Type	Default	Required	Description
options.option	ProductOption	null	yes	ProductOption object representing the given option of the product
options.hasPriceModification	boolean	false	no	If set to true, the price midifier of the option will be displayed
options.formatPriceModification	string	""	no	The modified price of the option

Example

In this example we render a list of text variant options from a given product. We also pass boolean values isPriceModifier, isPercentagePriceModifier and priceModification.formatGross from the ProductOption object to make those values dynamic.

{% from "@macros/text_variant_option.twig" import text_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.isText %}
        {{ text_variant_option({
            option: option,
            hasPriceModification: hasPriceModification,
            formatPriceModification: formatPriceModification
        }) }}
    {% endif %}
{% endfor %}

Macro source code

{% macro text_variant_option(options) %}
    {% from "@macros/input.twig" import input %}

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

    <text-variant-option
        order="{{ variantOption.order }}"
        option-id="{{ variantOption.id }}"
        option-name="{{ controlName }}"
        {% if variantOption.isRequired %}required="true"{% endif %}
        validation-name-label="{{ variantOption.name }}"
        type="text"
        class="control">
            <div class="control__label">
                <label class="label {% if variantOption.isRequired %}label_required{% endif %}" for="{{ "option_#{ variantOption.id }" }}">
                    {{ variantOption.name }}

                    {% if options.hasPriceModification %}
                        <h-hint>
                            <span class="color-neutral-700">({{ options.formatPriceModification }})</span>

                            <h-hint-content>
                                {{ translate('Selecting this option changes the price') }}: ({{ options.formatPriceModification }})
                            </h-hint-content>
                        </h-hint>
                    {% endif %}

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

            <div class="control__content">
                <div class="control__element">
                    {{ input({
                        id: "option_#{ variantOption.id }",
                        name: controlName,
                    }) }}
                </div>
            </div>

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