diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl index c414b71..337d1a0 100644 --- a/templates/catalog/_partials/facets.tpl +++ b/templates/catalog/_partials/facets.tpl @@ -24,7 +24,7 @@ *} {if $facets|count} <div id="search_filters"> - <div id="search_filter_buttons" class="flex"> + <div id="search_filter_buttons" class="flex hidden"> {block name='facets_clearall_button'} {if $activeFilters|count} <button id="_desktop_search_filters_clear_all" data-search-url="{$clear_all_link}" class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all"> @@ -44,15 +44,16 @@ {/if} {/block} </div> + <div class="th-accordion"> {foreach from=$facets item="facet"} {if !$facet.displayed} {continue} {/if} {if $facet.widgetType === 'dropdown'} - <div class="border-t border-gray-200 px-4 py-4"> + <div class="th-accordion-item border-t border-gray-200 px-4 py-4"> <h3 class="-mx-2 -my-3 flow-root"> <!-- Expand/collapse section button --> - <button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false"> + <button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false"> <span class="font-medium text-gray-900"> {$active_found = false} {foreach from=$facet.filters item="filter"} @@ -75,7 +76,7 @@ </button> </h3> <!-- Filter section, show/hide based on section state. --> - <div class="pt-6 px-4 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}"> + <div class="th-accordion-item-content pt-6 px-4 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}"> <div class="flex flex-wrap w-full"> {foreach from=$facet.filters item="filter"} {if !$filter.active} diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl index e301e5b..b55d513 100644 --- a/templates/catalog/_partials/products-top.tpl +++ b/templates/catalog/_partials/products-top.tpl @@ -24,7 +24,7 @@ *} <div id="js-product-list-top" class="bg-white"> - <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true"> + <div class="relative z-40" role="dialog" aria-modal="true"> <div class="fixed inset-0 z-50 flex"> <div id="product-list-top-filters" class="relative mr-auto flex h-full w-screen md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl"> <div class="flex items-center justify-between px-4"> @@ -39,14 +39,15 @@ </button> </div> <form class="mt-4 border-t border-gray-200"> + {block name='sort_by'} + {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} + {/block} {if !empty($listing.rendered_facets)} {include file='catalog/_partials/facets.tpl'} {else} <div></div> {/if} - {block name='sort_by'} - {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} - {/block} + </form> </div> </div> diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl index f8b44f8..f300fe8 100644 --- a/templates/catalog/_partials/sort-orders.tpl +++ b/templates/catalog/_partials/sort-orders.tpl @@ -23,10 +23,11 @@ * International Registered Trademark & Property of PrestaShop SA *} -<div class="border-t border-gray-200 px-4 py-4"> +<div class="th-accordion"> +<div class="th-accordion-item border-t border-gray-200 px-4 py-4"> <h3 class="-mx-2 -my-3 flow-root"> <!-- Expand/collapse section button --> - <button id="show-sort-by" type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false"> + <button id="show-sort-by" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false"> <span class="font-medium text-gray-900"> Sort By </span> @@ -40,13 +41,13 @@ </button> </h3> <!-- Filter section, show/hide based on section state. --> - <div class="pt-6 hidden" id="filter-section-sort-by"> - <div class="flex flex-wrap w-full"> + <div class="pt-6 hidden th-accordion-item-content" id="filter-section-sort-by"> + <div class="flex flex-col w-full gap-4"> {foreach from=$listing.sort_orders item=sort_order} <a rel="nofollow" href="{$sort_order.url}" - class="select-list text-sm w-1/4 mb-4 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}" + class="select-list text-sm shrink-0 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}" > {$sort_order.label} </a> @@ -54,6 +55,7 @@ </div> </div> </div> +</div> {*