Merge pull request #67 from findify/bug/FI-7730-liquid-sidebar-reload…

…s-when-the-filter-selects closing sidebar after select filters was fixed
findify · May 16, 2024 · 60d51f3 · 60d51f3
2 parents b6b435a + 84e4fd3
commit 60d51f3
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 49 deletions.
diff --git a/sections/findify-grid-collection.liquid b/sections/findify-grid-collection.liquid
@@ -2,8 +2,6 @@
 {%- assign query_parameters = page_url | split: 'sections=findify-grid-collection&' | last -%}
 {% include 'findify-grid-connector' %}
 
-{% assign findify_filters_component_id = 'findify-filters-sidebar' %}
-
 <div id="findify-search" class="findify-search-section">
   <div class="findify-search-container">
     {% render 'findify-toolbar-desktop'
@@ -33,12 +31,10 @@
           {% render 'findify-loader' %}
         </div>
 
-        <aside id="{{ findify_filters_component_id }}" class="findify-filters-sidebar open">
-          {% render 'findify-filters'
-            , component_id: findify_filters_component_id,
-            , active_filters: active_filters
-            , color_layout: color_layout %}
-        </aside>
+        {% render 'findify-filters'
+          , component_id: findify_filters_component_id,
+          , active_filters: active_filters
+          , color_layout: color_layout %}
 
         <div class="findify-products-section">
           {% if use_lazy_loading_pagination == 'true' %}

diff --git a/sections/findify-grid-search.liquid b/sections/findify-grid-search.liquid
@@ -14,8 +14,6 @@
   {%- assign show_content_integration = true -%}
 {% endif %}
 
-{% assign findify_filters_component_id = 'findify-filters-sidebar' %}
-
 <div id="findify-search" class="findify-search-section">
   {% if results_count > 0 %}
     <h1 class="findify-heading">{{ 'findify.search.search_results' | t }}</h1>
@@ -55,12 +53,10 @@
           {% render 'findify-loader' %}
         </div>
 
-        <aside id="findify-filters-sidebar" class="findify-filters-sidebar open">
-          {% render 'findify-filters'
-            , component_id: findify_filters_component_id,
-            , active_filters: active_filters
-            , color_layout: color_layout %}
-        </aside>
+        {% render 'findify-filters'
+          , component_id: findify_filters_component_id,
+          , active_filters: active_filters
+          , color_layout: color_layout %}
         <!-- product grid section! -->
         <div class="findify-products-section">
           {% if use_lazy_loading_pagination == 'true' %}

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
@@ -107,14 +107,10 @@
 <script>
     const removeAllFilters = () => {
         const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-        const sidebar_component_id = "{{ sidebar_component_id }}"
         const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
 
         const openClass = 'open-left';
         const breacrumbClearAllClickHandler =  () => {
-          const containerElement = document.getElementById(sidebar_component_id);
-          containerElement.classList.remove(openClass);
-          document.documentElement.classList.remove("no-scroll");
           findify.filters.reset();
         }
 

diff --git a/snippets/findify-filter-checkbox.liquid b/snippets/findify-filter-checkbox.liquid
@@ -45,11 +45,6 @@
     const filterClickHandler = (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const openClass = 'open-left';
-      const containerElement = document.getElementById(
-        'findify-filters-sidebar',
-      );
-      containerElement?.classList.remove(openClass);
       document.documentElement.classList.remove('no-scroll');
       if (name === 'price') {
         const rate = findify.utils.getShopifyCurrencyRate();

diff --git a/snippets/findify-filters.liquid b/snippets/findify-filters.liquid
@@ -3,29 +3,31 @@
   assign close_filters_element_id = 'close-btn'
   assign see_results_element_id = 'see-results-btn'
 %}
+<aside id="{{ findify_filters_component_id }}" class="findify-filters-sidebar open">
+  <div class="findify-filters-container">
+    <button id="{{ close_filters_element_id }}" class="findify-modal-header">
+      <span class="findify-modal-header-title">{{ 'findify.filters.filters_btn' | t }}</span>
+      {% render 'findify-icon-cross' %}
+    </button>
+    {% if active_filters != 'none' %}
+      <div class="findify-search-header-breadcrumb">
+        {% render 'findify-filter-breadcrumb'
+          , active_filters: active_filters
+          , color_layout: color_layout
+          , component_id: 'sidebar'
+          , sidebar_component_id: component_id
+          , show_all: true %}
+      </div>
+    {% endif %}
+    <div id="findify-filters" class="findify-filters-wrapper modal-filters-wrapper">
+      {% comment %}
+        This element #findify-filters will be replaced with rendered html from sections/findify-filters
+      {% endcomment %}
 
-<div class="findify-filters-container">
-  <button id="{{ close_filters_element_id }}" class="findify-modal-header">
-    <span class="findify-modal-header-title">{{ 'findify.filters.filters_btn' | t }}</span>
-    {% render 'findify-icon-cross' %}
-  </button>
-  {% if active_filters != 'none' %}
-    <div class="findify-search-header-breadcrumb">
-      {% render 'findify-filter-breadcrumb'
-        , active_filters: active_filters
-        , color_layout: color_layout
-        , component_id: 'sidebar'
-        , sidebar_component_id: component_id
-        , show_all: true %}
     </div>
-  {% endif %}
-  <div id="findify-filters" class="findify-filters-wrapper modal-filters-wrapper">
-    {% comment %}
-      This element #findify-filters will be replaced with rendered html from sections/findify-filters
-    {% endcomment %}
+    <button id="{{ see_results_element_id }}" class="findify-modal-footer">See results</button>
   </div>
-  <button id="{{ see_results_element_id }}" class="findify-modal-footer">See results</button>
-</div>
+</aside>
 
 <script>
     const filterSection = () => {
@@ -35,9 +37,12 @@
         const openClass = 'open-left';
 
         const toggleFilterSection = () => {
-            const containerElement = document.getElementById(component_id);
-            containerElement.classList.toggle(openClass);
-            document.documentElement.classList.toggle("no-scroll");
+          if(findify.utils?.isMobile()){
+            findify.grid?.load();
+          }
+          const containerElement = document.getElementById(component_id);
+          containerElement.classList.toggle(openClass);
+          document.documentElement.classList.toggle("no-scroll");
         }
         
         const closeFiltersElement = document.getElementById(close_filters_element_id);

diff --git a/snippets/findify-head-injector.liquid b/snippets/findify-head-injector.liquid
@@ -20,7 +20,7 @@
 
 <script>
   window.findify = {
-    current_version: "2024-05.02", // DO NOT MODIFY! This is required within Shopify App Side, a Regex will extract the current version.
+    current_version: "2024-05.03", // DO NOT MODIFY! This is required within Shopify App Side, a Regex will extract the current version.
     product_fields: {
         include: [], // Include, also, these fields to be returned to liquid section
         exclude: [], // Exclude these fields from being sent to liquid section