mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: added a filter button to expose an off canvas menu for the product filters

pagebuilder
Tejas Chari 2023-11-06 20:53:03 +05:30
parent 8b3d7f5b65
commit 49e7942400
2 changed files with 27 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
templates/catalog/_partials/facets.tpl
View File

@ -23,27 +23,30 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
{if $facets|count} {if $facets|count}
<div id="search_filters" class="flex gap-4 flex-1 flex-col lg:flex-row lg:items-center"> <div id="products_top_sidebar" class="sidebar lg:left-0 p-2 overflow-y-auto text-center bg-white h-screen w-56">
{block name='facets_clearall_button'} <div id="search_filters">
{if $activeFilters|count} <div id="search_filter_buttons" class="flex">
<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"> {block name='facets_clearall_button'}
<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"> {if $activeFilters|count}
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <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">
<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> <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 d="M3 3l18 18"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
</svg> <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>
</button> <path d="M3 3l18 18"></path>
{else} </svg>
<div class="flex w-6 h-6 items-center justify-center select-none"> </button>
<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"> {else}
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <button id="_desktop_search_filters" class="flex w-6 h-6 items-center justify-center select-none">
<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 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">
</svg> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
</div> <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>
{/if} </svg>
{/block} </button>
{/if}
<div class="flex gap-4 flex-1 flex-col lg:flex-row"> {/block}
</div>
<div class="flex gap-4 flex-1 flex-col">
{foreach from=$facets item="facet"} {foreach from=$facets item="facet"}
{if !$facet.displayed} {if !$facet.displayed}
{continue} {continue}
@ -83,132 +86,7 @@
{/if} {/if}
{/foreach} {/foreach}
</div> </div>
</div>
</div> </div>
{/if} {/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">&#xE313;</i>
<i class="material-icons remove">&#xE316;</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">&#xE5CA;</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">&#xE5C5;</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>
*}

1
templates/catalog/_partials/products-top.tpl
View File

@ -23,6 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA * 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"> <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)} {if !empty($listing.rendered_facets)}
{include file='catalog/_partials/facets.tpl'} {include file='catalog/_partials/facets.tpl'}
{else} {else}