product_attribute¶

The product_attribute macro is used to render a single product attribute on a page. This macro is used on a product card.

Definition¶

{% product_attribute(options) %}

Input parameters¶

options¶

object represents an object of product attribute options

Option key	Type	Default	Required	Description
options.value	`string`	""	yes	Value of the attribute
options.name	`string`	""	yes	Name of the attribute
options.isCheckbox	`boolean`	false	no	If set to `true` the attribute will be displayed as a checkbox

Example¶

In this example we render attributes for each attribute group from a given product using our macro. To get a product with attribute groups we use the getProduct() method from ObjectApi.

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

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

{% for attributeGroup in product.attributeGroups %}
    <div class="product-attributes__group">
        <div class="product-attributes__attributes">
            {% for attribute in attributeGroup.attributes %}
                {{ product_attribute(attribute) }}
            {% endfor %}
        </div>
    </div>
{% endfor %}

Macro source code¶

{% macro product_attribute(options) %}
    {% from "@macros/icon.twig" import icon %}

    {% if options.value != '' %}

        {% set checkboxAttributeValue = options.value ? translate('yes') : translate('no') %}
        {% set attributeValue = options.isCheckbox ? checkboxAttributeValue : options.value %}

        <li class="product-attributes__attribute">
            <span class="product-attributes__attribute-name">{{ options.name }}</span>
            <span class="product-attributes__attribute-value">
                {% if options.isCheckbox %}
                    {% if options.value %}
                        {{ icon('icon-check-circle', {
                            variant: 'success',
                            ariaHidden: true
                        }) }}
                    {% else %}
                        {{ icon('icon-x-circle', {
                            variant: 'error',
                            ariaHidden: true
                        }) }}
                    {% endif %}
                    <span class="sr-only">{{ checkboxAttributeValue }}</span>
                {% else %}
                    {{ options.value }}
                {% endif %}
            </span>
        </li>
    {% endif %}
{% endmacro %}

Object Api methods reference¶

getProduct()