Merge pull request 'feat: offcanvas menu for product filters' (#2) from tejasc/theme-elegance:main into main

Reviewed-on: brooksbingham/theme-elegance#2

_dev/custom.css

@@ -0,0 +1 @@
+@import "./node_modules/jquery-offcanvas/dist/jquery-offcanvas.min.css"

_dev/js/facets.js

@@ -0,0 +1 @@
+import $ from "jquery";

_dev/js/theme.js

@@ -23,28 +23,33 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  */
 /* eslint-disable */
-import 'bootstrap-touchspin';
+import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
-import 'jquery-touchswipe';
+import touchspin from "bootstrap-touchspin";
-import './selectors';
+import "jquery-touchswipe";
+import "./selectors";
 
-import './responsive';
+import "./responsive";
-import './checkout';
+import "./checkout";
-import './customer';
+import "./customer";
-import './listing';
+import "./listing";
-import './product';
+import "./product";
-import './cart';
+import "./cart";
+import "./facets";
 
-import prestashop from 'prestashop';
+import prestashop from "prestashop";
-import EventEmitter from 'events';
+import EventEmitter from "events";
-import DropDown from './components/drop-down';
+import DropDown from "./components/drop-down";
-import Form from './components/form';
+import Form from "./components/form";
-import usePasswordPolicy from './components/usePasswordPolicy';
+import usePasswordPolicy from "./components/usePasswordPolicy";
-import ProductMinitature from './components/product-miniature';
+import ProductMinitature from "./components/product-miniature";
-import ProductSelect from './components/product-select';
+import ProductSelect from "./components/product-select";
-import TopMenu from './components/top-menu';
+import TopMenu from "./components/top-menu";
 
-import './components/block-cart';
+import "./components/block-cart";
-import $ from 'jquery';
+import $ from "jquery";
+import jo from "jquery-offcanvas";
+jo(window, $);
+touchspin(window, $);
 /* eslint-enable */
 
 // "inherit" EventEmitter
@@ -53,8 +58,8 @@ for (const i in EventEmitter.prototype) {
   prestashop[i] = EventEmitter.prototype[i];
 }
 
-$(document).ready(() => {
+$(function () {
-  const dropDownEl = $('.js-dropdown');
+  const dropDownEl = $(".js-dropdown");
   const form = new Form();
   const topMenuEl = $('.js-top-menu ul[data-depth="0"]');
   const dropDown = new DropDown(dropDownEl);
@@ -66,17 +71,81 @@ $(document).ready(() => {
   topMenu.init();
   productMinitature.init();
   productSelect.init();
-  usePasswordPolicy('.field-password-policy');
+  usePasswordPolicy(".field-password-policy");
 
   $('.carousel[data-touch="true"]').swipe({
     swipe(event, direction) {
-      if (direction === 'left') {
+      if (direction === "left") {
-        $(this).carousel('next');
+        $(this).carousel("next");
       }
-      if (direction === 'right') {
+      if (direction === "right") {
-        $(this).carousel('prev');
+        $(this).carousel("prev");
       }
     },
-    allowPageScroll: 'vertical',
+    allowPageScroll: "vertical",
   });
+
+  // $("#products_top_sidebar").offcanvas({
+  //   effect: "slide-in-over",
+  //   overlay: true,
+  //   classes: {
+  //     element: "absolute top-0 z-50",
+  //   },
+  // });
+  //
+  // $("#show_filters").on("click", function () {
+  //   $("#products_top_sidebar").offcanvas("toggle");
+  // });
+
+  function ThAccordion() {}
+
+  $.extend(ThAccordion.prototype, {
+    init() {},
+  });
+
+  $.fn["thaccordion"] = function () {
+    var selectors = {
+      root: ".th-accordion",
+      item: ".th-accordion-item",
+      trigger: ".th-accordion-item-trigger",
+      content: ".th-accordion-item-content",
+    };
+    let selection = null;
+    let items = this.find(selectors.item);
+
+    function collapseAll() {
+      items.each(function () {
+        $(this).find(selectors.content).hide(500);
+      });
+    }
+
+    function open() {
+      collapseAll();
+      $(selection).find(selectors.content).show(500);
+    }
+
+    function isOpen(item) {
+      return $(item).find(selectors.content).is(":visible");
+    }
+
+    collapseAll();
+
+    items.each(function () {
+      var self = this;
+      $(this)
+        .find(selectors.trigger)
+        .on("click", function () {
+          if (selection === self) {
+            selection = null;
+          } else {
+            selection = self;
+            if (!isOpen(selection)) {
+              open();
+            }
+          }
+        });
+    });
+  };
+
+  $(".th-accordion").thaccordion();
 });

_dev/package.json

@@ -11,14 +11,17 @@
   "scripts": {
     "dev:tailwind": "tailwindcss -i ./elegance.css -o ../assets/css/theme.css --watch",
     "dev:livereload": "livereload \"../templates/, ../modules/, ../assets/\"",
-    "dev:js": "vite dev",
+    "dev:js": "vite build --watch",
     "dev": "yarn run dev:livereload & yarn run dev:tailwind & yarn run dev:js"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "bootstrap-touchspin": "^4.7.3",
     "events": "^3.3.0",
-    "jquery": "^3.7.1",
+    "jquery": "3.5.1",
+    "jquery-offcanvas": "^3.4.7",
     "jquery-touchswipe": "^1.6.19",
+    "postcss-import": "^15.1.0",
     "sprintf-js": "^1.1.3",
     "velocity-animate": "^1.5.2"
   }

_dev/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+  },
+};

_dev/tailwind.config.js

@@ -4,9 +4,8 @@ module.exports = {
   theme: {
     fontFamily: {
       sans: ["Cairo"],
-            serif: ["Cairo"]
+      serif: ["Cairo"],
-        }
     },
-    plugins: [],
+  },
-}
+  plugins: [require("@tailwindcss/forms")],
-
+};

_dev/vite.config.js

@@ -1,26 +1,28 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
 
 export default defineConfig({
   build: {
+    sourcemap: "inline",
+    minify: false,
     lib: {
       entry: "./js/theme.js",
-      name: 'theme',
+      name: "theme",
-      formats: ['iife'],
+      formats: ["iife"],
-      fileName: function() {
+      fileName: function () {
-        return 'theme.js'
+        return "theme.js";
-      }
       },
-    outDir: '../assets/js/',
+    },
+    outDir: "../assets/js/",
     rollupOptions: {
-      external: ['$', 'jquery', 'prestashop'],
+      external: ["$", "jquery", "prestashop"],
       output: {
         globals: {
-          $: '$',
+          $: "$",
-          jquery: 'jQuery',
+          jquery: "jQuery",
-          prestashop: 'prestashop'
+          prestashop: "prestashop",
-        }
-      }
         },
-    write: true
       },
-})
+    },
+    write: true,
+  },
+});

