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

templates/catalog/_partials/facets.tpl

@@ -23,7 +23,9 @@
  * 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">
+  <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">
@@ -34,16 +36,17 @@
             </svg>
           </button>
           {else}
-        <div class="flex w-6 h-6 items-center justify-center select-none">
+          <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>
-        </div>
+          </button>
           {/if}
         {/block}
+      </div>
 
-    <div class="flex gap-4 flex-1 flex-col lg:flex-row">
+    <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>
-{/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>
-*}

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}