variant_option_label¶

The variant_option_label macro is used to render a <label> element for a product variant option.

Definition¶

{% variant_option_label(options) %}

Input parameters¶

options¶

object represents an object of variant option label attributes

Option key	Type	Default	Required	Description
options.id	`string`	""	yes	Id attribute of the label
options.name	`string`	""	yes	Name attribute of the label
options.isRequired	`boolean`	false	no	If set to `true`, `required` attribute and appropriate styling class will be added to the label
options.formatPriceModification	`string`	""	no	The price change resulted in selecting this variant.

Example¶

In this example we render a basic variant option label.

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

{{ variant_option_label({
    id: 'variant-option-label-1',
    name: 'Blue'
}) }}

Example¶

In this example we render a variant option label with price modification.

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

{{ variant_option_label({
    id: 'variant-option-label-2',
    name: 'Green',
    formatPriceModification: '+$12.10'
}) }}

Example¶

In this example we render a required variant option label.

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

{{ variant_option_label({
    id: 'variant-option-label-3',
    name: 'Red',
    isRequired: true
}) }}

Macro source code¶

{% macro variant_option_label(options) %}
    <label
        class="label
        {% if options.isRequired %}label_required{% endif %}"
        {% if options.id %}for="{{ options.id }}"{% endif %}>
            {{ options.name }}

            {% if options.formatPriceModification %}
                <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 options.isRequired %}<span class="label__optional">{{ translate('Optional') }}</span>{% endif %}
    </label>
{% endmacro %}