From 60ac121ed4a53bc18bcdaa42ad2c037f0b764cd4 Mon Sep 17 00:00:00 2001
From: Alexander <53477245+a1exFindify@users.noreply.github.com>
Date: Wed, 17 Jul 2024 14:39:49 +0300
Subject: [PATCH 1/3] filters settings

---
 assets/findify-filter.css               | 18 ++++-
 assets/findify-grid.css                 | 32 +++++++++
 assets/findify-sidebar-mobile.css       | 90 +++++++++++++++++++++++--
 sections/findify-filter-group.liquid    | 51 +++++++++++++-
 sections/findify-grid-collection.liquid | 51 ++++++++++----
 sections/findify-grid-search.liquid     | 51 ++++++++++----
 snippets/findify-filters.liquid         | 19 ++++++
 snippets/findify-toolbar-desktop.liquid |  1 +
 8 files changed, 281 insertions(+), 32 deletions(-)

diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index 52af868..b1b32a4 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -129,6 +129,12 @@ button {
 }
 
 /* SECTION - HEADER & BODY EXPAND */
+.findify-search-section.filters-horizontal .findify-filters-body{
+  position: absolute;
+  z-index: 3;
+  background: #fff;
+  width: 100%;
+}
 .findify-filters-body[aria-expanded="false"] {
   display: none;
 }
@@ -151,7 +157,15 @@ button {
   width: 260px;
   position: relative;
 }
