From 49e7942400b8f40ab3db780c77097260991aba58 Mon Sep 17 00:00:00 2001
From: Tejas Chari <tejasc@consultbop.com>
Date: Mon, 6 Nov 2023 20:53:03 +0530
Subject: [PATCH] refactor: added a filter button to expose an off canvas menu
 for the product filters

---
 templates/catalog/_partials/facets.tpl       | 174 +++----------------
 templates/catalog/_partials/products-top.tpl |   1 +
 2 files changed, 27 insertions(+), 148 deletions(-)

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">&#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>
-*}
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}