Product Files¶

Use product_files module to insert a list of files to download of the currently viewed product on a page. This module is available only within a product card.

Configuration parameters¶

title¶

string Title of the module. If not specified title will not be displayed.

displayTitle¶

int if set to 1 display module title.

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 Possible values: expanded, collapsed. Specify if the module will be expanded or collapsed on start.

additionalDescription¶

int if set to 1 additional description below the module title will be displayed.

description¶

string Description of the module. If not specified description will not be displayed.

Module source code¶

{% from "@macros/file_box.twig" import file_box %}
{% 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 = moduleConfig.collapseExpand == 'expanded' or isDisabled or not hasTitle %}

{% if not product.files|length == 0 %}
    <div class="product-files">
        <h-accordion class="accordion" {% if isDisabled %}disabled{% endif %}>
            <h-accordion-group {% if isAccordionOpened %}opened{% endif %}>
                {% if hasTitle %}
                    <h2 class="module__header product-files__header">
                        {{ module_accordion_toggler({ title: moduleConfig.title, isDisabled }) }}
                    </h2>
                {% endif %}

                <h-accordion-content>
                    {% if moduleConfig.description and moduleConfig.additionalDescription %}
                        <div class="grid__col grid__col_xs-12 grid__col_md-10">
                            <span class="module__description">{{ moduleConfig.description }}</span>
                        </div>
                    {% endif %}

                    <div class="product-files__files-section tile-grid tile-grid_sm-2 tile-grid_xl-3">
                        {% for file in product.files %}
                            {{ file_box(file) }}
                        {% endfor %}
                    </div>
                </h-accordion-content>
            </h-accordion-group>
        </h-accordion>
    </div>
{% endif %}

Macros reference¶

Webcomponents reference¶

h-accordion

Used Object Api methods¶

getProduct()

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": "Files to download",
            "isRequired": 0,
            "relations": [
              {
                "parentName": "displayTitle",
                "parentValueToActionsMap": [
                  {
                    "value" : 0,
                    "actions": ["setHidden","setDisabled", "setOptional"]
                  },{
                    "value" : 1,
                    "actions": ["setVisible","setAvailable", "setRequired"]
                  }
                ]
              }
            ],
            "supportsTranslations":1
          }
        ]
      },
      {
        "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": ["setHidden","setDisabled"]
                  },{
                    "value" : 1,
                    "actions": ["setVisible","setAvailable"]
                  }
                ]
              },
              {
                "parentName": "isEnabled",
                "parentValueToActionsMap": [
                  {
                    "value" : 0,
                    "actions": ["setHidden","setDisabled"]
                  },{
                    "value" : 1,
                    "actions": ["setVisible","setAvailable"]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "checkbox",
        "name": "additionalDescription",
        "label": "Display additional description below the module title",
        "defaultValue": 0,
        "children": [
          {
            "type": "textarea",
            "name": "description",
            "label": "Description",
            "isRequired": 0,
            "isHidden": 1,
            "relations": [
              {
                "parentName": "additionalDescription",
                "parentValueToActionsMap": [
                  {
                    "value" : 0,
                    "actions": ["setHidden","setDisabled"]
                  },{
                    "value" : 1,
                    "actions": ["setVisible","setAvailable"]
                  }
                ]
              }
            ],
            "supportsTranslations": 1
          }
        ]
      }
    ]
  }
]