-
+.findify-filters-wrapper.absolute{
+  position: absolute;
+}
+.findify-filters-wrapper.fixed{
+  position: fixed;
+  top: 0;
+  z-index: 3;
+  background: #fff;
+}
 /* FILTERS */
 .findify-filters-container {
   display: flex;
@@ -160,6 +174,7 @@ button {
 }
 
 .findify-filter-group {
+  position: relative;
   padding-bottom: 5px;
   border-bottom: 1px solid var(--findify-filters-separator-color);
 }
@@ -378,6 +393,7 @@ button {
 
 .findify-filters-sidebar.open {
   display: flex;
+  width: 260px
 }
 
 @media (max-width: 768px) {
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
index 8b2ac21..affe559 100644
--- a/assets/findify-grid.css
+++ b/assets/findify-grid.css
@@ -1,3 +1,32 @@
+.findify-search-section.filters-right .desktop{
+  overflow: hidden;
+}
+.findify-search-section.filters-right .desktop .findify-search-header-toolbar,
+.findify-search-section.filters-right .findify-search-main{
+  flex-direction: row-reverse;
+}
+.findify-search-section.filters-right .findify-search-main {
+  flex-direction: row-reverse;
+}
+.findify-search-section.filters-horizontal .findify-search-main{
+  flex-wrap: wrap;
+}
+.findify-search-section.filters-horizontal .findify-filters-sidebar.open{
+  width: 100%;
+  flex-wrap: wrap;
+}
+.findify-search-section.filters-horizontal .findify-filters-wrapper{
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 1100px;
+}
+.findify-search-section.filters-horizontal #shopify-section-findify-filter-group{
+  min-width: 210px;
+  max-width: 210px;
+}
+
+
 .findify-initialization {
   display: flex;
   min-height: 800px;
@@ -116,6 +145,9 @@ b {
     display: none;
   }
 
+  .findify-search-section.filters-drawer .findify-search-header.mobile{
+    display: block;
+  }
   .findify-search-header.mobile {
     display: none;
   }
diff --git a/assets/findify-sidebar-mobile.css b/assets/findify-sidebar-mobile.css
index 00b7b68..a7936ee 100644
--- a/assets/findify-sidebar-mobile.css
+++ b/assets/findify-sidebar-mobile.css
@@ -1,5 +1,5 @@
 @media (min-width: 767px) {
-  #findify-modal-toggler,
+  /* #findify-modal-toggler, */
   .findify-filters-sidebar,
   .findify-modal-header,
   .findify-search-header-breadcrumb,
@@ -8,7 +8,12 @@
   }
 }
 
-@media (max-width: 768px) {
+.filters-drawer .findify-modal .findify-filters-wrapper,
+.filters-drawer .findify-modal .findify-filters-container{
+  width: 100%;
+}
+
+.findify-search-section.filters-drawer{
   .no-scroll {
     overflow: hidden;
   }
@@ -17,7 +22,7 @@
     background: #fff;
     overflow-y: scroll;
     height: 100vh;
-    width: 100%;
+    width: 30%;
     position: fixed;
     z-index: 10000;
     top: 0;
@@ -81,7 +86,84 @@
     background: #5396ed;
     color: #fff;
     text-transform: uppercase;
-    position: sticky;
+    position: absolute;
     bottom: 0;
   }
 }
+@media (max-width: 768px){
+  .no-scroll {
+    overflow: hidden;
+  }
+
+  .findify-modal {
+    background: #fff;
+    overflow-y: scroll;
+    height: 100vh;
+    width: 100% !important;
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+  }
+
+  .left {
+    left: -100%;
+  }
+
+  .right {
+    right: -100%;
+  }
+
+  .findify-modal.animated-left {
+    transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .findify-modal.animated-right {
+    transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .findify-modal.animated {
+    transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .findify-modal.open-left {
+    left: 0;
+  }
+
+  .findify-modal.open-right {
+    right: 0;
+  }
+
+  .findify-modal-header {
+    justify-content: space-between;
+    background: var(--findify-sidebar-header-background-color);
+    padding: 20px;
+    margin-bottom: 0px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--findify-text-inverse-color);
+    height: 50px;
+  }
+
+  .findify-modal-header-title {
+    position: relative;
+    left: 45%;
+  }
+
+  .findify-modal-header svg line {
+    stroke: #fff;
+  }
+
+  .findify-modal-footer {
+    padding: 20px;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    background: #5396ed;
+    color: #fff;
+    text-transform: uppercase;
+    position: absolute;
+    bottom: 0;
+  } 
+}
\ No newline at end of file
diff --git a/sections/findify-filter-group.liquid b/sections/findify-filter-group.liquid
index c691ded..6352bed 100644
--- a/sections/findify-filter-group.liquid
+++ b/sections/findify-filter-group.liquid
@@ -86,15 +86,62 @@
         const element_id = "{{ element_id }}";
         const filterGroupElement = document.getElementById(element_id);
         const [header, body] = filterGroupElement.querySelectorAll('div');
+        const isOneFilterOpen = document.querySelector('.findify-one-filter-open');
     
         const headerClickHandler = (e) => {
           e.preventDefault();
-            const isOpen = body.getAttribute("aria-expanded") === "true";
-            body.setAttribute("aria-expanded", (!isOpen).toString());
+
+          if(isOneFilterOpen){
+            const isExpanded = e.target
+              .parentNode
+              .parentNode
+              .querySelector('.findify-filters-body')?.getAttribute('aria-expanded');
+            if(isExpanded == 'false')
+              document.querySelector('#findify-filters [aria-expanded="true"]')?.setAttribute('aria-expanded', 'false'); 
+          }
+
+          const isOpen = body.getAttribute("aria-expanded") === "true";
+          body.setAttribute("aria-expanded", (!isOpen).toString());
         };
     
         header.addEventListener("click", headerClickHandler);
       };
+      
+      const filtersPosition = document.querySelector('#findify-filters').getBoundingClientRect().top;
+      const filterClass = document.querySelector('#findify-filters').className;
+      const searchWrapperTop = document.querySelector('.findify-search-container').getBoundingClientRect().x;
+      const isHorizontal = document.querySelector('.findify-search-section.filters-horizontal');
+
+      const fixedFilters = () => {
+        const scrollPosition = window.scrollY;
+        const classNames = document.querySelector('#findify-filters').className;
+        const searchWrapperHeight = document.querySelector('.findify-search-main').offsetHeight;
+        const filtersWrapperHeight = document.querySelector('#findify-filters').offsetHeight;
+        
+        if(scrollPosition >= filtersPosition && !classNames.includes('fixed')){
+          document.querySelector('#findify-filters').className = classNames?.replace('absolute', '');
+          document.querySelector('#findify-filters').style.top = `0px`;
+          document.querySelector('#findify-filters').className += ' fixed';
+        }
+
+        if(scrollPosition > (searchWrapperHeight - 50) && !isHorizontal){
+
+          document.querySelector('#findify-filters').className = filterClass;
+          document.querySelector('#findify-filters').className += ' absolute';
+          document.querySelector('#findify-filters').style.top = `${searchWrapperHeight - filtersWrapperHeight}px`;
+        }
+
+        if( (scrollPosition - 80) < searchWrapperTop) 
+          document.querySelector('#findify-filters').className = classNames.replace('fixed', '');
+      }
+    
+      const isSticky = document.querySelector('.findify-filters-sticky');
+      if(isSticky) {
+        window.addEventListener('scroll', fixedFilters);
+        document.querySelectorAll('#shopify-section-findify-filter-group').forEach( item => {
+          item.addEventListener('click', fixedFilters);
+        })
+      }
 
       collapseFilter();
   </script>
diff --git a/sections/findify-grid-collection.liquid b/sections/findify-grid-collection.liquid
index 818168b..848b0e4 100644
--- a/sections/findify-grid-collection.liquid
+++ b/sections/findify-grid-collection.liquid
@@ -3,19 +3,40 @@
 {% include 'findify-grid-connector' %}
 {% assign findify_filters_component_id = 'findify-filters-sidebar' %}
 
-<div id="findify-search" class="findify-search-section">
+{%- assign desktop_filter_layout = query_parameters | split: 'desktop_filter_layout:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign desktop_filter_position = query_parameters | split: 'desktop_filter_position:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign one_open_filter = query_parameters | split: 'one_open_filter:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign all_filters_hidden = query_parameters | split: 'all_filters_hidden:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign all_filters_collapsed = query_parameters | split: 'all_filters_collapsed:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign sticky_filters = query_parameters | split: 'sticky_filters:' | last | split: '|' | first | split: '&' | first -%}
+
+<div 
+  id="findify-search" 
+  class="
+    findify-search-section
+    {% if desktop_filter_layout != 'drawer' and sticky_filters == "true" %} findify-filters-sticky {% endif %}
+    {% if one_open_filter == "true" %} findify-one-filter-open {% endif %}
+    {% if all_filters_collapsed == "true" %} findify-filter-collapsed {% endif %}
+    {% if all_filters_hidden == "true" %} findify-filter-hidden {% endif %}
+    {% if desktop_filter_layout != 'horizontal' %}filters-{{ desktop_filter_position }} {% endif %}
+    {% if disable_search_input == 'true' %} findify-filters-disable_search_input {% endif %}
+    filters-{{ desktop_filter_layout }}
+  "
+>
   <div class="findify-search-container">
-    {% render 'findify-toolbar-desktop'
-      , results_count: products_count
-      , is_collection: true
-      , terms: terms
-      , sort_options: sort_options
-      , default_sort_by: default_sort_by
-      , sort_by: sort_by
-      , active_filters: active_filters
-      , color_layout: color_layout
-      , filter_component_id: findify_filters_component_id
-    %}
+    {% if desktop_filter_layout != 'drawer' %}
+      {% render 'findify-toolbar-desktop'
+        , results_count: products_count
+        , is_collection: true
+        , terms: terms
+        , sort_options: sort_options
+        , default_sort_by: default_sort_by
+        , sort_by: sort_by
+        , active_filters: active_filters
+        , color_layout: color_layout
+        , filter_component_id: findify_filters_component_id
+      %}
+    {% endif %}
     {% render 'findify-toolbar-mobile'
       , results_count: products_count
       , is_collection: true
@@ -35,7 +56,11 @@
         {% render 'findify-filters'
           , component_id: findify_filters_component_id,
           , active_filters: active_filters
-          , color_layout: color_layout %}
+          , color_layout: color_layout 
+          , one_open_filter: one_open_filter
+          , all_filters_collapsed: all_filters_collapsed
+          , all_filters_hidden: all_filters_hidden
+        %}
 
         <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
index b4c5f9d..7a6d1e2 100644
--- a/sections/findify-grid-search.liquid
+++ b/sections/findify-grid-search.liquid
@@ -6,6 +6,14 @@
 {%- assign desktop_slide_per_view = query_parameters | split: 'desktop_slide_per_view:' | last | split: '|' | first | split: '&' | first -%}
 {%- assign recommendation_title = query_parameters | split: 'recommendation_title:' | last | split: '&' | first -%}{% include 'findify-grid-connector' %}
 
+{%- assign desktop_filter_layout = query_parameters | split: 'desktop_filter_layout:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign desktop_filter_position = query_parameters | split: 'desktop_filter_position:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign one_open_filter = query_parameters | split: 'one_open_filter:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign all_filters_hidden = query_parameters | split: 'all_filters_hidden:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign all_filters_collapsed = query_parameters | split: 'all_filters_collapsed:' | last | split: '|' | first | split: '&' | first -%}
+{%- assign sticky_filters = query_parameters | split: 'sticky_filters:' | last | split: '|' | first | split: '&' | first -%}
+
+
 {%  comment  %} Content integration configuration {% endcomment %}
 {%- assign use_content_integration = query_parameters | split: 'use_content_integration:' | last | split: '&' | first -%}
 {% if use_content_integration == 'false' or tabs[0] == 'none' %}
@@ -14,7 +22,20 @@
   {%- assign show_content_integration = true -%}
 {% endif %}
 {% assign findify_filters_component_id = 'findify-filters-sidebar' %}
-<div id="findify-search" class="findify-search-section">
+
+<div 
+  id="findify-search" 
+  class="
+    findify-search-section 
+  {% if desktop_filter_layout != 'drawer' and sticky_filters == "true" %} findify-filters-sticky {% endif %}
+  {% if one_open_filter == "true" %} findify-one-filter-open {% endif %}
+  {% if all_filters_collapsed == "true" %} findify-filter-collapsed {% endif %}
+  {% if all_filters_hidden == "true" %} findify-filter-hidden {% endif %}
+  {% if desktop_filter_layout != 'horizontal' %}filters-{{ desktop_filter_position }} {% endif %}
+  {% if disable_search_input == 'true' %} findify-filters-disable_search_input {% endif %}
+  disable_search_input
+  filters-{{ desktop_filter_layout }}"
+>
   {% if results_count > 0 %}
     <h1 class="findify-heading">{{ 'findify.search.search_results' | t }}</h1>
     {% if show_content_integration %}
@@ -28,16 +49,18 @@
     {% endif %}
 
     <div class="findify-search-container">
-      {% render 'findify-toolbar-desktop'
-        , results_count: results_count
-        , terms: terms
-        , sort_options: sort_options
-        , default_sort_by: default_sort_by
-        , sort_by: sort_by
-        , active_filters: active_filters
-        , color_layout: color_layout
-        , filter_component_id: findify_filters_component_id
-      %}
+      {% if desktop_filter_layout != 'drawer' %}
+        {% render 'findify-toolbar-desktop'
+          , results_count: results_count
+          , terms: terms
+          , sort_options: sort_options
+          , default_sort_by: default_sort_by
+          , sort_by: sort_by
+          , active_filters: active_filters
+          , color_layout: color_layout
+          , filter_component_id: findify_filters_component_id
+        %}
+      {% endif %}
       {% render 'findify-toolbar-mobile'
         , results_count: results_count
         , terms: terms
@@ -56,7 +79,11 @@
         {% render 'findify-filters'
           , component_id: findify_filters_component_id,
           , active_filters: active_filters
-          , color_layout: color_layout %}
+          , color_layout: color_layout 
+          , one_open_filter: one_open_filter
+          , all_filters_collapsed: all_filters_collapsed
+          , all_filters_hidden: all_filters_hidden
+        %}
         <!-- product grid section! -->
         <div class="findify-products-section">
           {% if use_lazy_loading_pagination == 'true' %}
diff --git a/snippets/findify-filters.liquid b/snippets/findify-filters.liquid
index 66f9740..0c24d41 100644
--- a/snippets/findify-filters.liquid
+++ b/snippets/findify-filters.liquid
@@ -37,6 +37,25 @@
         const component_id = "{{ component_id }}"
         const findify_filters_component_id = "{{ findify_filters_component_id }}";
         const openClass = 'open-left';
+        //changes
+        const isFiltersHidden = {{ all_filters_hidden }};
+        const isAllFiltersCollapsed= {{ all_filters_collapsed }};
+        const isOneFilterOpen = {{ one_open_filter }};
+        const sidebarClass = document.querySelector('.findify-filters-sidebar').className;
+
+        if(isFiltersHidden) 
+          document.querySelector('.findify-filters-sidebar').className = sidebarClass.replace('open', '');
+      
+        if(isAllFiltersCollapsed)
+          document.querySelectorAll('.findify-filters-body').forEach(item => {
+            item.setAttribute('aria-expanded', 'false');
+          })
+        
+        if(isOneFilterOpen)
+          document.querySelectorAll('.findify-filters-body').forEach((item, index) => {
+            if(index > 0) item.setAttribute('aria-expanded', 'false');
+          })
+        //end
 
         const toggleFilterSection = () => {
           if(findify.utils?.isMobile()){
diff --git a/snippets/findify-toolbar-desktop.liquid b/snippets/findify-toolbar-desktop.liquid
index d735cb2..45504d7 100644
--- a/snippets/findify-toolbar-desktop.liquid
+++ b/snippets/findify-toolbar-desktop.liquid
@@ -60,6 +60,7 @@
     }
 
     const filterToggleSidebarElement = document.getElementById(filter_toggle_sidebar_element_id);
+    //changes comment to disable toggling
     filterToggleSidebarElement?.addEventListener('click', toggleFilterSection)
   }
   filterSidebar();

From daace6f2c64e2527ffbc714fd4585760abf6f9fa Mon Sep 17 00:00:00 2001
From: Alexander <53477245+a1exFindify@users.noreply.github.com>
Date: Fri, 19 Jul 2024 14:47:36 +0300
Subject: [PATCH 2/3] minor updates

---
 assets/findify-filter.css |  4 ++++
 assets/findify-grid.css   | 34 ++++++++++++++++++----------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index b1b32a4..38085a5 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -1,3 +1,7 @@
+
+.findify-search-section.disable_search_input .findify-filters--checkbox-search{
+  display: none;
+}
 .findify-filters--range-container {
   display: flex;
   margin-top: 10px;
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
index affe559..4d72c83 100644
--- a/assets/findify-grid.css
+++ b/assets/findify-grid.css
@@ -8,22 +8,24 @@
 .findify-search-section.filters-right .findify-search-main {
   flex-direction: row-reverse;
 }
-.findify-search-section.filters-horizontal .findify-search-main{
-  flex-wrap: wrap;
-}
-.findify-search-section.filters-horizontal .findify-filters-sidebar.open{
-  width: 100%;
-  flex-wrap: wrap;
-}
-.findify-search-section.filters-horizontal .findify-filters-wrapper{
-  width: 100%;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-width: 1100px;
-}
-.findify-search-section.filters-horizontal #shopify-section-findify-filter-group{
-  min-width: 210px;
-  max-width: 210px;
+@media (min-width: 768px) {
+  .findify-search-section.filters-horizontal .findify-search-main{
+    flex-wrap: wrap;
+  }
+  .findify-search-section.filters-horizontal .findify-filters-sidebar.open{
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .findify-search-section.filters-horizontal .findify-filters-wrapper{
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 1100px;
+  }
+  .findify-search-section.filters-horizontal #shopify-section-findify-filter-group{
+    min-width: 210px;
+    max-width: 210px;
+  }
 }
 
 

From 48f05e2f7c01521632e3f76093e968e88ff046a1 Mon Sep 17 00:00:00 2001
From: Alexander <53477245+a1exFindify@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:07:16 +0300
Subject: [PATCH 3/3] desktop drawer update

---
 snippets/findify-filters.liquid | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/snippets/findify-filters.liquid b/snippets/findify-filters.liquid
index 0c24d41..9a4e296 100644
--- a/snippets/findify-filters.liquid
+++ b/snippets/findify-filters.liquid
@@ -58,7 +58,8 @@
         //end
 
         const toggleFilterSection = () => {
-          if(findify.utils?.isMobile()){
+          const isDrawerDesktop = document.querySelector('.findify-search-section.filters-drawer');
+          if(findify.utils?.isMobile() || isDrawerDesktop){
             findify.grid?.load();
           }
           const containerElement = document.getElementById(component_id);