wip:add overlay for filters

_dev/js/listing.js

@@ -29,6 +29,8 @@ import "velocity-animate";
 import updateSources from "./components/update-sources";
 import ProductMinitature from "./components/product-miniature";
 
+
+
 $(document).ready(() => {
   const move = (direction) => {
     const THUMB_MARGIN = 20;
@@ -219,11 +221,48 @@ $(document).ready(() => {
         data.rendered_products_header,
       );
     }
+  
+    $('#show-filters').on('click.offcanvas', () => {
+      $('#product-list-top-filters').show();
+    });
+  
+    $('#hide-filters').on('click.offcanvas', () => {
+      $('#product-list-top-filters').hide();
+      $('#overlay').hide(); 
+    });
+
+    $('#show-filters').click(function() {
+      $('#overlay').show();
+    });
+
+    $('#product-list-top-filters').show();
+  
+    function checkAndShowOverlay() {
+      if ($('#product-list-top-filters').is(':visible')) { 
+          $('#overlay').show();
+      } else { 
+          $('#overlay').hide();
+      }
+  }
+
+  $('#product-list-top-filters').show(function() {
+    checkAndShowOverlay();
+    });
+
+    $('#overlay').on('click', function() {
+      $('#product-list-top-filters').hide();
+      $('#overlay').hide();  
+     
+  });
+
+    $('.th-accordion').thaccordion();
 
     const productMinitature = new ProductMinitature();
     productMinitature.init();
   }
 
+  
+
   $("body").on(
     "change",
     `${prestashop.themeSelectors.listing.searchFilters} input[data-search-url]`,

_dev/js/theme.js

@@ -25,7 +25,7 @@
 /* eslint-disable */
 // import 'bootstrap/dist/js/bootstrap.min';
 import "jquery-modal";
-import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
+// import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
 import "tooltipster";
 import "tooltipster/dist/css/tooltipster.bundle.min.css";
 import "tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css";
@@ -99,25 +99,17 @@ $(() => {
   $('#product-list-top-filters').offcanvas({
     duration: 100,
     effect: 'slide-in-over',
-    overlay: true,
     classes: {
       element: 'absolute top-0 z-50',
     },
   });
 
   $('#show-filters').on('click.offcanvas', () => {
-    $('#product-list-top-filters').offcanvas('show');
+    $('#product-list-top-filters').show();
+    
   });
 
   $('#hide-filters').on('click.offcanvas', () => {
-    $('#product-list-top-filters').offcanvas('hide');
-  });
-
-  $('#product-list-top-filters').on('shown.offcanvas', () => {
-    $('#product-list-top-filters').show();
-  });
-
-  $('#product-list-top-filters').on('hide.offcanvas', () => {
     $('#product-list-top-filters').hide();
   });
 

templates/catalog/_partials/products-top.tpl

@@ -48,7 +48,9 @@
   </div>
 
   <!-- Off Screen Canvas Menu For Filters -->
-  <div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-64 hidden" role="dialog" aria-modal="true">
+  <div id="overlay" class="hidden" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);"></div>
+
+  <div id="product-list-top-filters" class=" fixed inset-0 flex w-64 z-10 hidden" role="dialog" aria-modal="true">
       <div class="relative mr-auto flex h-full 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>