Sorting¶

Availability: Product lists contexts

The sorting module is used to render available sorting options for product lists. The module renders sorting options both as a dropdown (for larger breakpoints) and as a responsive sidebar sheet (for mobile and configurable breakpoints).

Configuration parameters¶

tabletSortingDisplayMode¶

radio Sorting display mode for tablet breakpoint (dropdown or sidebar). Default: dropdown.

computersSortingDisplayMode¶

radio Sorting display mode for computers breakpoint (dropdown or sidebar). Default: dropdown.

Behavior¶

The sorting module uses the sorting-control webcomponent to manage responsive behavior:

On tablet and larger breakpoints: Renders sorting as either a dropdown or a button with sidebar, based on configuration.
On mobile: Always renders as a sidebar sheet.
Breakpoint monitoring: The sorting-control webcomponent monitors breakpoint changes. When the sorting sheet is open and a breakpoint change is detected, the sheet automatically closes.

Module source code¶

{% from "@macros/sort_select.twig" import sort_select %}
{% from "@macros/icon.twig" import icon %}
{% from "@macros/sort_opener.twig" import sort_opener %}

{% set sortList = ObjectApi.getProductsListSortTypes() %}

{% set mobileHiddenClasses = 'hidden-xs-only' %}
{% set tabletViewClasses = 'hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only' %}
{% set computersViewClasses = 'hidden-sm-only hidden-md-only' %}
{% set isTabletSidebar = moduleConfig.tabletSortingDisplayMode == 'sidebar' %}
{% set isComputersSidebar = moduleConfig.computersSortingDisplayMode == 'sidebar' %}

{% set sortOpenerClasses = [] %}
{% set sortSelectClasses = [] %}
{% set sortSelectClasses = sortSelectClasses|merge([mobileHiddenClasses]) %}

{% if isTabletSidebar == isComputersSidebar %}
  {% if isTabletSidebar %}
    {% set sortSelectClasses = sortSelectClasses|merge([tabletViewClasses, computersViewClasses]) %}
  {% else %}
    {% set sortOpenerClasses = sortOpenerClasses|merge([tabletViewClasses, computersViewClasses]) %}
  {% endif %}
{% elseif isTabletSidebar %}
  {% set sortOpenerClasses = sortOpenerClasses|merge([tabletViewClasses]) %}
  {% set sortSelectClasses = sortSelectClasses|merge([computersViewClasses]) %}
{% else %}
  {% set sortOpenerClasses = sortOpenerClasses|merge([computersViewClasses]) %}
  {% set sortSelectClasses = sortSelectClasses|merge([tabletViewClasses]) %}
{% endif %}


{% set sortName = 'sorting-sheet-' ~ moduleInstance %}



<sorting-control
  class="sorting"
  id="sorting-{{ moduleInstance }}"
>

  {{ sort_opener({ 
      name: sortName, 
      classNames: sortOpenerClasses|join(' ')
      }) 
  }}

  {{
    sort_select(sortList, {
      currentSortId: sort,
      instanceId: moduleInstance,
      classNames: sortSelectClasses|join(' ')
    })
  }}

  <h-sheet id="{{ sortName }}" class="sorting__sheet" hidden>
    <h-sheet-header>
        <h2 class="font_semibold">{{ translate('Sorting') }}</h2>
        <h-sheet-close class="sorting__sheet__close btn btn_icon">
            <span class="sr-only">{{ translate('Close sorting') }}</span>
            {{ icon('icon-x', { size: 'xl', ariaHidden: true }) }}
        </h-sheet-close>
    </h-sheet-header>

    <h-sheet-body>
        <ul class="sorting-list" aria-label="{{ translate('Sorting options') }}">
        {% set currentSort = sortList|filter((sortOption) => sortOption.id == sort)|first %}

        {% for sortOption in sortList %}
        <li class="sorting-list__option">
          <a class="sorting-list__link{% if currentSort.id == sortOption.id %} sorting-list__link_active{% endif %}" aria-selected="{{ currentSort.id == sortOption.id ? 'true' : 'false' }}"  tabindex="0" rel="nofollow" href="{{ ObjectApi.getUrl().forSort(sortOption.id) }}" aria-label="{{ translate('Set sorting to') }} {{ sortOption.name }}">
            {{ sortOption.name }}
            {% if currentSort.id == sortOption.id %}
              {{ icon('icon-check', { size: 'l', ariaHidden: true }) }}
            {% endif %}
          </a>
        </li>
        {% endfor %}
      </ul>
    </h-sheet-body>
  </h-sheet>

</sorting-control>

Macros reference¶

Webcomponents reference¶

Used Object Api methods¶

Used styles¶

Module configuration schema¶

[
    {
        "label": "General settings",
        "state": "unfolded",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings%s##### in the admin panel:%s- changing phrases in [translations](%s)%s- enabling additional sorting option in [product settings](%s)",
                    "placeholderValues": [
                        "\n",
                        "\n",
                        "\/admin\/configLanguages\/list", 
                        "\n",
                        "\/admin\/configProducts"
                    ]
                }
            },
            {
                "type": "header",
                "name": "headerTablet",
                "label": "Tablet",
                "options": {
                    "icon": "tablet"
                },
                "children": [
                    {
                        "type": "radio",
                        "name": "tabletSortingDisplayMode",
                        "label": "Sorting display mode",
                        "defaultValue": "dropdown",
                        "options": {
                            "radioOptions": [
                                {
                                    "key": "dropdown",
                                    "label": "Dropdown sorting"
                                },
                                {
                                    "key": "sidebar",
                                    "label": "Button and sliding sidebar"
                                }
                            ]
                        }
                    }
                ]
            },
            {
                "type": "header",
                "name": "headerComputers",
                "label": "Computers",
                "options": {
                    "icon": "computers"
                },
                "children": [
                    {
                        "type": "radio",
                        "name": "computersSortingDisplayMode",
                        "label": "Sorting display mode",
                        "defaultValue": "dropdown",
                        "options": {
                            "radioOptions": [
                                {
                                    "key": "dropdown",
                                    "label": "Dropdown sorting"
                                },
                                {
                                    "key": "sidebar",
                                    "label": "Button and sliding sidebar"
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }
]