Sorting Control

The sorting-control webcomponent manages sorting UI for product lists. It handles responsive behavior by monitoring breakpoint changes through the Resolution Detector API and automatically closing the sorting sheet when the breakpoint changes while the sheet is open.

Behavior

• Breakpoint monitoring: When the sorting sheet is open, the webcomponent subscribes to breakpoint changes from the Resolution Detector API.
• Auto-close on breakpoint change: If the breakpoint changes while the sheet is open, the sheet automatically closes.

DOM Events Listened To

• open event on the sheet element: Captures current breakpoint and starts monitoring for changes.
• close event on the sheet element: Cleans up subscriptions and resets state.

Example

In this example, the sorting control contains both a sort select dropdown (for tablet/computer views) and a sidebar sheet (for mobile/responsive views).

HTML

<sorting-control class="sorting" id="sorting-12345">
    <!-- Sort select dropdown (for tablet/computer display modes) -->
    <div class="sort-select hidden-xs-only">
        <!-- sort_select macro output -->
    </div>

    <!-- Sort sheet opener button (for sidebar display modes) -->
    <h-sheet-opener class="btn btn_outline btn_xs sorting__sheet-opener">
        Sorting
    </h-sheet-opener>

    <!-- Sorting sidebar sheet -->
    <h-sheet id="sorting-sheet-12345" class="sorting__sheet" hidden>
        <h-sheet-header>
            <h2 class="font_semibold">Sorting</h2>
            <h-sheet-close class="sorting__sheet__close btn btn_icon">
                <span class="sr-only">Close sorting</span>
            </h-sheet-close>
        </h-sheet-header>

        <h-sheet-body>
            <ul class="sorting-list" aria-label="Sorting options">
                <li class="sorting-list__option">
                    <a class="sorting-list__link sorting-list__link_active" href="/products?sort=1">
                        Price: lowest first
                    </a>
                </li>
                <li class="sorting-list__option">
                    <a class="sorting-list__link" href="/products?sort=2">
                        Price: highest first
                    </a>
                </li>
            </ul>
        </h-sheet-body>
    </h-sheet>
</sorting-control>

Integration

The sorting-control webcomponent is typically rendered by the sorting module and uses:

• Resolution Detector API: To detect breakpoint changes and automatically close the sheet.
• h-sheet webcomponent: For the responsive sorting sidebar.
• sort_select macro: For dropdown sorting on larger breakpoints.
• sort_opener macro: For the sidebar opener button.

Webcomponents reference

• h-sheet