From 2c937230bf2b08f9aded56bc29d58be3566ad2bb Mon Sep 17 00:00:00 2001
From: Tejas Chari <tejasc@consultbop.com>
Date: Wed, 8 Nov 2023 13:22:53 +0530
Subject: [PATCH] chore: updated the template files to add the accordion

---
 templates/catalog/_partials/facets.tpl       |  9 +++++----
 templates/catalog/_partials/products-top.tpl |  9 +++++----
 templates/catalog/_partials/sort-orders.tpl  | 12 +++++++-----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl
index c414b71..337d1a0 100644
--- a/templates/catalog/_partials/facets.tpl
+++ b/templates/catalog/_partials/facets.tpl
@@ -24,7 +24,7 @@
  *}
 {if $facets|count}
   <div id="search_filters">
-    <div id="search_filter_buttons" class="flex">
+    <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">
@@ -44,15 +44,16 @@
         {/if}
       {/block}
     </div>
+    <div class="th-accordion">
     {foreach from=$facets item="facet"}
       {if !$facet.displayed}
         {continue}
       {/if}
       {if $facet.widgetType === 'dropdown'}
-        <div class="border-t border-gray-200 px-4 py-4">
+        <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="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">
+            <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"}
@@ -75,7 +76,7 @@
             </button>
           </h3>
           <!-- Filter section, show/hide based on section state. -->
-          <div class="pt-6 px-4 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
+          <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}
diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl
index e301e5b..b55d513 100644
--- a/templates/catalog/_partials/products-top.tpl
+++ b/templates/catalog/_partials/products-top.tpl
@@ -24,7 +24,7 @@
  *}
 
 <div id="js-product-list-top" class="bg-white">
-  <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+  <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">
@@ -39,14 +39,15 @@
           </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}
-          {block name='sort_by'}
-            {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
-          {/block}
+
         </form>
       </div>
     </div>
diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl
index f8b44f8..f300fe8 100644
--- a/templates/catalog/_partials/sort-orders.tpl
+++ b/templates/catalog/_partials/sort-orders.tpl
@@ -23,10 +23,11 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div class="border-t border-gray-200 px-4 py-4">
+<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="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">
+    <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>
@@ -40,13 +41,13 @@
     </button>
   </h3>
   <!-- Filter section, show/hide based on section state. -->
-  <div class="pt-6 hidden" id="filter-section-sort-by">
-    <div class="flex flex-wrap w-full">
+  <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 w-1/4 mb-4 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+          class="select-list text-sm shrink-0 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
         >
           {$sort_order.label}
         </a>
@@ -54,6 +55,7 @@
     </div>
   </div>
 </div>
+</div>
 
 
 {*