{# NOTE #}{# This file is a duplciate of the @Storefront/storefront/component/sorting.html.twig #}{# But due to an issue where we can't have this Sorting element twice in the DOM, we have duplciated into a seperate file. #}{# From here, we give the Sorting a different name and have it trigger the original sorting via a Javascript plugin. #}{% set config = { sorting: current } %}{% set showSorting = (slot.config.showSorting.value is defined) ? slot.config.showSorting.value : true %}{% if showSorting and sortings|length > 1 %} <div class="sorting" data-mimic-sorting="[data-list-sorting]" data-mimic-type="{{ type }}"> {% if type == 'select' %} <select class="sorting pr-8 {{ formSelectClass }}" aria-label="{{ 'general.sortingLabel'|trans|striptags }}"> {% for sorting in sortings %} {% set key = sorting.key %} <option value="{{ key }}"{% if key == current %} selected{% endif %}>{{ sorting.translated.label|sw_sanitize }}</option> {% endfor %} </select> {% elseif type == 'button' %} <div class="flex overflow-x-scroll grid-gap-2"> {% for sorting in sortings %} {% set key = sorting.key %} <div class="radio-container first:ml-4 last:mr-4"> <input type="radio" class="hidden peer" name="mimic-sorting" id="{{ key }}" value="{{ key }}" {% if key == current %} checked="checked"{% endif %}> <label for="{{ key }}" class="btn btn-secondary whitespace-nowrap transition peer-checked:bg-grey-900 peer-checked:text-white hover:bg-grey-900 hover:text-white">{{ sorting.translated.label|sw_sanitize }}</label> </div> {% endfor %} </div> {% endif %} </div>{% endif %}