Skip to content

sort_select

The sort_select macro is used to render a select list of possible sort options on a page. It uses a h-select webcomponent that allows to do it in a clean and semantic way.

Definition

{% sort_select(sortList, options) %}

Input parameters

sortList

sortList parameter represents a list of possible sort options of SortTypesList type. Usually this data gets fetched from the Object Api for example with the help of getProductsListSortTypes method.

options

object represents an object of sort select configuration options

Option key Type Default Required Description
options.currentSortId string "" no An id of a sort option that is currently selected
options.instanceId string "" no An id necessary to make individual sort select elements unique. Usually it can just be the module instance id

Example

In this example we display a sort select on a page with the product list. To get a list of available sort options we use a proper Object Api method. While using this macro inside a module we can pass a moduleInstance as an instanceId parameter. As specified earlier, usually it does the job.

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

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

{{ sort_select(sortList,
    {
        currentSortId: 0,
        instanceId: moduleInstance
    }
) }}

Macro source code

{% macro sort_select(sortList, options) %}
    {% if sortList.count %}
        {% set currentSort = sortList|filter((sort) => sort.id == options.currentSortId)|first %}

        <h-select class="select select_with-links" controlName="product-list-sort-select" control-id="product-list-sort-select-{{ options.instanceId }}" search-disabled>
            <span class="select__title" for="product-list-sort-select">{{ translate('Sort by') }}:</span>

            <h-select-toggler class="select-toggler" aria-label="{{ translate('Select') }}">
                <span id="product-list-sort-select-{{ options.instanceId }}" class="select-toggler__placeholder" slot="placeholder">{{ currentSort.name }}</span>
            </h-select-toggler>

           {% for sortOption in sortList %}
                <h-option disabled class="select-option_with-link" value="{{ sortOption.id }}">
                    <h-option-content>
                        <a class="select-option__link{% if currentSort.id == sortOption.id %} select-option__link_active{% endif %}"  rel="nofollow" href="{{ ObjectApi.getUrl().forSort(sortOption.id) }}">{{ sortOption.name }}</a>
                    </h-option-content>
                </h-option>
            {% endfor %}
        </h-select>
    {% endif %}
{% endmacro %}

Webcomponents reference

Object Api methods reference

Object Api objects reference