diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl index 5e7c427..32f4f1f 100644 --- a/templates/catalog/_partials/facets.tpl +++ b/templates/catalog/_partials/facets.tpl @@ -23,27 +23,30 @@ * International Registered Trademark & Property of PrestaShop SA *} {if $facets|count} - <div id="search_filters" class="flex gap-4 flex-1 flex-col lg:flex-row lg:items-center"> - {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"> - <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path> - <path d="M3 3l18 18"></path> - </svg> - </button> - {else} - <div class="flex w-6 h-6 items-center justify-center select-none"> - <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path> - </svg> - </div> - {/if} - {/block} - - <div class="flex gap-4 flex-1 flex-col lg:flex-row"> + <div id="products_top_sidebar" class="sidebar lg:left-0 p-2 overflow-y-auto text-center bg-white h-screen w-56"> + <div id="search_filters"> + <div id="search_filter_buttons" class="flex"> + {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"> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path> + <path d="M3 3l18 18"></path> + </svg> + </button> + {else} + <button id="_desktop_search_filters" class="flex w-6 h-6 items-center justify-center select-none"> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path> + </svg> + </button> + {/if} + {/block} + </div> + + <div class="flex gap-4 flex-1 flex-col"> {foreach from=$facets item="facet"} {if !$facet.displayed} {continue} @@ -83,132 +86,7 @@ {/if} {/foreach} </div> + + </div> </div> {/if} - -{** - - {if !$facet.displayed} - {continue} - {/if} - - <section class="facet clearfix"> - <p class="h6 facet-title hidden-sm-down">{$facet.label}</p> - {assign var=_expand_id value=10|mt_rand:100000} - {assign var=_collapse value=true} - {foreach from=$facet.filters item="filter"} - {if $filter.active}{assign var=_collapse value=false}{/if} - {/foreach} - - <div class="title hidden-md-up" data-target="#facet_{$_expand_id}" data-toggle="collapse"{if !$_collapse} aria-expanded="true"{/if}> - <p class="h6 facet-title">{$facet.label}</p> - <span class="float-xs-right"> - <span class="navbar-toggler collapse-icons"> - <i class="material-icons add"></i> - <i class="material-icons remove"></i> - </span> - </span> - </div> - - {if $facet.widgetType !== 'dropdown'} - {block name='facet_item_other'} - <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}"> - {foreach from=$facet.filters key=filter_key item="filter"} - {if !$filter.displayed} - {continue} - {/if} - - <li> - <label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}"> - {if $facet.multipleSelectionAllowed} - <span class="custom-checkbox"> - <input - id="facet_input_{$_expand_id}_{$filter_key}" - data-search-url="{$filter.nextEncodedFacetsURL}" - type="checkbox" - {if $filter.active }checked{/if} - > - {if isset($filter.properties.color)} - <span class="color" style="background-color:{$filter.properties.color}"></span> - {elseif isset($filter.properties.texture)} - <span class="color texture" style="background-image:url({$filter.properties.texture})"></span> - {else} - <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked"></i></span> - {/if} - </span> - {else} - <span class="custom-radio"> - <input - id="facet_input_{$_expand_id}_{$filter_key}" - data-search-url="{$filter.nextEncodedFacetsURL}" - type="radio" - name="filter {$facet.label}" - {if $filter.active }checked{/if} - > - <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span> - </span> - {/if} - - <a - href="{$filter.nextEncodedFacetsURL}" - class="_gray-darker search-link js-search-link" - rel="nofollow" - > - {$filter.label} - {if $filter.magnitude} - <span class="magnitude">({$filter.magnitude})</span> - {/if} - </a> - </label> - </li> - {/foreach} - </ul> - {/block} - - {else} - - {block name='facet_item_dropdown'} - <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}"> - <li> - <div class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown"> - <a class="select-title" rel="nofollow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - {$active_found = false} - <span> - {foreach from=$facet.filters item="filter"} - {if $filter.active} - {$filter.label} - {if $filter.magnitude} - ({$filter.magnitude}) - {/if} - {$active_found = true} - {/if} - {/foreach} - {if !$active_found} - {l s='(no filter)' d='Shop.Theme.Global'} - {/if} - </span> - <i class="material-icons float-xs-right"></i> - </a> - <div class="dropdown-menu"> - {foreach from=$facet.filters item="filter"} - {if !$filter.active} - <a - rel="nofollow" - href="{$filter.nextEncodedFacetsURL}" - class="select-list" - > - {$filter.label} - {if $filter.magnitude} - ({$filter.magnitude}) - {/if} - </a> - {/if} - {/foreach} - </div> - </div> - </li> - </ul> - {/block} - {/if} - </section> -*} diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl index eb74cfa..459b49b 100644 --- a/templates/catalog/_partials/products-top.tpl +++ b/templates/catalog/_partials/products-top.tpl @@ -23,6 +23,7 @@ * International Registered Trademark & Property of PrestaShop SA *} <div id="js-product-list-top" class="flex w-full flex-col lg:flex-row lg:justify-between"> + <button id="show_filters" class=""> Filter </button> {if !empty($listing.rendered_facets)} {include file='catalog/_partials/facets.tpl'} {else}