Side Menu Categories¶

Availability: All contexts

The side_menu_categories module is used to display a list of product categories in the side menu.

Configuration parameters¶

headingContent¶

string Text content of a header

headingLevel¶

string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header module: - h2 - h3 - h4 - h5 - h6

shouldDisplayHeading¶

int if set to 1 the header will be displayed

shouldDisplayHeadingUnderline¶

int if set to 1 the header underline will be displayed

showAllSubcategories¶

int if set to 1, displays all subcategories

showNewProducts¶

int if set to 1, shows new products in categories

showSpecialOffers¶

int if set to 1, shows special offers in categories

Module source code¶

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

{% set categories = ObjectApi.getCategories(true) %}

{% if category_id %}
    {% set activeCategory = ObjectApi.getCategory(category_id) %}
{% endif %}

{% set shouldDisplayHeadingUnderline = moduleConfig.shouldDisplayHeadingUnderline == 1 %}
{% set headingLevel = moduleConfig.headingLevel %}

{% if categories is not empty %}
    <aside class="side-menu-categories" aria-label="{{ translate('Side menu (Categories)') }}" role="navigation">
        <a href="#skip-side-menu-categories" aria-label="{{ translate('Skip the product category menu') }}"></a>

        {% if moduleConfig.shouldDisplayHeading == 1 and headingLevel %}
            <{{ headingLevel }}
                class="
                    header
                    header_{{ headingLevel }}
                    {% if shouldDisplayHeadingUnderline %} header_underline {% endif %}
                "
            >
                <span {% if shouldDisplayHeadingUnderline %} class="header_highlight" {% endif %}>
                    {{ moduleConfig.headingContent }}
                </span>
            </{{ headingLevel }}>
        {% endif %}

        <ul class="side-menu-categories__list side-menu-categories__list-level-1">
            {{ side_menu_categories(categories, activeCategory, {
                showAllSubcategories: moduleConfig.showAllSubcategories,
                showNewProducts: moduleConfig.showNewProducts,
                showSpecialOffers: moduleConfig.showSpecialOffers
            }) }}
        </ul>

        <div id="skip-side-menu-categories"></div>
    </aside>
{% endif %}

Used ObjectApi methods¶

Used macros¶

side_menu_categories

Used styles¶

Module configuration schema¶

[
  {
      "label": "General settings",
      "state": "unfolded",
      "elements": [
          {
              "name": "infobox",
              "type": "infobox",
              "options": {
                  "type": "blank",
                  "message": "#### Related settings in the admin panel%s- adding, removing, and changing the position of [categories and subcategories](%s)%s- disabling the display of subcategories in the \"Subcategories and filters\" module in [the filter settings](%s)",
                  "placeholderValues": [
                      "\n",
                      "\/admin\/categories",
                      "\n",
                      "\/admin\/configFilters"
                  ]
              }
          },
          {
              "name": "shouldDisplayHeading",
              "type": "checkbox",
              "label": "Display heading",
              "defaultValue": 0,
              "children": [
                  {
                      "name": "headingContent",
                      "type": "text",
                      "relations": [
                          {
                              "parentName": "shouldDisplayHeading",
                              "parentValueToActionsMap": [
                                  {
                                      "value": 0,
                                      "actions": [
                                          "setHiddenAndOptional",
                                          "setDisabled"
                                      ]
                                  },
                                  {
                                      "value": 1,
                                      "actions": [
                                          "setVisibleAndRequired",
                                          "setAvailable"
                                      ]
                                  }
                              ]
                          }
                      ],
                      "label": "Module heading content",
                      "supportsTranslations": true
                  },
                  {
                      "name": "headingLevel",
                      "type": "select",
                      "hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
                      "relations": [
                          {
                              "parentName": "shouldDisplayHeading",
                              "parentValueToActionsMap": [
                                  {
                                      "value": 0,
                                      "actions": [
                                          "setHidden",
                                          "setDisabled"
                                      ]
                                  },
                                  {
                                      "value": 1,
                                      "actions": [
                                          "setVisible",
                                          "setAvailable"
                                      ]
                                  }
                              ]
                          }
                      ],
                      "options": {
                          "isWithSearch": 0,
                          "selectOptions": [
                              {
                                  "key": "h2",
                                  "label": "H2"
                              },
                              {
                                  "key": "h3",
                                  "label": "H3"
                              },
                              {
                                  "key": "h4",
                                  "label": "H4"
                              },
                              {
                                  "key": "h5",
                                  "label": "H5"
                              },
                              {
                                  "key": "h6",
                                  "label": "H6"
                              }
                          ]
                      },
                      "label": "Heading level",
                      "defaultValue": "h2"
                  },
                  {
                      "name": "shouldDisplayHeadingUnderline",
                      "type": "checkbox",
                      "relations": [
                          {
                              "parentName": "shouldDisplayHeading",
                              "parentValueToActionsMap": [
                                  {
                                      "value": 0,
                                      "actions": [
                                          "setHidden",
                                          "setDisabled"
                                      ]
                                  },
                                  {
                                      "value": 1,
                                      "actions": [
                                          "setVisible",
                                          "setAvailable"
                                      ]
                                  }
                              ]
                          }
                      ],
                      "label": "Add underline below the heading",
                      "defaultValue": 0
                  }
              ]
          },
          {
              "name": "showAllSubcategories",
              "type": "checkbox",
              "hint": "If the menu contains many categories, expanding them all at once may make it difficult for customers to navigate.",
              "label": "Show all subcategories expanded",
              "defaultValue": 0
          },
          {
              "name": "header",
              "type": "header",
              "label": "Display additional links at the end of the list of product categories:",
              "children": [
                  {
                      "name": "showNewProducts",
                      "type": "checkbox",
                      "label": "New products",
                      "defaultValue": 1
                  },
                  {
                      "name": "showSpecialOffers",
                      "type": "checkbox",
                      "label": "Special offers",
                      "defaultValue": 1
                  }
              ]
          }
      ]
  }
]