file_variant_option

The file_variant_option macro is used to display an option of the product in a file format.

Definition

{% file_variant_option(options) %}

Input parameters

options

object represents an object of file variant option attributes

Option key	Type	Default	Required	Description
options.option	ProductOption	null	yes	ProductOption object representing a product option
options.hasPriceModification	boolean	false	no	If set to true, the price modifier 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 file variant options from a certain product. We also pass boolean values isPriceModifier and priceModification.formatGross from the ProductOption object to make those values dynamic.

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

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

{% for option in product.options %}
    {% if option.isFile %}
        {{ file_variant_option({
            option: option,
            hasPriceModification: option.isPriceModifier,
            formatPriceModification: option.priceModification.formatGross
        }) }}
    {% endif %}
{% endfor %}

Example

In this example we render a very similar list but this time fill the values of hasPriceModification and formatPriceModification by hand to show that is it also possible. Keep in mind that while rendering the list in such way, EVERY file variant option would get the same price modifier so the following example is not a recommended way to use this macro.

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

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

{% for option in product.options %}
    {% if option.isFile %}
        {{ file_variant_option({
            option: option,
            hasPriceModification: true,
            formatPriceModification: '$1.00'
        }) }}
    {% endif %}
{% endfor %}

Macro source code

{% macro file_variant_option(options) %}
    {% from "@macros/file_picker.twig" import file_picker %}

    {% set variantOption = options.option %}

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

    <file-variant-option
            product-id="{{ options.productId }}"
            order="{{ variantOption.order }}"
            option-id="{{ variantOption.id }}"
            option-name="{{ controlName }}"
            {% if variantOption.isRequired %}required="true"{% endif %}
            validation-name-label="{{ variantOption.name }}"
            type="file"
            class="control">
        <div class="control__label">
            <label
                class="label {% if variantOption.isRequired %}label_required{% endif %}"
                for="{{ controlId }}"
            >
                {% if variantOption.isRequired %}
                    <span class="label__asterisk" aria-hidden="true">*</span>
                {% endif %}

                {{ variantOption.name }}

                {% if options.hasPriceModification %}
                    <h-hint tabindex="0">
                        <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">
                {{ file_picker({
                    id: controlId,
                    name: controlName,
                    required: variantOption.isRequired,
                    labelText: translate('Upload file'),
                    removeButtonText: translate('Remove file')
                }) }}
            </div>
        </div>

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

Webcomponents reference

• h-file-picker
• file-variant-option
• h-hint

Object Api methods reference

• getProduct()

Object Api objects reference

• ProductOption