Skip to content

File Variant Option

The <file-variant-option> webcomponent is used to manage file type variant options and is used inside the file_variant_option macro.

Attributes

Besides all the attributes described below, the <file-variant-option> as a form control also accepts general validation attributes described here

Attribute name Type Default Description
product-id number - Id of the product related to the file variant option control we want to display
option-id string - Id of the product stock associated with the file variant option control we want to display
type string - type of the variant option. For this webcomponent in most cases it should be set to file
order number - Order in which the file variant option control will be rendered related to the other variant controls

Example

Here is an example of <file-variant-option> element usage on a product card. To get the necessary data we use the getProduct() method from the ObjectApi. To see the whole process of rendering variants see product_variants macro or file_variant_option macro.

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

    {% set productOptions = product.options %}

    {% for option in productOptions %}
        {% if option.isFile %}
            <file-variant-option
                product-id="{{ product.productId }}"
                option-id="{{ option.id }}"
                type="file"
                order="{{ option.order }}"
                {% if option.isRequired %} required {% endif %}
                validation-name-label="{{ option.name }}"
                class="control"
            >
                // render file variant option content like label or file picker control here
            </file-variant-option>
        {% endif %}
    {% endfor %}

Macros reference

Object Api methods reference

Webcomponents reference