_dev/yarn.lock

@@ -170,6 +170,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@tailwindcss/forms@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.6.tgz#29c6c2b032b363e0c5110efed1499867f6d7e868"
+  integrity sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -418,15 +425,20 @@ jiti@^1.19.1:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+jquery-offcanvas@^3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/jquery-offcanvas/-/jquery-offcanvas-3.4.7.tgz#dde1f492f5904ff76bdd98ba42f1e514fa52ed70"
+  integrity sha512-5E3ITQNKgyzJfXqa80Nm9QBCVng4IpbrlGqAuCMSll7yPjoqJgTBl4akZE5rZXJrIpPrp1wPIjPF8tAyuhTD6g==
+
 jquery-touchswipe@^1.6.19:
   version "1.6.19"
   resolved "https://registry.yarnpkg.com/jquery-touchswipe/-/jquery-touchswipe-1.6.19.tgz#dfd5ddaec0b78212dd500d29707129b9c7fd6cd4"
   integrity sha512-b0BGje9reNRU3u6ksAK9QqnX7yBRgLNe/wYG7DOfyDlhBlYjayIT8bSOHmcuvptIDW/ubM9CTW/mnZf9Rohuow==
 
-jquery@^3.7.1:
+jquery@3.5.1:
-  version "3.7.1"
+  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
-  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
 
 lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
@@ -466,6 +478,11 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"

assets/css/theme.css

