Product Attributes¶
Use product_attributes module to insert an attributes list of the currently viewed product on a page. This module is available only within a product card and uses the Accordion component.
Configuration parameters¶
displayTitle¶
int if set to 1 the title will be displayed.
title¶
string Title of the module.
isEnabled¶
int if set to 1 it will be possible to expand and collapse the module, otherwise it will always be expanded and it will not be possible to collapse it.
collapseExpand¶
string decides if attribute module should be opened initially. Values are 'expanded' or 'collapsed'.
isDisplayedInOneColumn¶
int if set to 1 the attributes will be displayed in one column on all devices.
hasGapBetweenGroups¶
int if set to 0 there will be no gap between attribute groups and group names will no longer be displayed.
hasGroupNames¶
int if set to 1 group names will be displayed. Requires hasGapBetweenGroups set to 1 as well.
Module source code¶
{% from "@macros/product_attribute.twig" import product_attribute %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% set product = ObjectApi.getProduct(product_id) %}
{% set isDisabled = not moduleConfig.isEnabled %}
{% set hasTitle = moduleConfig.displayTitle and moduleConfig.title %}
{% set isAccordionOpened = isDisabled or not hasTitle or moduleConfig.collapseExpand == "expanded" %}
{% if product.attributeGroups|length > 0 %}
<h-accordion class="product-attributes accordion" {% if isDisabled %}disabled{% endif %}>
<h-accordion-group {% if isAccordionOpened %}opened{% endif %}>
{% if hasTitle %}
<h2 class="module__header product-attributes__header">
{{ module_accordion_toggler({ title: moduleConfig.title, isDisabled }) }}
</h2>
{% endif %}
<h-accordion-content>
<div class="grid__row grid__row_xs-hcenter">
<div class="grid__col grid__col_xs-12 grid__col_md-10">
<div class="product-attributes__groups">
{% for attributeGroup in product.attributeGroups %}
<div class="product-attributes__group {% if not moduleConfig.hasGapBetweenGroups %} mb-xs-0 {% endif %}">
{% if moduleConfig.hasGapBetweenGroups and moduleConfig.hasGroupNames %}
<p class="product-attributes__group-header">{{ attributeGroup.name }}</p>
{% endif %}
<div class="product-attributes__attributes {% if moduleConfig.isDisplayedInOneColumn %}product-attributes__attributes_one-column{% endif %}">
{% for attribute in attributeGroup.attributes %}
{{ product_attribute(attribute) }}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</h-accordion-content>
</h-accordion-group>
</h-accordion>
{% endif %}
Webcomponents reference¶
Macros reference¶
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "blank",
"message": "#### Related settings in the admin panel%s- changing names: product features (attributes) and groups (attribute sets) in [the attribute settings](%s)",
"placeholderValues": [
"\n",
"\/admin\/attributes\/list"
]
}
},
{
"type": "checkbox",
"name": "displayTitle",
"label": "Display module title",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "title",
"label": "Module title",
"supportsTranslations": 1,
"isRequired": 1,
"defaultValue": "Product features",
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHiddenAndOptional", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisibleAndRequired", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "isEnabled",
"label": "Allow to collapse and expand the module content",
"defaultValue": 1,
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setDisabled"]
},
{
"value": 1,
"actions": ["setAvailable"]
}
]
}
],
"children": [
{
"type": "radio",
"name": "collapseExpand",
"label": "Set as:",
"defaultValue": "expanded",
"isRequired": 0,
"options": {
"radioOptions": [
{
"key": "expanded",
"label": "expanded"
},
{
"key": "collapsed",
"label": "collapsed (only module title visible)"
}
]
},
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setDisabled"]
},
{
"value": 1,
"actions": ["setAvailable"]
}
]
},
{
"parentName": "isEnabled",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "checkbox",
"name": "isDisplayedInOneColumn",
"label": "Display content in one column on all devices",
"defaultValue": 0,
"hint": "On small screens (phone and tablet), the product features will always be displayed in one column."
},
{
"type": "checkbox",
"name": "hasGapBetweenGroups",
"label": "Add the gaps between the feature groups",
"defaultValue": 1,
"children": [
{
"type": "checkbox",
"name": "hasGroupNames",
"label": "Display group names (attribute sets)",
"defaultValue": 1,
"relations": [
{
"parentName": "hasGapBetweenGroups",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
}
]
}
]