sort_opener

The sort_opener macro is used to render a button that opens the sorting sidebar sheet. It uses an h-sheet-opener webcomponent that provides a clean and semantic way to trigger the sorting options panel.

Definition

{% sort_opener(options) %}

Input parameters

options

object represents an object of sort opener configuration options

Option key	Type	Default	Required	Description
options.name	string	""	yes	The name attribute for the h-sheet-opener element. Should match the id of the sorting sheet it opens
options.classNames	string	""	no	Additional CSS classes to apply to the button element
options.iconSize	string	"m"	no	Size of the sort icon. Possible values: s, m, l, xl

Example

In this example we display a sort opener button that opens the sorting sheet. The macro is typically used in the sorting module for configurable breakpoints.

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

{{ sort_opener({ 
    name: 'sorting-sheet-' ~ moduleInstance, 
    classNames: 'hidden-lg-only hidden-xl-only',
    iconSize: 'l'
}) }}

Rendered output

The macro renders an h-sheet-opener button with:

• A sort icon (default or specified size)
• Screen-reader friendly text label
• A visual label "Sorting"
• Button styling with btn btn_outline btn_xs classes
• Additional classes for responsive display control

Macro source code

{% macro sort_opener(options) %}
    {% from "@macros/icon.twig" import icon %}

    <h-sheet-opener 
        name="{{ options.name }}" 
        class="btn btn_outline btn_xs sorting__sheet-opener {{ options.classNames|default('') }}"
    >
        <span class="sr-only">{{ translate('Open sorting options') }}</span>       
        {{ icon('icon-sort', { size: options.iconSize, ariaHidden: true }) }}

        <div class="labeled-icon__signature" aria-hidden="true">
            {{ translate('Sorting') }}
        </div>
    </h-sheet-opener>
{% endmacro %}

Webcomponents reference

• h-sheet-opener
• h-sheet

Macros reference

• icon

Used styles

• Buttons
• Sorting