@@ -584,6 +584,10 @@ video {
   visibility: collapse;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -604,6 +608,10 @@ video {
   left: 0px;
 }
 
+.left-\[-300px\] {
+  left: -300px;
+}
+
 .left-\[100\%\] {
   left: 100%;
 }
@@ -632,10 +640,18 @@ video {
   top: 50%;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-full {
   top: 100%;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -754,8 +770,8 @@ video {
   height: 6rem;
 }
 
-.h-48 {
+.h-5 {
-  height: 12rem;
+  height: 1.25rem;
 }
 
 .h-5 {
@@ -778,8 +794,8 @@ video {
   height: 100%;
 }
 
-.w-1\/3 {
+.h-screen {
-  width: 33.333333%;
+  height: 100vh;
 }
 
 .w-1\/4 {
@@ -798,6 +814,10 @@ video {
   width: 6rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -925,6 +945,10 @@ video {
   gap: 2rem;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -979,6 +1003,10 @@ video {
      object-fit: cover;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -1167,6 +1195,10 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1265,6 +1297,10 @@ a:hover .icon-tabler {
     width: 50%;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-24 {
     width: 6rem;
   }
@@ -1299,6 +1335,10 @@ a:hover .icon-tabler {
     position: static;
   }
 
+  .lg\:left-0 {
+    left: 0px;
+  }
+
   .lg\:right-0 {
     right: 0px;
   }

assets/js/style.css

@@ -0,0 +1,10 @@
+/**
+ * jQuery.offcanvas v3.4.7 - Easy to use jQuery offcanvas plugin.
+ * Copyright 2016 Lars Graubner - http://lgraubner.github.io/jquery-offcanvas/
+ * License: MIT
+ */
+.offcanvas{position:relative}
+.offcanvas-outer{left:0;overflow-x:hidden;position:absolute;top:0;width:100%}
+.offcanvas-inner{position:relative}
+.offcanvas-element{margin:0;overflow:hidden;position:absolute;top:0;z-index:2}
+.offcanvas-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1}

templates/_partials/footer.tpl

@@ -71,7 +71,7 @@
       {/block}
     </div>
     <div class="flex py-8">
-      <a href="{$shop.url}">
+      <a href="{$urls.base_url}">
       <span class="text-sm">© 2023 Brooksbingham Clothing</span>
       </a>
     </div>

templates/_partials/stylesheets.tpl

@@ -26,6 +26,7 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.36.0/tabler-icons.min.css">
+<link rel="stylesheet" href="/themes/elegance/assets/js/style.css">
 {foreach $stylesheets.external as $stylesheet}
   <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
 {/foreach}

templates/catalog/_partials/facets.tpl

@@ -23,7 +23,8 @@
  * 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="search_filters">
+    <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">
@@ -34,16 +35,95 @@
             </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="th-accordion">
+    {foreach from=$facets item="facet"}
+      {if !$facet.displayed}
+        {continue}
+      {/if}
+      {if $facet.widgetType === 'dropdown'}
+        <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="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"}
+                  {if $filter.active}
+                    {$filter.label}
+                    {$active_found = true}
+                  {/if}
+                {/foreach}
+                {if !$active_found}
+                  {$facet.label}
+                {/if}
+              </span>
+              <span class="ml-6 flex items-center">
+                <!-- Expand icon, show/hide based on section open state. -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                  <path d="M6 9l6 6l6 -6"></path>
+                </svg>
+              </span>
+            </button>
+          </h3>
+          <!-- Filter section, show/hide based on section state. -->
+          <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}
+                  <a
+                    rel="nofollow"
+                    href="{$filter.nextEncodedFacetsURL}"
+                    class="select-list text-sm w-1/4 mb-4"
+                  >
+                    {$filter.label}
+                  </a>
+                {/if}
+              {/foreach}
+            </div>
+          </div>
+        </div>
+      {/if}
+    {/foreach}
+  </div>
+{/if}
 
-    <div class="flex gap-4 flex-1 flex-col lg:flex-row">
+
+ {*
+{if $facets|count}
+  <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}
@@ -66,7 +146,7 @@
                 <path d="M6 9l6 6l6 -6"></path>
               </svg>
             </button>
-            <div class="dropdown-menu hidden group-hover:flex flex-col position absolute left-0 top-full w-full bg-white">
+            <div class="dropdown-menu hidden group-hover:flex flex-col position absolute left-0 top-full w-full bg-white z-10">
               {foreach from=$facet.filters item="filter"}
                 {if !$filter.active}
                   <a
@@ -83,132 +163,8 @@
         {/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>
 *}

templates/catalog/_partials/products-top.tpl

@@ -22,7 +22,43 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
+
+<div id="js-product-list-top" class="bg-white">
+  <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">
+          <h2 class="text-lg font-medium text-gray-900">Filters</h2>
+          <button id="hide_filters" type="button" class="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400">
+            <span class="sr-only">Close menu</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+              </svg>
+          </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}
+
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+{*
 <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}
@@ -32,3 +68,4 @@
     {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
   {/block}
 </div>
+*}

templates/catalog/_partials/sort-orders.tpl

@@ -22,21 +22,58 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="relative flex gap-2 lg:items-center">
+
-  <div class="relative w-48 dropdown group">
+<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="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>
+      <span class="ml-6 flex items-center">
+        <!-- Expand icon, show/hide based on section open state. -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M6 9l6 6l6 -6"></path>
+        </svg>
+      </span>
+    </button>
+  </h3>
+  <!-- Filter section, show/hide based on section state. -->
+  <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 shrink-0 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+        >
+          {$sort_order.label}
+        </a>
+      {/foreach}
+    </div>
+  </div>
+</div>
+</div>
+
+
+{*
+<div class="relative flex gap-2 lg:items-center top-4 lg:top-0">
+  <div class="relative flex-1 max-w-[140px] group">
     <button
-      class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
+      class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left"
       type="button"
       rel="nofollow"
       aria-haspopup="true"
       aria-expanded="false">
       {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M6 9l6 6l6 -6"></path>
       </svg>
     </button>
-    <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
+    <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white z-10">
       {foreach from=$listing.sort_orders item=sort_order}
         <a
           rel="nofollow"
@@ -49,3 +86,4 @@
     </div>
   </div>
 </div>
+*}