Merge pull request #89 from findify/filters-options

filters settings

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;
@@ -129,6 +133,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 +161,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 +178,7 @@ button {
 }
 
 .findify-filter-group {
+  position: relative;
   padding-bottom: 5px;
   border-bottom: 1px solid var(--findify-filters-separator-color);
 }
@@ -378,6 +397,7 @@ button {
 
 .findify-filters-sidebar.open {
   display: flex;
+  width: 260px
 }
 
 @media (max-width: 768px) {

assets/findify-grid.css

@@ -1,3 +1,34 @@
+.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;
+}
+@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;
+  }
+}
+
+
 .findify-initialization {
   display: flex;
   min-height: 800px;
@@ -116,6 +147,9 @@ b {
     display: none;
   }
 
+  .findify-search-section.filters-drawer .findify-search-header.mobile{
+    display: block;
+  }
   .findify-search-header.mobile {
     display: none;
   }

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;
+  } 
+}

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>

sections/findify-grid-collection.liquid

@@ -4,9 +4,29 @@
 {% 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'
+    {% if desktop_filter_layout != 'drawer' %}
+      {% render 'findify-toolbar-desktop'
       , results_count: products_count
       , is_collection: true
       , terms: terms
@@ -19,6 +39,7 @@
       , color_layout: color_layout
       , filter_component_id: findify_filters_component_id
     %}
+    {% endif %}
     {% render 'findify-toolbar-mobile'
       , results_count: products_count
       , is_collection: true
@@ -40,7 +61,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' %}

sections/findify-grid-search.liquid

@@ -7,6 +7,14 @@
 {%- assign mobile_slide_per_view = query_parameters | split: 'mobile_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' %}
@@ -25,7 +33,20 @@
 -%}
 
 {% 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 %}
@@ -39,7 +60,8 @@
     {% endif %}
 
     <div class="findify-search-container">
-      {% render 'findify-toolbar-desktop'
+      {% if desktop_filter_layout != 'drawer' %}
+        {% render 'findify-toolbar-desktop'
         , results_count: results_count
         , terms: terms
         , corrected_q: corrected_q
@@ -71,7 +93,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' %}