Product Description¶
Use product_description module to insert a full description of the currently viewed product on a page. This module is available only within a product card.
Configuration parameters¶
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.
title¶
string Title of the module. If not specified no title will be displayed.
displayTitle¶
int if set to 1 the title of the module will be displayed
collapseExpand¶
string Decides if description module should be opened initially. Values are 'expanded' or 'collapsed'.
Module source code¶
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% set product = ObjectApi.getProduct(product_id) %}
{% set shopUrls = ObjectApi.getShopUrls() %}
{% set isDisabled = not moduleConfig.isEnabled %}
{% set hasTitle = moduleConfig.displayTitle and moduleConfig.title %}
{% set isAccordionOpened = isDisabled or not hasTitle or moduleConfig.collapseExpand == "expanded" %}
{% set hasEditorSettingsAppearance = moduleConfig.moduleAppearance == 'editorSettings' %}
{% if product.description|length > 0 %}
<product-description class="product-description" data-scroll="full-description">
<h-accordion class="accordion" {% if isDisabled %}disabled{% endif %}>
<h-accordion-group {% if isAccordionOpened %}opened{% endif %}>
{% if hasTitle %}
<h2 class="product-description__header module__header">
{{ module_accordion_toggler({ title: moduleConfig.title, isDisabled }) }}
</h2>
{% endif %}
<h-accordion-content>
<div class="grid__row grid__row_xs-hcenter">
<div
class="
product-description__content
grid__col
grid__col_md-10
{% if hasEditorSettingsAppearance %} resetcss {% endif %}
"
>
{{ product.description|raw }}
</div>
</div>
</h-accordion-content>
</h-accordion-group>
</h-accordion>
</product-description>
{% endif %}
<script type="application/ld+json">
{
"@context": [
"http://schema.org/",
{ "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
],
"@id": "{{ product.url.relative }}",
"description": "{{ product.description | striptags }}"
}
</script>
The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.
Webcomponents reference¶
Macros reference¶
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "checkbox",
"name": "displayTitle",
"label": "Display module title",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "title",
"label": "Module title",
"defaultValue": "Product description",
"supportsTranslations": 1,
"isRequired": 1,
"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": 0,
"relations": [
{
"parentName": "displayTitle",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setAvailable"
]
}
]
}
],
"children": [
{
"type": "radio",
"name": "collapseExpand",
"label": "Set as:",
"defaultValue": "expanded",
"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"
]
}
]
}
],
"options": {
"radioOptions": [
{
"key": "expanded",
"label": "expanded"
},
{
"key": "collapsed",
"label": "collapsed (only module title visible)"
}
]
}
}
]
},
{
"type": "radio",
"name": "moduleAppearance",
"label": "The module content appearance is determined by:",
"defaultValue": "editorSettings",
"options": {
"radioOptions": [
{
"key": "editorSettings",
"label": "only by the settings from the text editor"
},
{
"key": "editorAndSkinSettings",
"label": "text editor and store theme style",
"hint": "If you do not change the appearance of the content (e.g. text size and color) in the text editor, the module will use the store theme styles."
}
]
}
}
]
}
]