From 3cd759b24791cd94a27d34bf8dfd450bfb76111b Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Wed, 11 Sep 2024 14:06:54 +0300
Subject: [PATCH 01/16] updated hidden to findify-hidden

---
 assets/findify-autocomplete.css           |   8 +-
 assets/findify-autocomplete.js            |   6 +-
 assets/findify-grid.css                   |   2 +-
 assets/findify-lazy-loading-pagination.js |   2 +-
 sections/findify-autocomplete.liquid      | 134 +++++++++++-----------
 snippets/findify-button.liquid            |   7 +-
 6 files changed, 83 insertions(+), 76 deletions(-)

diff --git a/assets/findify-autocomplete.css b/assets/findify-autocomplete.css
index 51011ce..e16b7fe 100644
--- a/assets/findify-autocomplete.css
+++ b/assets/findify-autocomplete.css
@@ -23,7 +23,7 @@ body {
 .findify-autocomplete .findify-zero-result-container{
   text-align: center;
 }
-.findify-autocomplete.hidden {
+.findify-autocomplete.findify-hidden {
   display: none !important;
 }
 
@@ -373,7 +373,7 @@ body {
 
 /* slide-in */
 .findify-autocomplete.findify-autocomplete-slide-in,
-.findify-autocomplete.findify-autocomplete-slide-in.hidden {
+.findify-autocomplete.findify-autocomplete-slide-in.findify-hidden {
   right: -100%;
   display: block !important;
   opacity: 0;
@@ -391,7 +391,7 @@ body {
 }
 
 .findify-autocomplete.findify-autocomplete-slide-in,
-.findify-autocomplete.findify-autocomplete-slide-in.hidden.animation {
+.findify-autocomplete.findify-autocomplete-slide-in.findify-hidden.animation {
   display: block !important;
   width: 35%;
   right: 0;
@@ -463,7 +463,7 @@ body {
 @media (max-width: 768px) {
   /* slide-in */
   .findify-autocomplete.findify-autocomplete-slide-in,
-  .findify-autocomplete.findify-autocomplete-slide-in.hidden.animation {
+  .findify-autocomplete.findify-autocomplete-slide-in.findify-hidden.animation {
     width: 100%;
   }
 
diff --git a/assets/findify-autocomplete.js b/assets/findify-autocomplete.js
index 7d412a8..c4c6eaa 100644
--- a/assets/findify-autocomplete.js
+++ b/assets/findify-autocomplete.js
@@ -102,9 +102,9 @@ const initFindifyAutocompleteEvents = () => {
       isEscape ||
       !document
         .querySelector('.findify-autocomplete')
-        .className.includes('hidden')
+        .className.includes('findify-hidden')
     ) {
-      document.querySelector('.findify-autocomplete').className += ' hidden';
+      document.querySelector('.findify-autocomplete').className += ' findify-hidden';
       activeInput?.parentNode?.querySelector('button[type="submit"]')?.focus();
     }
     document.removeEventListener(`keydown`, initTrapFocus);
@@ -152,7 +152,7 @@ const initFindifyAutocompleteEvents = () => {
       '.findify-autocomplete'
     ).className;
     document.querySelector('.findify-autocomplete').className =
-      autocompleteClassName.replace(' hidden', '');
+      autocompleteClassName.replace(' findify-hidden', '');
     document
       .querySelector('.findify-close-autocomplete')
       ?.addEventListener('click', (e) => closeAutocomplete(e));
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
index 4d72c83..60f3a0f 100644
--- a/assets/findify-grid.css
+++ b/assets/findify-grid.css
@@ -138,7 +138,7 @@ b {
   color: var(--findify-text-color);
 }
 
-.hidden {
+.findify-hidden {
   display: none !important;
 }
 
diff --git a/assets/findify-lazy-loading-pagination.js b/assets/findify-lazy-loading-pagination.js
index 4a7bd9a..92df53e 100644
--- a/assets/findify-lazy-loading-pagination.js
+++ b/assets/findify-lazy-loading-pagination.js
@@ -78,7 +78,7 @@ const initFindifyLazyLoadingPagination = (
     }
     if (showLoadMoreButton) {
       const nextBtnElement = document.getElementById(selectors.nextBtn);
-      nextBtnElement.classList.toggle('hidden');
+      nextBtnElement.classList.toggle('findify-hidden');
     }
   };
 
diff --git a/sections/findify-autocomplete.liquid b/sections/findify-autocomplete.liquid
index 140b0c2..e2bc2fb 100644
--- a/sections/findify-autocomplete.liquid
+++ b/sections/findify-autocomplete.liquid
@@ -12,79 +12,81 @@
 
 <div
   id="findify-autocomplete"
-  class="findify-autocomplete findify-autocomplete-fullscreen hidden {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}"
+  class="findify-autocomplete findify-autocomplete-fullscreen findify-hidden {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}"
 >
-{% if results_count == "0" %}
-  <div class="findify-zero-result-container">
-    <h1>
-      {{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"
-    </h1>
-    <h2>{{ 'findify.search.no_results_message' | t }}</h2>
-  </div>
-{% else %}
-  <div class="findify-autocomplete-content">
-    <div class="
-      suggestions-wrapper 
-      {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}
-      mobile-{{ mobile_suggestion_template }}
-    ">
-      <h2>{{ suggestionsTitle }}</h2>
-      <ul>
-        {% for suggestion in suggestions %}
-          {%- assign queryHTML = '<span>'
-            | append: query
-            | append: '</span>'
-          -%}
-          {%- assign formattedSuggestion = suggestion
-            | replace: query, queryHTML
-          -%}
-          <li class="{% if query != "" %} findify-suggestion-item {% endif %}">
-            <a
-              class="findify-suggestion"
-              href="/{{ basepath }}?q={{ suggestion }}"
-              data-findify-suggestion
-            >
-              {{ formattedSuggestion |  url_decode }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-
-      {% render 'findify-autocomplete-content-block',
-        contents_param: contents_param,
-        content: contents[0]
-      %}
+  {% if results_count == '0' %}
+    <div class="findify-zero-result-container">
+      <h1>
+        {{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"
+      </h1>
+      <h2>{{ 'findify.search.no_results_message' | t }}</h2>
     </div>
+  {% else %}
+    <div class="findify-autocomplete-content">
+      <div
+        class="
+          suggestions-wrapper
+          {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}
+          mobile-{{ mobile_suggestion_template }}
+        "
+      >
+        <h2>{{ suggestionsTitle }}</h2>
+        <ul>
+          {% for suggestion in suggestions %}
+            {%- assign queryHTML = '<span>'
+              | append: query
+              | append: '</span>'
+            -%}
+            {%- assign formattedSuggestion = suggestion
+              | replace: query, queryHTML
+            -%}
+            <li class="{% if query != "" %} findify-suggestion-item {% endif %}">
+              <a
+                class="findify-suggestion"
+                href="/{{ basepath }}?q={{ suggestion }}"
+                data-findify-suggestion
+              >
+                {{ formattedSuggestion | url_decode }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
 
-    <div class="products-wrapper">
-      <div class="findify-autocomplete-title-wrapper">
-        <h2>{{ productsTitle }}</h2>
-        {% render 'findify-autocomplete-view-all',
-          basepath: basepath,
-          query: query,
-          position: 'top'
+        {% render 'findify-autocomplete-content-block',
+          contents_param: contents_param,
+          content: contents[0]
         %}
       </div>
-      <div 
-        id="findify-autocomplete-products" 
-        class="products-container mobile-products-per-row-{{ mobile_products_per_row }}"
-      />
-      <button class="findify-close-autocomplete">
-        {% render 'findify-icon-cross' %}
-      </button>
-    </div>
 
-    {% render 'findify-autocomplete-content-block',
-      contents_param: contents_param,
-      content: contents[1]
+      <div class="products-wrapper">
+        <div class="findify-autocomplete-title-wrapper">
+          <h2>{{ productsTitle }}</h2>
+          {% render 'findify-autocomplete-view-all',
+            basepath: basepath,
+            query: query,
+            position: 'top'
+          %}
+        </div>
+        <div
+          id="findify-autocomplete-products"
+          class="products-container mobile-products-per-row-{{ mobile_products_per_row }}"
+        />
+        <button class="findify-close-autocomplete">
+          {% render 'findify-icon-cross' %}
+        </button>
+      </div>
+
+      {% render 'findify-autocomplete-content-block',
+        contents_param: contents_param,
+        content: contents[1]
+      %}
+    </div>
+    {% render 'findify-autocomplete-view-all',
+      basepath: basepath,
+      query: query,
+      position: 'bottom'
     %}
-  </div>
-  {% render 'findify-autocomplete-view-all',
-    basepath: basepath,
-    query: query,
-    position: 'bottom'
-  %}
-{% endif %}
+  {% endif %}
 
   <script>
     /* IMPORTANT: Script tags are executed within this file element. */
diff --git a/snippets/findify-button.liquid b/snippets/findify-button.liquid
index 0c76f31..6fdd0ed 100644
--- a/snippets/findify-button.liquid
+++ b/snippets/findify-button.liquid
@@ -1 +1,6 @@
-<button id="{{ id }}" class="findify-btn {% if hide %}hidden{% endif %}">{{ text | t }}</button>
\ No newline at end of file
+<button
+  id="{{ id }}"
+  class="findify-btn {% if hide %}findify-hidden{% endif %}"
+>
+  {{ text | t }}
+</button>

From 05ed44cbd0532fa8d2aab6e05e90621aacac9dc5 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Wed, 11 Sep 2024 17:00:55 +0300
Subject: [PATCH 02/16] formatted

---
 snippets/findify-filter-breadcrumb.liquid | 178 +++++++++++-----------
 1 file changed, 91 insertions(+), 87 deletions(-)

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index 8ee3374..dd1ad8f 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -1,6 +1,6 @@
 {% assign breadcrumb_container_element_id = 'breadcrumb-container-' | append: component_id | replace: ' ', '' %}
 <div id="{{ breadcrumb_container_element_id }}" class="findify-filters-breadcrumbs-body">
-  {%- assign filters = active_filters | split: ";" -%}
+  {%- assign filters = active_filters | split: ';' -%}
   {% for filter in filters %}
     {% liquid
       assign parts = filter | split: '~'
@@ -38,7 +38,8 @@
       selected="true"
       type="{{type}}"
       name="{{name}}"
-      value="{{value}}">
+      value="{{value}}"
+    >
       {% case type %}
         {% when 'range' %}
           {% case name %}
@@ -52,9 +53,15 @@
                 endif
               %}
               {% if fromDisplay == 'undefined' %}
-                <span>{{ 'findify.filters.under' | t }} {{ toDisplay }}</span>
+                <span>
+                  {{- 'findify.filters.under' | t }}
+                  {{ toDisplay -}}
+                </span>
               {% elsif toDisplay == 'undefined' %}
-                <span>{{ fromDisplay }} {{ 'findify.filters.and_up' | t }}</span>
+                <span>
+                  {{- fromDisplay }}
+                  {{ 'findify.filters.and_up' | t -}}
+                </span>
               {% else %}
                 {{ fromDisplay }} - {{ toDisplay }}
               {% endif %}
@@ -63,8 +70,7 @@
           {% case name %}
             {% when 'color' %}
               {% case color_layout %}
-                {% when 'color'
-                  , 'color_with_label' %}
+                {% when 'color', 'color_with_label' %}
                   <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
                   {% if color_layout == 'color_with_label' %}
                     {{ value }}
@@ -79,27 +85,26 @@
           {% endcase %}
       {% endcase %}
       <div class="findify-filters-breadcrumb-close">
-        {% render 'findify-icon-cross'
-          , size: 8 %}
+        {% render 'findify-icon-cross', size: 8 %}
       </div>
     </div>
     <script>
       const removeFilter = () => {
-          const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
-
-          const name = "{{ name }}";
-          const type = "{{ type }}";
-          const value = "{{ value }}";
-
-          const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
-          
-          const breadcrumbElement = document.getElementById(breadcrumb_element_id);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener("keydown", (e) => {
-            if (e.key === 'Enter') breadcrumbClickHandler()
-          });
-      }
+        const breadcrumb_element_id = '{{ breadcrumb_element_id }}';
+
+        const name = '{{ name }}';
+        const type = '{{ type }}';
+        const value = '{{ value }}';
+
+        const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
+
+        const breadcrumbElement = document.getElementById(breadcrumb_element_id);
+        breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+        breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+        breadcrumbElement.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') breadcrumbClickHandler();
+        });
+      };
       removeFilter();
     </script>
   {% endfor %}
@@ -108,8 +113,7 @@
   <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
     <small></small>
     <div class="findify-filters-breadcrumb-close">
-      {% render 'findify-icon-arrow'
-        , size: 8 %}
+      {% render 'findify-icon-arrow', size: 8 %}
     </div>
   </div>
   {% assign breadcrumb_clear_all_element_id = 'breadcrumb-clear-all-' | append: component_id %}
@@ -117,78 +121,78 @@
     tabindex="0"
     id="{{ breadcrumb_clear_all_element_id }}"
     class="findify-filters-breadcrumbs-clear-all"
-    selected="true">
+    selected="true"
+  >
     <muted>{{ 'findify.filters.clear_all' | t }}</muted>
   </div>
 </div>
 
 <script>
-    const removeAllFilters = () => {
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-        const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
+  const removeAllFilters = () => {
+    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
+    const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
 
-        const openClass = 'open-left';
-        const breacrumbClearAllClickHandler =  () => {
-          findify.filters.reset();
-        }
+    const openClass = 'open-left';
+    const breacrumbClearAllClickHandler = () => {
+      findify.filters.reset();
+    };
 
-        breadcrumbClearAllElement.addEventListener("click", breacrumbClearAllClickHandler);
-        breadcrumbClearAllElement.addEventListener("keydown", (e) => {
-          if(e.key === 'Enter') breacrumbClearAllClickHandler();
-        });
+    breadcrumbClearAllElement.addEventListener('click', breacrumbClearAllClickHandler);
+    breadcrumbClearAllElement.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') breacrumbClearAllClickHandler();
+    });
+  };
+  removeAllFilters();
+
+  const showMore = () => {
+    const show_all = '{{ show_all }}' === 'true';
+    if (show_all) return;
+
+    const breadcrumb_container_element_id = '{{ breadcrumb_container_element_id }}';
+    const breadcrumb_show_more_element_id = '{{ breadcrumb_show_more_element_id }}';
+    const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
+    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
+
+    const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
+    if (!breadcrumbsContainer) return;
+    const showMore = document.getElementById(breadcrumb_show_more_element_id);
+
+    const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
+    const gap = 15;
+    const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
+
+    let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
+    const containerWidth = breadcrumbsContainer.offsetWidth;
+    const hiddenBreadcrumbs = [];
+
+    for (const breadcrumb of breadcrumbs) {
+      const breadcrumbWidth = breadcrumb.offsetWidth;
+      totalBreadcrumbsWidth += breadcrumbWidth + gap;
+
+      if (totalBreadcrumbsWidth > containerWidth) {
+        breadcrumb.style.display = 'none';
+        hiddenBreadcrumbs.push(breadcrumb);
+      }
     }
-    removeAllFilters();
-        
-    const showMore = () => {
-        const show_all = "{{ show_all }}" === "true";
-        if(show_all) return;
-
-        const breadcrumb_container_element_id = "{{ breadcrumb_container_element_id }}"
-        const breadcrumb_show_more_element_id = "{{ breadcrumb_show_more_element_id }}";
-        const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-
-        const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
-        if (!breadcrumbsContainer) return;
-        const showMore = document.getElementById(breadcrumb_show_more_element_id);
-
-        const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
-        const gap = 15;
-        const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
-
-        let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
-        const containerWidth = breadcrumbsContainer.offsetWidth;
-        const hiddenBreadcrumbs = [];
-
-        for (const breadcrumb of breadcrumbs) {
-            const breadcrumbWidth = breadcrumb.offsetWidth;
-            totalBreadcrumbsWidth += breadcrumbWidth + gap;
-
-            if (totalBreadcrumbsWidth > containerWidth) {
-                breadcrumb.style.display = "none";
-                hiddenBreadcrumbs.push(breadcrumb);
-            }
-        }
 
-        if (hiddenBreadcrumbs.length > 0) {
-            const showMoreTextContainer = showMore.querySelector("small");
-            showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
+    if (hiddenBreadcrumbs.length > 0) {
+      const showMoreTextContainer = showMore.querySelector('small');
+      showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
-            showMore.addEventListener("click", () => {
-                showMore.classList.toggle("open");
-                const showMoreText = showMoreTextContainer.textContent;
-                const newShowMoreText = showMoreText === "Less" ? `${hiddenBreadcrumbs.length} more` : "Less";
+      showMore.addEventListener('click', () => {
+        showMore.classList.toggle('open');
+        const showMoreText = showMoreTextContainer.textContent;
+        const newShowMoreText = showMoreText === 'Less' ? `${hiddenBreadcrumbs.length} more` : 'Less';
 
-                for (const breadcrumb of hiddenBreadcrumbs) {
-                    breadcrumb.style.display = breadcrumb.style.display === "none" ? "" : "none";
-                }
-
-                showMoreTextContainer.textContent = newShowMoreText;
-            });
-        } else {
-            showMore.style.display = "none";
+        for (const breadcrumb of hiddenBreadcrumbs) {
+          breadcrumb.style.display = breadcrumb.style.display === 'none' ? '' : 'none';
         }
-    };
-    showMore();
 
-</script>
\ No newline at end of file
+        showMoreTextContainer.textContent = newShowMoreText;
+      });
+    } else {
+      showMore.style.display = 'none';
+    }
+  };
+  showMore();
+</script>

From 71b5c586faf835a9adfce2bcebfe38d99843c167 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Wed, 11 Sep 2024 17:11:30 +0300
Subject: [PATCH 03/16] formatted

---
 snippets/findify-sorting.liquid         | 81 +++++++++++++------------
 snippets/findify-toolbar-desktop.liquid | 36 +++++------
 snippets/findify-toolbar-mobile.liquid  | 32 +++++-----
 3 files changed, 72 insertions(+), 77 deletions(-)

diff --git a/snippets/findify-sorting.liquid b/snippets/findify-sorting.liquid
index 7bee066..da56b35 100644
--- a/snippets/findify-sorting.liquid
+++ b/snippets/findify-sorting.liquid
@@ -33,29 +33,30 @@
             id="{{ sorting_option_element_id }}"
             class="findify-sorting-option"
             field="{{field}}"
-            order="{{order}}">
+            order="{{order}}"
+          >
             <small>{{ label }}</small>
           </li>
 
           <script>
             const sortingOption = () => {
-              const sorting_sidepanel_element_id = "{{ sorting_sidepanel_element_id }}";
+              const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
               const openClass = 'open-right';
-              const sorting_option_element_id = "{{ sorting_option_element_id }}";
-              const order = "{{ order }}";
-              const field = "{{ field }}";
+              const sorting_option_element_id = '{{ sorting_option_element_id }}';
+              const order = '{{ order }}';
+              const field = '{{ field }}';
 
               const onOptionClickHandler = () => {
                 const sorting = { order_by: order, sort_by: field };
                 findify.sorting.update(sorting);
-              }
+              };
 
               const option = document.getElementById(sorting_option_element_id);
               option.addEventListener('click', onOptionClickHandler);
-              option.addEventListener("keydown", (e) => {
-                if(e.key === 'Enter') onOptionClickHandler();
+              option.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') onOptionClickHandler();
               });
-            }
+            };
             sortingOption();
           </script>
         {% endif %}
@@ -63,8 +64,8 @@
     </ul>
     <script>
       const sortingDropdown = () => {
-        const sorting_dropdown_btn_element_id = "{{ sorting_dropdown_btn_element_id }}";
-        const sorting_dropdown_body_element_id = "{{ sorting_dropdown_body_element_id }}";
+        const sorting_dropdown_btn_element_id = '{{ sorting_dropdown_btn_element_id }}';
+        const sorting_dropdown_body_element_id = '{{ sorting_dropdown_body_element_id }}';
         const openClass = 'open';
 
         const onSortingDropdownBtnClickHandler = () => {
@@ -77,19 +78,19 @@
             const onOutsideClickHandler = (e) => {
               body.classList.remove(openClass);
               removeOutsideClickEvent();
-            }
+            };
 
-            const removeOutsideClickEvent = () => document.removeEventListener("click", onOutsideClickHandler);
+            const removeOutsideClickEvent = () => document.removeEventListener('click', onOutsideClickHandler);
             setTimeout(() => {
-              document.addEventListener("click", onOutsideClickHandler);
+              document.addEventListener('click', onOutsideClickHandler);
             }, 100);
           }
-        }
+        };
 
         const sortingDropdownBtn = document.getElementById(sorting_dropdown_btn_element_id);
-        sortingDropdownBtn.addEventListener('click', onSortingDropdownBtnClickHandler )
-      }
-      
+        sortingDropdownBtn.addEventListener('click', onSortingDropdownBtnClickHandler);
+      };
+
       sortingDropdown();
     </script>
   </div>
@@ -124,17 +125,19 @@
             <input
               type="radio"
               {% if field == selectedField and order == selectedOrder %}
-              checked{% endif %}>
+                checked
+              {% endif %}
+            >
             <span>{{ label }}</span>
           </li>
 
           <script>
             const sortingOption = () => {
-              const sorting_sidepanel_element_id = "{{ sorting_sidepanel_element_id }}";
+              const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
               const openClass = 'open-right';
-              const sorting_option_element_id = "{{ sorting_option_element_id }}";
-              const order = "{{ order }}";
-              const field = "{{ field }}";
+              const sorting_option_element_id = '{{ sorting_option_element_id }}';
+              const order = '{{ order }}';
+              const field = '{{ field }}';
 
               const onOptionClickHandler = () => {
                 const sorting = { order_by: order, sort_by: field };
@@ -142,12 +145,12 @@
 
                 const containerElement = document.getElementById(sorting_sidepanel_element_id);
                 containerElement.classList.remove(openClass);
-                document.documentElement.classList.remove("no-scroll");
-              }
+                document.documentElement.classList.remove('no-scroll');
+              };
 
               const option = document.getElementById(sorting_option_element_id);
-              option.addEventListener('click', onOptionClickHandler)
-            }
+              option.addEventListener('click', onOptionClickHandler);
+            };
             sortingOption();
           </script>
         {% endfor %}
@@ -158,21 +161,21 @@
 
   <script>
     const sortingSidepanel = () => {
-      const sorting_btn_element_id = "{{ sorting_btn_element_id }}";
-      const sorting_sidepanel_element_id = "{{ sorting_sidepanel_element_id }}";
-      const close_sorting_element_id = "{{ close_sorting_element_id }}"
-      const see_results_element_id = "{{ see_results_element_id }}"
+      const sorting_btn_element_id = '{{ sorting_btn_element_id }}';
+      const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
+      const close_sorting_element_id = '{{ close_sorting_element_id }}';
+      const see_results_element_id = '{{ see_results_element_id }}';
       const openClass = 'open-right';
 
       const toggleFilterSection = () => {
         const containerElement = document.getElementById(sorting_sidepanel_element_id);
         containerElement.classList.toggle(openClass);
-        document.documentElement.classList.toggle("no-scroll");
-      }
+        document.documentElement.classList.toggle('no-scroll');
+      };
 
       const sortingToggler = document.getElementById(sorting_btn_element_id);
       sortingToggler.addEventListener('click', toggleFilterSection);
-      
+
       const closeBtn = document.getElementById(close_sorting_element_id);
       closeBtn.addEventListener('click', toggleFilterSection);
 
@@ -180,12 +183,12 @@
       seeResultsBtn.addEventListener('click', toggleFilterSection);
 
       /*
-      * Add additional classes conditioned by media queries
-      */
-      const mobileContainerClasses = ["findify-modal", "animated-right", "right"];
+       * Add additional classes conditioned by media queries
+       */
+      const mobileContainerClasses = ['findify-modal', 'animated-right', 'right'];
       const container = document.getElementById(sorting_sidepanel_element_id);
       mobileContainerClasses.forEach((c) => container?.classList.add(c));
-    }
+    };
     sortingSidepanel();
   </script>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/snippets/findify-toolbar-desktop.liquid b/snippets/findify-toolbar-desktop.liquid
index 92b551b..acabc32 100644
--- a/snippets/findify-toolbar-desktop.liquid
+++ b/snippets/findify-toolbar-desktop.liquid
@@ -19,20 +19,16 @@
     %}
 
     <div>
-      {% render 'findify-sorting'
-        , options: sort_options
-        , default: default_sort_by
-        , selected: sort_by
-        , is_modal: false %}
+      {% render 'findify-sorting', options: sort_options, default: default_sort_by, selected: sort_by, is_modal: false %}
     </div>
   </div>
   {% if active_filters != 'none' %}
     <div class="findify-search-desktop-breadcrumb">
-      {% render 'findify-filter-breadcrumb'
-        , active_filters: active_filters
-        , color_layout: color_layout
-        , component_id: 'desktop-toolbar'
-        , sidebar_component_id: filter_component_id
+      {% render 'findify-filter-breadcrumb',
+        active_filters: active_filters,
+        color_layout: color_layout,
+        component_id: 'desktop-toolbar',
+        sidebar_component_id: filter_component_id
       %}
     </div>
   {% endif %}
@@ -40,25 +36,25 @@
 
 <script>
   const filterSidebar = () => {
-    const filter_toggle_sidebar_element_id = "{{ filter_toggle_sidebar_element_id }}";
-    const filter_component_id = "{{ filter_component_id }}";
+    const filter_toggle_sidebar_element_id = '{{ filter_toggle_sidebar_element_id }}';
+    const filter_component_id = '{{ filter_component_id }}';
     const openClass = 'open';
 
     const toggleFilterSection = () => {
       const containerElement = document.getElementById(filter_component_id);
-      if(containerElement.classList.contains(openClass)){
+      if (containerElement.classList.contains(openClass)) {
         containerElement.classList.remove(openClass);
-        findify.filters.isSidebarOpen = false
+        findify.filters.isSidebarOpen = false;
       } else {
-        containerElement.classList.add(openClass)
+        containerElement.classList.add(openClass);
         findify.filters.isSidebarOpen = true;
       }
-    }
+    };
 
     const filterToggleSidebarElement = document.getElementById(filter_toggle_sidebar_element_id);
     //changes comment to disable toggling
-    filterToggleSidebarElement?.addEventListener('click', toggleFilterSection)
-  }
-  
+    filterToggleSidebarElement?.addEventListener('click', toggleFilterSection);
+  };
+
   filterSidebar();
-</script>
\ No newline at end of file
+</script>
diff --git a/snippets/findify-toolbar-mobile.liquid b/snippets/findify-toolbar-mobile.liquid
index 148ca3b..2fc8dab 100644
--- a/snippets/findify-toolbar-mobile.liquid
+++ b/snippets/findify-toolbar-mobile.liquid
@@ -17,41 +17,37 @@
       </button>
     </div>
     <div>
-      {% render 'findify-sorting'
-        , options: sort_options
-        , default: default_sort_by
-        , selected: sort_by
-        , is_modal: true %}
+      {% render 'findify-sorting', options: sort_options, default: default_sort_by, selected: sort_by, is_modal: true %}
     </div>
   </div>
 </div>
 
 <script>
   const filterSidePanel = () => {
-    const filter_toggle_sidepanel_element_id = "{{ filter_toggle_sidepanel_element_id }}";
-    const filter_component_id = "{{ filter_component_id }}";
+    const filter_toggle_sidepanel_element_id = '{{ filter_toggle_sidepanel_element_id }}';
+    const filter_component_id = '{{ filter_component_id }}';
     const openClass = 'open-left';
     const containerElement = document.getElementById(filter_component_id);
 
     const toggleFilterSection = () => {
       containerElement.classList.toggle(openClass);
-      document.documentElement.classList.toggle("no-scroll");
-    }
+      document.documentElement.classList.toggle('no-scroll');
+    };
 
     const filterToggleSidepanelElement = document.getElementById(filter_toggle_sidepanel_element_id);
     filterToggleSidepanelElement?.addEventListener('click', toggleFilterSection);
-    document.addEventListener('keyup', e => {
-      if (e.code == 'Escape'){
+    document.addEventListener('keyup', (e) => {
+      if (e.code == 'Escape') {
         containerElement.classList.remove(openClass);
-        document.documentElement.classList.remove("no-scroll");
+        document.documentElement.classList.remove('no-scroll');
       }
-    })
+    });
     /*
-    * Add additional classes conditioned by media queries
-    */
-    const mobileContainerClasses = ["findify-modal", "animated-left", "left"];
+     * Add additional classes conditioned by media queries
+     */
+    const mobileContainerClasses = ['findify-modal', 'animated-left', 'left'];
     const container = document.getElementById(filter_component_id);
     mobileContainerClasses.forEach((c) => container?.classList.add(c));
-  }
+  };
   filterSidePanel();
-</script>
\ No newline at end of file
+</script>

From 8878bc7877e67da70fb754477762acea2a4a08f5 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Wed, 11 Sep 2024 17:16:56 +0300
Subject: [PATCH 04/16] updated CSS and JS

---
 assets/findify-autocomplete.css      | 165 ++++++++----------------
 assets/findify-content-tabs.css      |   2 +-
 assets/findify-content-tabs.js       |   4 +-
 assets/findify-content.js            |   2 +-
 assets/findify-filter-breadcrumb.css |   4 +-
 assets/findify-filter.css            |  52 ++++----
 assets/findify-grid.css              |  22 ++--
 assets/findify-pagination.css        | 180 +++++++++++++--------------
 assets/findify-product-card.css      |   2 +-
 assets/findify-product-card.js       |   6 +-
 assets/findify-product-swatches.css  |   2 +-
 assets/findify-sidebar-mobile.css    |  38 +++---
 assets/findify-sorting.css           |  10 +-
 13 files changed, 216 insertions(+), 273 deletions(-)

diff --git a/assets/findify-autocomplete.css b/assets/findify-autocomplete.css
index e16b7fe..2a345bd 100644
--- a/assets/findify-autocomplete.css
+++ b/assets/findify-autocomplete.css
@@ -31,36 +31,36 @@ body {
   display: none;
 }
 
-.findify-autocomplete .suggestions-wrapper h3 {
+.findify-autocomplete .findify-suggestions-wrapper h3 {
   font-weight: 400;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.findify-autocomplete .suggestions-wrapper ul {
+.findify-autocomplete .findify-suggestions-wrapper ul {
   list-style: none;
   padding-left: 0;
   margin-top: 20px;
 }
 
-.findify-autocomplete .suggestions-wrapper a {
+.findify-autocomplete .findify-suggestions-wrapper a {
   color: var(--findify-text-color);
   font-weight: 300;
   text-decoration: none;
 }
 
-.findify-autocomplete .suggestions-wrapper a:hover {
+.findify-autocomplete .findify-suggestions-wrapper a:hover {
   text-decoration: underline;
 }
 
-.findify-autocomplete .products-wrapper h3 {
+.findify-autocomplete .findify-products-wrapper h3 {
   font-weight: 400;
   margin-top: 0;
   margin-bottom: 0;
   color: var(--findify-text-color);
 }
 
-.findify-autocomplete .products-container {
+.findify-autocomplete .findify-products-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -69,10 +69,6 @@ body {
   padding-right: 20px;
 }
 
-.findify-autocomplete .card-wrapper {
-  height: auto;
-}
-
 .findify-autocomplete .findify-product-card-image-wrapper {
   height: 90%;
 }
@@ -86,14 +82,14 @@ body {
   cursor: pointer;
 }
 
-.findify-autocomplete .products-container > div {
+.findify-autocomplete .findify-products-container > div {
   flex-basis: 25%;
   max-width: 25%;
   padding-left: 10px;
   margin: 0;
 }
 
-.findify-autocomplete .products-wrapper {
+.findify-autocomplete .findify-products-wrapper {
   padding-left: 15px;
 }
 
@@ -160,66 +156,28 @@ body {
   font-weight: bold;
 }
 
-.findify-autocomplete .content-wrapper h3 {
+.findify-autocomplete .findify-content-wrapper h3 {
   font-weight: 400;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.findify-autocomplete-content .content-wrapper {
+.findify-autocomplete-content .findify-content-wrapper {
   overflow: hidden;
   position: relative;
   width: auto;
 }
 
-.findify-autocomplete-content .content-container {
-  width: auto;
-  position: relative;
-  flex-wrap: wrap;
-  display: flex;
-  margin-left: -10px;
-  margin-top: 20px;
-  margin-right: -10px;
-}
-
-.findify-autocomplete-content .content-item {
-  cursor: pointer;
-  position: relative;
-  width: calc(50% - 10px);
-  padding-left: 10px;
-  margin-bottom: 10px;
-}
-
-.findify-autocomplete-content .content-item .content_image {
-  width: 100%;
-  padding-bottom: 100%;
-  position: relative;
-  overflow: hidden;
-  display: block !important;
-}
-
-.findify-autocomplete-content .content-item img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-  object-fit: cover;
-}
-
 /* horizontal suggestions */
 /* Not currently in use */
 @media (min-width: 767px) {
-  .findify-autocomplete .suggestions-wrapper.suggestions-horizontal ul {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul {
     display: flex;
     flex-wrap: wrap;
     margin-top: 20px;
   }
   
-  .findify-autocomplete .suggestions-wrapper.suggestions-horizontal ul li {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li {
     background: #d3d3d3;
     padding: 2px 10px;
     border-radius: 90px;
@@ -239,12 +197,12 @@ body {
     cursor: pointer;
   }
   
-  .findify-autocomplete .suggestions-wrapper.suggestions-horizontal ul li:hover {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li:hover {
     cursor: pointer;
     background: #d9d9d9;
   }
   
-  .findify-autocomplete .suggestions-wrapper.suggestions-horizontal ul li a {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li a {
     text-decoration: none;
     color: #000;
     height: auto;
@@ -255,13 +213,13 @@ body {
 
 
 @media (max-width: 767px) {
-  .findify-autocomplete .suggestions-wrapper.mobile-horizontal ul {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul {
     display: flex;
     flex-wrap: wrap;
     margin-top: 20px;
   }
   
-  .findify-autocomplete .suggestions-wrapper.mobile-horizontal ul li {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li {
     background: #d3d3d3;
     padding: 2px 10px;
     border-radius: 90px;
@@ -281,12 +239,12 @@ body {
     cursor: pointer;
   }
   
-  .findify-autocomplete .suggestions-wrapper.mobile-horizontal ul li:hover {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li:hover {
     cursor: pointer;
     background: #d9d9d9;
   }
   
-  .findify-autocomplete .suggestions-wrapper.mobile-horizontal ul li a {
+  .findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li a {
     text-decoration: none;
     color: #000;
     height: auto;
@@ -297,10 +255,10 @@ body {
 }
 
 
-.findify-autocomplete .suggestions-wrapper .findify-suggestion-item a {
+.findify-autocomplete .findify-suggestions-wrapper .findify-suggestion-item a {
   color: #c0c0c0;
 }
-.findify-autocomplete .suggestions-wrapper .findify-suggestion-item a span {
+.findify-autocomplete .findify-suggestions-wrapper .findify-suggestion-item a span {
   color: #1c1d1d;
 }
 /* end */
@@ -318,11 +276,11 @@ body {
   width: 100%;
 }
 
-.findify-autocomplete-dropdown .suggestions-wrapper h3 {
+.findify-autocomplete-dropdown .findify-suggestions-wrapper h3 {
   padding-left: 20px;
 }
 
-.findify-autocomplete-dropdown .products-wrapper h3 {
+.findify-autocomplete-dropdown .findify-products-wrapper h3 {
 }
 
 .findify-autocomplete-dropdown
@@ -330,7 +288,7 @@ body {
   a.findify-view-all {
 }
 
-.findify-autocomplete-dropdown .suggestions-wrapper ul {
+.findify-autocomplete-dropdown .findify-suggestions-wrapper ul {
   padding-left: 20px;
 }
 
@@ -347,24 +305,24 @@ body {
 .findify-autocomplete-fullscreen .findify-autocomplete-content {
   display: flex;
 }
-.findify-autocomplete-fullscreen.suggestions-horizontal .findify-autocomplete-content{
+.findify-autocomplete-fullscreen.findify-suggestions-horizontal .findify-autocomplete-content{
   flex-direction: column;
 }
 
-.findify-autocomplete-fullscreen .suggestions-wrapper {
+.findify-autocomplete-fullscreen .findify-suggestions-wrapper {
   flex: 0.5;
 }
 
-.findify-autocomplete-fullscreen .suggestions-wrapper h2 {
+.findify-autocomplete-fullscreen .findify-suggestions-wrapper h2 {
   padding-left: 30px;
   color: var(--findify-text-color);
 }
 
-.findify-autocomplete-fullscreen .suggestions-wrapper ul {
+.findify-autocomplete-fullscreen .findify-suggestions-wrapper ul {
   padding-left: 30px;
 }
 
-.findify-autocomplete-fullscreen .products-wrapper {
+.findify-autocomplete-fullscreen .findify-products-wrapper {
   padding-left: 30px;
   flex: 2;
 }
@@ -385,13 +343,7 @@ body {
   overflow: scroll;
 }
 
-.findify-autocomplete.findify-autocomplete-slide-in.animation-slide-back {
-  right: -100%;
-  transition: right 0.5s ease-in;
-}
-
-.findify-autocomplete.findify-autocomplete-slide-in,
-.findify-autocomplete.findify-autocomplete-slide-in.findify-hidden.animation {
+.findify-autocomplete.findify-autocomplete-slide-in {
   display: block !important;
   width: 35%;
   right: 0;
@@ -431,7 +383,7 @@ body {
   position: relative;
 }
 
-.findify-autocomplete.findify-autocomplete-slide-in .products-container {
+.findify-autocomplete.findify-autocomplete-slide-in .findify-products-container {
   padding-right: 0;
 }
 
@@ -441,11 +393,11 @@ body {
   padding-right: 0;
 }
 
-.findify-autocomplete.findify-autocomplete-slide-in .products-wrapper {
+.findify-autocomplete.findify-autocomplete-slide-in .findify-products-wrapper {
   padding-left: 0;
 }
 
-.findify-autocomplete.findify-autocomplete-slide-in .products-container > div {
+.findify-autocomplete.findify-autocomplete-slide-in .findify-products-container > div {
   flex-basis: 50%;
   max-width: 50%;
 }
@@ -454,7 +406,7 @@ body {
 
 /* desktop */
 @media (min-width: 767px) {
-  .view-all-top {
+  .findify-view-all-top {
     display: none;
   }
 }
@@ -462,12 +414,11 @@ body {
 /* mobile */
 @media (max-width: 768px) {
   /* slide-in */
-  .findify-autocomplete.findify-autocomplete-slide-in,
-  .findify-autocomplete.findify-autocomplete-slide-in.findify-hidden.animation {
+  .findify-autocomplete.findify-autocomplete-slide-in {
     width: 100%;
   }
 
-  .findify-autocomplete.findify-autocomplete-slide-in .products-wrapper {
+  .findify-autocomplete.findify-autocomplete-slide-in .findify-products-wrapper {
     padding-left: 0;
   }
 
@@ -490,12 +441,12 @@ body {
   }
 
   /*  
-  .findify-autocomplete .products-container > div{
+  .findify-autocomplete .findify-products-container > div{
     flex-basis: 50%;
     max-width: 50%;
   }
   */
-  .findify-autocomplete .products-container > div {
+  .findify-autocomplete .findify-products-container > div {
     flex-basis: auto;
     max-width: initial;
   }
@@ -506,21 +457,21 @@ body {
     white-space: normal;
   }
 
-  .findify-autocomplete-fullscreen .products-wrapper {
+  .findify-autocomplete-fullscreen .findify-products-wrapper {
     padding-top: 15px;
   }
 
-  .findify-autocomplete-fullscreen .suggestions-wrapper h2,
-  .findify-autocomplete-fullscreen .suggestions-wrapper ul,
-  .findify-autocomplete-fullscreen .products-wrapper,
-  .findify-autocomplete-dropdown .suggestions-wrapper h3,
-  .findify-autocomplete-dropdown .suggestions-wrapper ul,
-  .findify-autocomplete .products-wrapper {
+  .findify-autocomplete-fullscreen .findify-suggestions-wrapper h2,
+  .findify-autocomplete-fullscreen .findify-suggestions-wrapper ul,
+  .findify-autocomplete-fullscreen .findify-products-wrapper,
+  .findify-autocomplete-dropdown .findify-suggestions-wrapper h3,
+  .findify-autocomplete-dropdown .findify-suggestions-wrapper ul,
+  .findify-autocomplete .findify-products-wrapper {
     padding-left: 0;
   }
 
-  .findify-autocomplete .suggestions-wrapper ul,
-  .findify-autocomplete .suggestions-wrapper.suggestions-horizontal ul {
+  .findify-autocomplete .findify-suggestions-wrapper ul,
+  .findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul {
     margin-top: 10px;
   }
 
@@ -538,29 +489,29 @@ body {
     align-items: flex-end;
   }
 
-  .findify-autocomplete .products-container {
+  .findify-autocomplete .findify-products-container {
     padding-right: 0;
     flex-direction: column;
     flex-wrap: nowrap;
   }
-  .findify-autocomplete .products-container.mobile-products-per-row-2{
+  .findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2{
     flex-direction: row;
     flex-wrap: wrap;
   }
-  .findify-autocomplete .products-container.mobile-products-per-row-2 div.findify-product-card{
+  .findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 div.findify-product-card{
     max-width: 50%;
     width: 50%;
   }
-  #findify-autocomplete .products-container.mobile-products-per-row-2 .findify-product-card{
+  #findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 .findify-product-card{
     flex-direction: column
   }
 
-  .view-all-bottom {
+  .findify-view-all-bottom {
     display: none;
   }
 
   /* dropdown end */
-  .findify-autocomplete-content .content-wrapper {
+  .findify-autocomplete-content .findify-content-wrapper {
     margin-top: 10px;
   }
 
@@ -576,16 +527,13 @@ body {
     width: 100%;
   }
 
-  #findify-autocomplete .findify-product-card .content-wrapper {
+  #findify-autocomplete .findify-product-card .findify-content-wrapper {
     display: flex;
     flex-direction: column;
     margin-left: 15px;
     width: 100%;
   }
 
-  #findify-autocomplete .price {
-    margin-top: 15px;
-  }
 }
 
 /* AUTOCOMPLETE CONTENT */
@@ -599,15 +547,10 @@ body {
     display: flex;
     flex-direction: column;
   }
-  .autocomplete-content-title {
+  .findify-autocomplete-content-title {
     font-weight: 400;
     margin-top: 0;
     margin-bottom: 0;
     color: var(--findify-text-color);
   }
-  .autocomplete-empty-content{
-    font-size: 12px;
-    margin-top: 6px;
-    color: var(--findify-text-secondary-color)
-  }
 }
diff --git a/assets/findify-content-tabs.css b/assets/findify-content-tabs.css
index e427e49..2808624 100644
--- a/assets/findify-content-tabs.css
+++ b/assets/findify-content-tabs.css
@@ -26,7 +26,7 @@
 .findify-tab:disabled > label {
   color: #c0c0c0;
 }
-.findify-tab.active {
+.findify-tab.findify-active {
   pointer-events: none;
   color: var(--findify-text-color);
   cursor: default;
diff --git a/assets/findify-content-tabs.js b/assets/findify-content-tabs.js
index 940c03a..9198ad7 100644
--- a/assets/findify-content-tabs.js
+++ b/assets/findify-content-tabs.js
@@ -25,10 +25,10 @@ const initFindifyTabsEvents = () => {
     }
     tabs = document.querySelectorAll(selectors.tab);
     for (i = 0; i < tabs.length; i++) {
-      tabs[i].className = tabs[i].className.replace(" active", "");
+      tabs[i].className = tabs[i].className.replace(" findify-active", "");
     }
     document.getElementById(selectors.id(tab_id)).style.display = "block";
-    event.currentTarget.className += " active";
+    event.currentTarget.className += " findify-active";
   };
 
   const init = () => {
diff --git a/assets/findify-content.js b/assets/findify-content.js
index bf58222..edd38e7 100644
--- a/assets/findify-content.js
+++ b/assets/findify-content.js
@@ -143,7 +143,7 @@ const initFindifyContentEvents = () => {
 
      const initPagination = () => {
       const links = document.querySelectorAll(
-        `#${id}-content .pagination__item.link`
+        `#${id}-content .findify-pagination__item.link`
       );
 
       links.forEach((link) =>
diff --git a/assets/findify-filter-breadcrumb.css b/assets/findify-filter-breadcrumb.css
index ba8226f..995c105 100644
--- a/assets/findify-filter-breadcrumb.css
+++ b/assets/findify-filter-breadcrumb.css
@@ -13,7 +13,7 @@
   background: unset;
 }
 
-.findify-filters-breadcrumbs-show-more.open svg {
+.findify-filters-breadcrumbs-show-more.findify-open svg {
   transform: rotate(180deg);
 }
 
@@ -23,7 +23,7 @@
 }
 
 .findify-filters-breadcrumb-item .solid-circle,
-.findify-filters-breadcrumb-item .circle-with-label {
+.findify-filters-breadcrumb-item .findify-circle-with-label {
   height: 25px;
   width: 25px;
 }
diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index e8132ef..5ba021c 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -28,38 +28,38 @@
 #findify-filters-price .findify-filters--body-container{
   margin-top: 10px;
 }
-.price-input-container { 
+.findify-price-input-container { 
   width: 100%; 
   margin-top: 10px;
   padding: 0 10px;
 } 
 
-.price-input .price-field { 
+.findify-price-input .findify-price-field { 
   display: flex; 
   margin-bottom: 22px; 
 } 
 
-.price-field span { 
+.findify-price-field span { 
     margin-right: 10px; 
     margin-top: 6px; 
     font-size: 17px; 
 } 
 
-.price-field input { 
+.findify-price-field input { 
     font-size: 15px; 
     font-family: "DM Sans", sans-serif; 
     border-radius: 9px; 
     border: 0px;  
     width: 100%;
 } 
-.price-field input.min-input{
+.findify-price-field input.findify-min-input{
   text-align: left;
 }
-.price-field input.max-input{
+.findify-price-field input.findify-max-input{
   text-align: right;
 }
 
-.price-input { 
+.findify-price-input { 
   display: flex;
   width: 100%; 
   font-size: 19px; 
@@ -75,18 +75,18 @@ input::-webkit-inner-spin-button {
     margin: 0; 
 } 
 
-.slider-container { 
+.findify-slider-container { 
     width: 100%; 
 } 
 
-.slider-container { 
+.findify-slider-container { 
     height: 6px; 
     position: relative; 
     background: #e4e4e4; 
     border-radius: 5px; 
 } 
 
-.slider-container .price-slider { 
+.findify-slider-container .findify-price-slider { 
     height: 100%; 
     left: 0; 
     right: 0; 
@@ -95,11 +95,11 @@ input::-webkit-inner-spin-button {
     background: #01940b; 
 } 
 
-.range-input { 
+.findify-range-input { 
     position: relative; 
 } 
 
-.range-input input { 
+.findify-range-input input { 
     position: absolute; 
     width: 100%; 
     height: 5px; 
@@ -133,7 +133,7 @@ button {
 }
 
 /* SECTION - HEADER & BODY EXPAND */
-.findify-search-section.filters-horizontal .findify-filters-body{
+.findify-search-section.findify-filters-horizontal .findify-filters-body{
   position: absolute;
   z-index: 3;
   background: #fff;
@@ -161,10 +161,10 @@ button {
   width: 260px;
   position: relative;
 }
-.findify-filters-wrapper.absolute{
+.findify-filters-wrapper.findify-absolute{
   position: absolute;
 }
-.findify-filters-wrapper.fixed{
+.findify-filters-wrapper.findify-fixed{
   position: fixed;
   top: 0;
   z-index: 3;
@@ -353,14 +353,14 @@ button {
 /* ENDSECTION */
 
 /* SECTION - Color filter */
-.body-wrapper-layout-color {
+.findify-body-wrapper-layout-color {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   padding: 0 12px 0 10px;
 }
 
-.body-wrapper-layout-color_with_label {
+.findify-body-wrapper-layout-color_with_label {
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -371,12 +371,12 @@ button {
   align-items: center;
 }
 
-.solid-circle {
+.findify-solid-circle {
   height: 35px;
   width: 35px;
 }
 
-.circle-with-label {
+.findify-circle-with-label {
   height: 30px;
   width: 30px;
 }
@@ -389,7 +389,7 @@ button {
 
 /* ENDSECTION */
 
-.findify-filters-sidebar.open {
+.findify-filters-sidebar.findify-open {
   display: flex;
   width: 260px
 }
@@ -452,12 +452,12 @@ button {
 }
 
 /* SECTION - Price range filter */
-.price-range-container {
+.findify-price-range-container {
   display: flex;
   justify-content: space-between;
   padding: 5px 12px 0 10px;
 }
-.price-range-content {
+.findify-price-range-content {
   display: flex;
   gap: 5px;
 }
@@ -470,7 +470,7 @@ button {
   background: #fff;
 }
 
-.price-range-input {
+.findify-price-range-input {
   box-shadow: none;
   max-width: 50px;
   height: 30px;
@@ -484,14 +484,14 @@ button {
 }
 
 /* Chrome, Safari, Edge, Opera */
-.price-range-input::-webkit-outer-spin-button,
-.price-range-input::-webkit-inner-spin-button {
+.findify-price-range-input::-webkit-outer-spin-button,
+.findify-price-range-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-.price-range-input[type="number"] {
+.findify-price-range-input[type="number"] {
   -moz-appearance: textfield;
 }
 
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
index 60f3a0f..fa6d054 100644
--- a/assets/findify-grid.css
+++ b/assets/findify-grid.css
@@ -1,28 +1,28 @@
-.findify-search-section.filters-right .desktop{
+.findify-search-section.findify-filters-right .findify-desktop{
   overflow: hidden;
 }
-.findify-search-section.filters-right .desktop .findify-search-header-toolbar,
-.findify-search-section.filters-right .findify-search-main{
+.findify-search-section.findify-filters-right .findify-desktop .findify-search-header-toolbar,
+.findify-search-section.findify-filters-right .findify-search-main{
   flex-direction: row-reverse;
 }
-.findify-search-section.filters-right .findify-search-main {
+.findify-search-section.findify-filters-right .findify-search-main {
   flex-direction: row-reverse;
 }
 @media (min-width: 768px) {
-  .findify-search-section.filters-horizontal .findify-search-main{
+  .findify-search-section.findify-filters-horizontal .findify-search-main{
     flex-wrap: wrap;
   }
-  .findify-search-section.filters-horizontal .findify-filters-sidebar.open{
+  .findify-search-section.findify-filters-horizontal .findify-filters-sidebar.findify-open{
     width: 100%;
     flex-wrap: wrap;
   }
-  .findify-search-section.filters-horizontal .findify-filters-wrapper{
+  .findify-search-section.findify-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{
+  .findify-search-section.findify-filters-horizontal #shopify-section-findify-filter-group{
     min-width: 210px;
     max-width: 210px;
   }
@@ -147,10 +147,10 @@ b {
     display: none;
   }
 
-  .findify-search-section.filters-drawer .findify-search-header.mobile{
+  .findify-search-section.findify-filters-drawer .findify-search-header.findify-mobile{
     display: block;
   }
-  .findify-search-header.mobile {
+  .findify-search-header.findify-mobile {
     display: none;
   }
 
@@ -164,7 +164,7 @@ b {
 }
 
 @media (max-width: 768px) {
-  .findify-search-header.desktop {
+  .findify-search-header.findify-desktop {
     display: none;
   }
 
diff --git a/assets/findify-pagination.css b/assets/findify-pagination.css
index 308ebdd..730946c 100644
--- a/assets/findify-pagination.css
+++ b/assets/findify-pagination.css
@@ -1,90 +1,90 @@
-.findify-pagination-wrapper {
-  margin-top: 4rem;
-  margin-bottom: 2rem;
-}
-
-.findify-lazy-loading-pagination-container {
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-}
-
-@media screen and (min-width: 990px) {
-  .findify-pagination-wrapper {
-    margin-top: 5rem;
-  }
-}
-
-.pagination__list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.pagination__list > li {
-  flex: 1 0 4.4rem;
-  max-width: 4.4rem;
-}
-
-.pagination__list > li:not(:last-child) {
-  margin-right: 1rem;
-}
-
-.pagination__item {
-  color: var(--findify-text-color);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  height: 4.4rem;
-  width: 100%;
-  padding: 0;
-  text-decoration: none;
-}
-
-a.pagination__item:hover::after {
-  height: 0.1rem;
-}
-
-.pagination__item .icon-caret {
-  height: 0.6rem;
-}
-
-.pagination__item--current::after {
-  height: 0.1rem;
-}
-
-.pagination__item--current::after,
-.pagination__item:hover::after {
-  content: "";
-  display: block;
-  width: 2rem;
-  position: absolute;
-  bottom: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: currentColor;
-}
-
-.pagination__item--next svg {
-  margin-left: -0.2rem;
-  transform: rotate(90deg);
-}
-
-.pagination__item--next:hover svg {
-  transform: rotate(90deg) scale(1.07);
-}
-
-.pagination__item--prev svg {
-  margin-right: -0.2rem;
-  transform: rotate(-90deg);
-}
-
-.pagination__item--prev:hover svg {
-  transform: rotate(-90deg) scale(1.07);
-}
-
-.pagination__item-arrow:hover::after {
-  display: none;
-}
+.findify-pagination-wrapper {
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+}
+
+.findify-lazy-loading-pagination-container {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+}
+
+@media screen and (min-width: 990px) {
+  .findify-pagination-wrapper {
+    margin-top: 5rem;
+  }
+}
+
+.findify-pagination__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.findify-pagination__list > li {
+  flex: 1 0 4.4rem;
+  max-width: 4.4rem;
+}
+
+.findify-pagination__list > li:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.findify-pagination__item {
+  color: var(--findify-text-color);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 4.4rem;
+  width: 100%;
+  padding: 0;
+  text-decoration: none;
+}
+
+a.findify-pagination__item:hover::after {
+  height: 0.1rem;
+}
+
+.findify-pagination__item .icon-caret {
+  height: 0.6rem;
+}
+
+.findify-pagination__item--current::after {
+  height: 0.1rem;
+}
+
+.findify-pagination__item--current::after,
+.findify-pagination__item:hover::after {
+  content: "";
+  display: block;
+  width: 2rem;
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
+.findify-pagination__item--next svg {
+  margin-left: -0.2rem;
+  transform: rotate(90deg);
+}
+
+.findify-pagination__item--next:hover svg {
+  transform: rotate(90deg) scale(1.07);
+}
+
+.findify-pagination__item--prev svg {
+  margin-right: -0.2rem;
+  transform: rotate(-90deg);
+}
+
+.findify-pagination__item--prev:hover svg {
+  transform: rotate(-90deg) scale(1.07);
+}
+
+.findify-pagination__item-arrow:hover::after {
+  display: none;
+}
diff --git a/assets/findify-product-card.css b/assets/findify-product-card.css
index 8219e9c..82352ff 100644
--- a/assets/findify-product-card.css
+++ b/assets/findify-product-card.css
@@ -10,7 +10,7 @@
   min-height: 380px;
 }
 
-.adapt {
+.findify-adapt {
   width: 100%;
   aspect-ratio: 1/1.5;
   object-fit: cover;
diff --git a/assets/findify-product-card.js b/assets/findify-product-card.js
index 8c63392..eff832b 100644
--- a/assets/findify-product-card.js
+++ b/assets/findify-product-card.js
@@ -39,7 +39,7 @@ const initOnProductCardClick = (id, page, properties) => {
 
 const cleanActiveSwatches = (productCard) => {
   productCard.querySelectorAll('.findify-color-swatch').forEach((swatch) => 
-   swatch.classList.remove('active'));
+   swatch.classList.remove('findify-active'));
 }
 
 const setProductUrl = (productCard, url) => {
@@ -54,7 +54,7 @@ const onSwatchClick = (event, product_url, variant_url, variant_image) => {
   const productCard = targetedSwatch.closest('div[id].findify-product-card'); 
   const swatchImage = productCard.querySelector(`.findify-product-swatch-image`);
   
-  if(targetedSwatch.classList.contains('active')) {
+  if(targetedSwatch.classList.contains('findify-active')) {
 
     cleanActiveSwatches(productCard);
     setProductUrl(productCard, product_url);
@@ -62,7 +62,7 @@ const onSwatchClick = (event, product_url, variant_url, variant_image) => {
   }
   else {
     cleanActiveSwatches(productCard);
-    targetedSwatch.classList.add('active');
+    targetedSwatch.classList.add('findify-active');
     
     setProductUrl(productCard, variant_url);
     swatchImage.removeAttribute('hidden');
diff --git a/assets/findify-product-swatches.css b/assets/findify-product-swatches.css
index 9a22821..aaa7725 100644
--- a/assets/findify-product-swatches.css
+++ b/assets/findify-product-swatches.css
@@ -32,7 +32,7 @@
   position: relative;
 }
 
-.findify-color-swatch.active {
+.findify-color-swatch.findify-active {
   border: 1px solid green !important;
 }
 
diff --git a/assets/findify-sidebar-mobile.css b/assets/findify-sidebar-mobile.css
index a7936ee..d3cd3b6 100644
--- a/assets/findify-sidebar-mobile.css
+++ b/assets/findify-sidebar-mobile.css
@@ -8,13 +8,13 @@
   }
 }
 
-.filters-drawer .findify-modal .findify-filters-wrapper,
-.filters-drawer .findify-modal .findify-filters-container{
+.findify-filters-drawer .findify-modal .findify-filters-wrapper,
+.findify-filters-drawer .findify-modal .findify-filters-container{
   width: 100%;
 }
 
-.findify-search-section.filters-drawer{
-  .no-scroll {
+.findify-search-section.findify-filters-drawer{
+  .findify-no-scroll {
     overflow: hidden;
   }
 
@@ -28,31 +28,31 @@
     top: 0;
   }
 
-  .left {
+  .findify-left {
     left: -100%;
   }
 
-  .right {
+  .findify-right {
     right: -100%;
   }
 
-  .findify-modal.animated-left {
+  .findify-modal.findify-animated-left {
     transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.animated-right {
+  .findify-modal.findify-animated-right {
     transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.animated {
+  .findify-modal.findify-animated {
     transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.open-left {
+  .findify-modal.findify-open-left {
     left: 0;
   }
 
-  .findify-modal.open-right {
+  .findify-modal.findify-open-right {
     right: 0;
   }
 
@@ -91,7 +91,7 @@
   }
 }
 @media (max-width: 768px){
-  .no-scroll {
+  .findify-no-scroll {
     overflow: hidden;
   }
 
@@ -105,31 +105,31 @@
     top: 0;
   }
 
-  .left {
+  .findify-left {
     left: -100%;
   }
 
-  .right {
+  .findify-right {
     right: -100%;
   }
 
-  .findify-modal.animated-left {
+  .findify-modal.findify-animated-left {
     transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.animated-right {
+  .findify-modal.findify-animated-right {
     transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.animated {
+  .findify-modal.findify-animated {
     transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
   }
 
-  .findify-modal.open-left {
+  .findify-modal.findify-open-left {
     left: 0;
   }
 
-  .findify-modal.open-right {
+  .findify-modal.findify-open-right {
     right: 0;
   }
 
diff --git a/assets/findify-sorting.css b/assets/findify-sorting.css
index f18c03e..5d1a1c0 100644
--- a/assets/findify-sorting.css
+++ b/assets/findify-sorting.css
@@ -35,11 +35,11 @@
   transform: rotate(0);
 }
 
-.findify-sorting.open .findify-sorting-btn {
+.findify-sorting.findify-open .findify-sorting-btn {
   border-bottom: none;
 }
 
-.findify-sorting.open .findify-sorting-btn > svg {
+.findify-sorting.findify-open .findify-sorting-btn > svg {
   transform: rotate(180deg);
 }
 
@@ -58,7 +58,7 @@
   z-index: 5;
 }
 
-.findify-sorting.open .findify-sorting-list {
+.findify-sorting.findify-open .findify-sorting-list {
   display: flex;
 }
 
@@ -80,13 +80,13 @@
 }
 
 @media (min-width: 767px) {
-  .findify-sorting.mobile {
+  .findify-sorting.findify-mobile {
     display: none;
   }
 }
 
 @media (max-width: 768px) {
-  .findify-sorting.desktop {
+  .findify-sorting.findify-desktop {
     display: none;
   }
   .findify-sorting-sidebar {

From ea8d9ba88e86f0199d678b673ce78f880617abe0 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Thu, 12 Sep 2024 10:47:28 +0300
Subject: [PATCH 05/16] added liquid files

---
 assets/findify-autocomplete.css               |   1 +
 assets/findify-grid.css                       |   4 +-
 sections/findify-autocomplete.liquid          |  51 ++-----
 sections/findify-content.liquid               |   4 +-
 sections/findify-filter-group.liquid          |  77 ++++++-----
 sections/findify-grid-collection.liquid       |   4 +-
 sections/findify-grid-search.liquid           |   4 +-
 sections/findify-pagination.liquid            |  65 +++++----
 sections/findify-product-card.liquid          |  67 ++++------
 .../findify-autocomplete-content-block.liquid |   2 +-
 snippets/findify-autocomplete-view-all.liquid |  13 +-
 snippets/findify-content-tabs.liquid          |   2 +-
 snippets/findify-filter-breadcrumb.liquid     |  21 +--
 snippets/findify-filter-checkbox.liquid       |  28 ++--
 snippets/findify-filter-color-value.liquid    |   6 +-
 snippets/findify-filter-color.liquid          |  31 +++--
 snippets/findify-filter-price-range.liquid    |  23 ++--
 snippets/findify-filter-range-slider.liquid   |  40 +++---
 snippets/findify-filters.liquid               | 124 ++++++++++--------
 snippets/findify-product-image.liquid         |  21 +--
 snippets/findify-sorting.liquid               |  58 +++++---
 snippets/findify-toolbar-desktop.liquid       |  18 ++-
 snippets/findify-toolbar-mobile.liquid        |  15 ++-
 23 files changed, 360 insertions(+), 319 deletions(-)

diff --git a/assets/findify-autocomplete.css b/assets/findify-autocomplete.css
index 2a345bd..daf355e 100644
--- a/assets/findify-autocomplete.css
+++ b/assets/findify-autocomplete.css
@@ -141,6 +141,7 @@ body {
   color: var(--findify-text-secondary-color);
   padding: 4px;
   text-decoration: none;
+  background: initial;
 }
 
 .findify-view-all label {
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
index fa6d054..8efbc26 100644
--- a/assets/findify-grid.css
+++ b/assets/findify-grid.css
@@ -23,8 +23,8 @@
     max-width: 1100px;
   }
   .findify-search-section.findify-filters-horizontal #shopify-section-findify-filter-group{
-    min-width: 210px;
-    max-width: 210px;
+    min-width: 220px;
+    max-width: 220px;
   }
 }
 
diff --git a/sections/findify-autocomplete.liquid b/sections/findify-autocomplete.liquid
index e2bc2fb..e422155 100644
--- a/sections/findify-autocomplete.liquid
+++ b/sections/findify-autocomplete.liquid
@@ -1,9 +1,7 @@
 {% include 'findify-autocomplete-connector' %}
 
 {%- if query != '' -%}
-  {%- assign suggestionsTitle = 'findify.autocomplete.search_suggestions'
-    | t
-  -%}
+  {%- assign suggestionsTitle = 'findify.autocomplete.search_suggestions' | t -%}
   {%- assign productsTitle = 'findify.autocomplete.product_matches' | t -%}
 {%- else -%}
   {%- assign suggestionsTitle = 'findify.autocomplete.trending_searches' | t -%}
@@ -12,34 +10,27 @@
 
 <div
   id="findify-autocomplete"
-  class="findify-autocomplete findify-autocomplete-fullscreen findify-hidden {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}"
+  class="findify-autocomplete findify-autocomplete-fullscreen findify-hidden {% if desktop_suggestion_template == 'horizontal' %} findify-suggestions-horizontal {% endif %}"
 >
   {% if results_count == '0' %}
     <div class="findify-zero-result-container">
-      <h1>
-        {{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"
-      </h1>
+      <h1>{{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"</h1>
       <h2>{{ 'findify.search.no_results_message' | t }}</h2>
     </div>
   {% else %}
     <div class="findify-autocomplete-content">
       <div
         class="
-          suggestions-wrapper
-          {% if desktop_suggestion_template == 'horizontal' %} suggestions-horizontal {% endif %}
-          mobile-{{ mobile_suggestion_template }}
+          findify-suggestions-wrapper
+          {% if desktop_suggestion_template == 'horizontal' %} findify-suggestions-horizontal {% endif %}
+          findify-mobile-{{ mobile_suggestion_template }}
         "
       >
         <h2>{{ suggestionsTitle }}</h2>
         <ul>
           {% for suggestion in suggestions %}
-            {%- assign queryHTML = '<span>'
-              | append: query
-              | append: '</span>'
-            -%}
-            {%- assign formattedSuggestion = suggestion
-              | replace: query, queryHTML
-            -%}
+            {%- assign queryHTML = '<span>' | append: query | append: '</span>' -%}
+            {%- assign formattedSuggestion = suggestion | replace: query, queryHTML -%}
             <li class="{% if query != "" %} findify-suggestion-item {% endif %}">
               <a
                 class="findify-suggestion"
@@ -52,40 +43,26 @@
           {% endfor %}
         </ul>
 
-        {% render 'findify-autocomplete-content-block',
-          contents_param: contents_param,
-          content: contents[0]
-        %}
+        {% render 'findify-autocomplete-content-block', contents_param: contents_param, content: contents[0] %}
       </div>
 
-      <div class="products-wrapper">
+      <div class="findify-products-wrapper">
         <div class="findify-autocomplete-title-wrapper">
           <h2>{{ productsTitle }}</h2>
-          {% render 'findify-autocomplete-view-all',
-            basepath: basepath,
-            query: query,
-            position: 'top'
-          %}
+          {% render 'findify-autocomplete-view-all', basepath: basepath, query: query, position: 'top' %}
         </div>
         <div
           id="findify-autocomplete-products"
-          class="products-container mobile-products-per-row-{{ mobile_products_per_row }}"
+          class="findify-products-container findify-mobile-products-per-row-{{ mobile_products_per_row }}"
         />
         <button class="findify-close-autocomplete">
           {% render 'findify-icon-cross' %}
         </button>
       </div>
 
-      {% render 'findify-autocomplete-content-block',
-        contents_param: contents_param,
-        content: contents[1]
-      %}
+      {% render 'findify-autocomplete-content-block', contents_param: contents_param, content: contents[1] %}
     </div>
-    {% render 'findify-autocomplete-view-all',
-      basepath: basepath,
-      query: query,
-      position: 'bottom'
-    %}
+    {% render 'findify-autocomplete-view-all', basepath: basepath, query: query, position: 'bottom' %}
   {% endif %}
 
   <script>
diff --git a/sections/findify-content.liquid b/sections/findify-content.liquid
index 96999b8..5dfac12 100644
--- a/sections/findify-content.liquid
+++ b/sections/findify-content.liquid
@@ -33,7 +33,7 @@
   href="{{ url }}"
   target="_blank"
 >
-    <div class="adapt-content-img content-fallback-img">
+    <div class="findify-adapt-content-img findify-content-fallback-img">
       {% if image_url %} 
         <img src="{{ image_url |  url_decode }}" alt="{{ title }}"/>
       {% else if %}
@@ -41,7 +41,7 @@
       {% endif %}
     </div>
 
-  <div class="content-wrapper">
+  <div class="findify-content-wrapper">
     <p class="findify-content-title">{{ title |  url_decode }}</p>
   </div>
 </a>
\ No newline at end of file
diff --git a/sections/findify-filter-group.liquid b/sections/findify-filter-group.liquid
index f3d4252..e167447 100644
--- a/sections/findify-filter-group.liquid
+++ b/sections/findify-filter-group.liquid
@@ -1,18 +1,18 @@
 {% liquid
-  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&" | replace: '%7C', '|' | replace: '%20', ' '
-  assign query_parameters = page_url | split: "sections=findify-filter-group&" | last
+  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: '\/', '/' | replace: '\u0026', '&' | replace: '%7C', '|' | replace: '%20', ' '
+  assign query_parameters = page_url | split: 'sections=findify-filter-group&' | last
 
-  assign name = query_parameters | split: "name=" | last | split: '&' | first
-  assign group_label = query_parameters | split: "label=" | last | split: '&' | first | url_decode
-  assign type = query_parameters | split: "type=" | last | split: '&' | first
-  assign filters = query_parameters | split: "filters=" | last | split: '&' | first | split: ';'
-  assign min = query_parameters | split: "min=" | last | split: '&' | first | split: ';'
-  assign max = query_parameters | split: "max=" | last | split: '&' | first | split: ';'
-  assign from = query_parameters | split: "from=" | last | split: '&' | first | split: ';'
-  assign to = query_parameters | split: "to=" | last | split: '&' | first | split: ';'
+  assign name = query_parameters | split: 'name=' | last | split: '&' | first
+  assign group_label = query_parameters | split: 'label=' | last | split: '&' | first | url_decode
+  assign type = query_parameters | split: 'type=' | last | split: '&' | first
+  assign filters = query_parameters | split: 'filters=' | last | split: '&' | first | split: ';'
+  assign min = query_parameters | split: 'min=' | last | split: '&' | first | split: ';'
+  assign max = query_parameters | split: 'max=' | last | split: '&' | first | split: ';'
+  assign from = query_parameters | split: 'from=' | last | split: '&' | first | split: ';'
+  assign to = query_parameters | split: 'to=' | last | split: '&' | first | split: ';'
 
-  assign color_filter_layout = query_parameters | split: "color_filter=" | last | split: '&' | first
-  assign has_mapped_color = query_parameters | split: "has_mapped_color=" | last | split: '&' | first
+  assign color_filter_layout = query_parameters | split: 'color_filter=' | last | split: '&' | first
+  assign has_mapped_color = query_parameters | split: 'has_mapped_color=' | last | split: '&' | first
   if has_mapped_color == 'true'
     assign has_mapped_color = true
   else
@@ -54,28 +54,25 @@
     <div class="findify-filters-body" aria-expanded="true">
       {% case component %}
         {% when 'text' %}
-          {% render 'findify-filter-text'
-            , name: name
-            , type: type
-            , component: component
-            , filters: filters %}
+          {% render 'findify-filter-text', name: name, type: type, component: component, filters: filters %}
         {% when 'color' %}
-          {% render 'findify-filter-color'
-            , name: name
-            , type: type
-            , component: component
-            , filters: filters
-            , color_filter_layout: color_filter_layout %}
-        {% when 'range' or 'reviews' %}
-          {% render 'findify-filter-range'
-            , name: name
-            , type: type
-            , component: component
-            , filters: filters
-            , min: min
-            , max: max
-            , sliderFrom: from
-            , sliderTo: to
+          {% render 'findify-filter-color',
+            name: name,
+            type: type,
+            component: component,
+            filters: filters,
+            color_filter_layout: color_filter_layout
+          %}
+        {% when 'range', 'reviews' %}
+          {% render 'findify-filter-range',
+            name: name,
+            type: type,
+            component: component,
+            filters: filters,
+            min: min,
+            max: max,
+            sliderFrom: from,
+            sliderTo: to
           %}
       {% endcase %}
     </div>
@@ -113,7 +110,7 @@
       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 isHorizontal = document.querySelector('.findify-search-section.findify-filters-horizontal');
 
       const fixedFilters = () => {
         const scrollPosition = window.scrollY;
@@ -121,21 +118,21 @@
         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', '');
+        if(scrollPosition >= filtersPosition && !classNames.includes('findify-fixerd')){
+          document.querySelector('#findify-filters').className = classNames?.replace('findify-absolute', '');
           document.querySelector('#findify-filters').style.top = `0px`;
-          document.querySelector('#findify-filters').className += ' fixed';
+          document.querySelector('#findify-filters').className += ' findify-fixerd';
         }
 
         if(scrollPosition > (searchWrapperHeight - 50) && !isHorizontal){
 
           document.querySelector('#findify-filters').className = filterClass;
-          document.querySelector('#findify-filters').className += ' absolute';
+          document.querySelector('#findify-filters').className += ' findify-absolute';
           document.querySelector('#findify-filters').style.top = `${searchWrapperHeight - filtersWrapperHeight}px`;
         }
 
         if( (scrollPosition - 80) < searchWrapperTop) 
-          document.querySelector('#findify-filters').className = classNames.replace('fixed', '');
+          document.querySelector('#findify-filters').className = classNames.replace('findify-fixerd', '');
       }
     
       const isSticky = document.querySelector('.findify-filters-sticky');
@@ -148,4 +145,4 @@
 
       collapseFilter();
   </script>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/sections/findify-grid-collection.liquid b/sections/findify-grid-collection.liquid
index e9a981d..7a3f14b 100644
--- a/sections/findify-grid-collection.liquid
+++ b/sections/findify-grid-collection.liquid
@@ -20,9 +20,9 @@
     {% 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 desktop_filter_layout != 'horizontal' %}findify-filters-{{ desktop_filter_position }} {% endif %}
     {% if disable_search_input == 'true' %} findify-filters-disable_search_input {% endif %}
-    filters-{{ desktop_filter_layout }}
+    findify-filters-{{ desktop_filter_layout }}
   "
 >
   <div class="findify-search-container">
diff --git a/sections/findify-grid-search.liquid b/sections/findify-grid-search.liquid
index 81fe9f2..e543ccb 100644
--- a/sections/findify-grid-search.liquid
+++ b/sections/findify-grid-search.liquid
@@ -42,9 +42,9 @@
   {% 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 desktop_filter_layout != 'horizontal' %}findify-filters-{{ desktop_filter_position }} {% endif %}
   {% if disable_search_input == 'true' %} findify-filters-disable_search_input {% endif %}
-  filters-{{ desktop_filter_layout }}"
+  findify-filters-{{ desktop_filter_layout }}"
 >
 
   {% if results_count > 0 %}
diff --git a/sections/findify-pagination.liquid b/sections/findify-pagination.liquid
index cd60a6c..3948072 100644
--- a/sections/findify-pagination.liquid
+++ b/sections/findify-pagination.liquid
@@ -1,4 +1,14 @@
-{%- assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: '\/', '/' | replace: '%20', ' ' | replace: '\u0026', '&' -%}
+{%- assign page_url = content_for_header
+  | split: '"pageurl":"'
+  | last
+  | split: '"'
+  | first
+  | split: request.host
+  | last
+  | replace: '\/', '/'
+  | replace: '%20', ' '
+  | replace: '\u0026', '&'
+-%}
 
 {%- assign query_parameters = page_url | split: 'sections=findify-pagination&' | last -%}
 
@@ -18,7 +28,7 @@
 {%- assign next_title = nextPieces[1] -%}
 {%- assign next_url = nextPieces[2] | replace: '$', '&' -%}
 
-{% if next_is_link contains "false" %}
+{% if next_is_link contains 'false' %}
   {% assign next = false %}
 {% endif %}
 
@@ -27,7 +37,7 @@
 {%- assign previous_title = prevPieces[1] -%}
 {%- assign previous_url = prevPieces[2] | replace: '$', '&' -%}
 
-{% if previous_is_link contains "false" %}
+{% if previous_is_link contains 'false' %}
   {% assign previous = false %}
 {% endif %}
 
@@ -36,15 +46,17 @@
     <nav
       class="pagination"
       role="navigation"
-      aria-label="{{ 'general.pagination.label' | t }}">
-      <ul class="pagination__list list-unstyled" role="list">
+      aria-label="{{ 'general.pagination.label' | t }}"
+    >
+      <ul class="findify-pagination__list list-unstyled" role="list">
         {%- if previous -%}
           <li>
             <a
-              data-value='{{ previous_title }}'
+              data-value="{{ previous_title }}"
               href="{{ previous_url }}{{ anchor }}"
-              class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce"
-              aria-label="{{ 'general.pagination.previous' | t }}">
+              class="findify-pagination__item findify-pagination__item--next findify-pagination__item-arrow link motion-reduce"
+              aria-label="{{ 'general.pagination.previous' | t }}"
+            >
               {% render 'findify-icon-arrow' %}
             </a>
           </li>
@@ -55,7 +67,7 @@
           {%- assign is_link = partPieces[0] -%}
           {%- assign title = partPieces[1] -%}
           {%- assign url = partPieces[2] | replace: '$', '&' -%}
-          {% if is_link contains "false" %}
+          {% if is_link contains 'false' %}
             {% assign is_link = false %}
           {% endif %}
 
@@ -63,19 +75,25 @@
             {%- if is_link -%}
               <a
                 href="{{ url }}{{ anchor }}"
-                data-value='{{ title }}'
-                class="pagination__item link"
-                aria-label="{{ 'general.pagination.page' | t: number: title }}">{{ title }}</a>
+                data-value="{{ title }}"
+                class="findify-pagination__item link"
+                aria-label="{{ 'general.pagination.page' | t: number: title }}"
+              >
+                {{- title -}}
+              </a>
             {%- else -%}
               {%- if title == current_page -%}
                 <a
                   role="link"
                   aria-disabled="true"
-                  class="pagination__item pagination__item--current light"
+                  class="findify-pagination__item findify-pagination__item--current light"
                   aria-current="page"
-                  aria-label="{{ 'general.pagination.page' | t: number: title }}">{{ title }}</a>
+                  aria-label="{{ 'general.pagination.page' | t: number: title }}"
+                >
+                  {{- title -}}
+                </a>
               {%- else -%}
-                <span class="pagination__item">{{ title }}</span>
+                <span class="findify-pagination__item">{{ title }}</span>
               {%- endif -%}
             {%- endif -%}
           </li>
@@ -84,10 +102,11 @@
         {%- if next -%}
           <li>
             <a
-              data-value='{{ next_title }}'
+              data-value="{{ next_title }}"
               href="{{ next_url }}{{ anchor }}"
-              class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce"
-              aria-label="{{ 'general.pagination.next' | t }}">
+              class="findify-pagination__item findify-pagination__item--prev findify-pagination__item-arrow link motion-reduce"
+              aria-label="{{ 'general.pagination.next' | t }}"
+            >
               {%- render 'findify-icon-arrow' -%}
             </a>
           </li>
@@ -98,8 +117,8 @@
 {%- endif -%}
 
 {% schema %}
-  {
-    "name": "Findify pagination",
-    "settings": []
-  }
-{% endschema %}
\ No newline at end of file
+{
+  "name": "Findify pagination",
+  "settings": []
+}
+{% endschema %}
diff --git a/sections/findify-product-card.liquid b/sections/findify-product-card.liquid
index e9110bb..ac12986 100644
--- a/sections/findify-product-card.liquid
+++ b/sections/findify-product-card.liquid
@@ -5,64 +5,55 @@
   product-id="product-{{ id }}"
   class="findify-product-card {{ class }} {{ widget }}_{{ id }}"
   {% if page != blank %}
-  page="{{ page }}"
-  {% endif %}>
-  <a class="findify-product-link" href={{ product_url }}>
-    <div  class='findify-product-card__image'>
-      <div class='findify-image-container'>
+    page="{{ page }}"
+  {% endif %}
+>
+  <a class="findify-product-link" href="{{ product_url }}">
+    <div class="findify-product-card__image">
+      <div class="findify-image-container">
         {% if current_variant.featured_media != null %}
-          {% render 'findify-product-image'
-            , media: current_variant.featured_media
-            , class: 'first-image' %}
+          {% render 'findify-product-image', media: current_variant.featured_media, class: 'first-image' %}
         {% else %}
-          {% render 'findify-product-image'
-            , media: product.featured_media
-            , class: 'first-image' %}
+          {% render 'findify-product-image', media: product.featured_media, class: 'first-image' %}
         {% endif %}
         {%- if product.media[1] != null and showHoverImage == 'true' -%}
-          {% render 'findify-product-image'
-            , media: product.media[1]
-            , class: 'findify-second-image' %}
+          {% render 'findify-product-image', media: product.media[1], class: 'findify-second-image' %}
         {%- endif -%}
 
-      {% comment %} <img width="100%" height="100%" class="findify-product-swatch-image" hidden /> {% endcomment %}
+        {% comment %} <img width="100%" height="100%" class="findify-product-swatch-image" hidden /> {% endcomment %}
       </div>
     </div>
-    <div class="content-wrapper">
+    <div class="findify-content-wrapper">
       {% if brand %}
         <div class="findify-product-brand">{{ brand }}</div>
       {% endif %}
 
-      {% comment %} {% render 'findify-product-swatches-color',
-              product_url: product_url,
-              product: product,
-              colormap: colormap,
-              variants: variants,
-          %} {% endcomment %}
+      {% comment %}
+        {% render 'findify-product-swatches-color',
+            product_url: product_url,
+            product: product,
+            colormap: colormap,
+            variants: variants,
+        %}
+      {% endcomment %}
 
-
-      <div class='findify-product-title findify-cut-text'>
+      <div class="findify-product-title findify-cut-text">
         <label>{{ product.title }}</label>
       </div>
-      {% render 'findify-product-price'
-        , product: product %}
+      {% render 'findify-product-price', product: product %}
       {% if reviews %}
-        {% render 'findify-rating'
-          , value: reviews
-          , count: reviews_count %}
+        {% render 'findify-rating', value: reviews, count: reviews_count %}
       {% endif %}
     </div>
   </a>
 
-
   <script>
-        /* IMPORTANT: Script tags are executed within this file element. */
-        const id = "{{id}}";
-        const selected_variant_id = "{{selected_variant_id}}";
-        const widget = "{{widget}}";
-        const page = "{{page}}"
+    /* IMPORTANT: Script tags are executed within this file element. */
+    const id = "{{id}}";
+    const selected_variant_id = "{{selected_variant_id}}";
+    const widget = "{{widget}}";
+    const page = "{{page}}"
 
-        initOnProductCardClick(id, page, { widget, selected_variant_id });
+    initOnProductCardClick(id, page, { widget, selected_variant_id });
   </script>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/snippets/findify-autocomplete-content-block.liquid b/snippets/findify-autocomplete-content-block.liquid
index 288ecbc..9ddc663 100644
--- a/snippets/findify-autocomplete-content-block.liquid
+++ b/snippets/findify-autocomplete-content-block.liquid
@@ -5,7 +5,7 @@
     {% assign count = contentArray[1] %}
     {% assign title = contentArray[2] %}
     <div id="{{content_id}}-content" class="findify-autocomplete-tab-content">
-      <h3 class="autocomplete-content-title">{{ title }}</h3>
+      <h3 class="findify-autocomplete-content-title">{{ title }}</h3>
       {% if count == '0' %}
         <h3>{{ 'findify.content.no_content' | t }}</h3>
       {% else %}
diff --git a/snippets/findify-autocomplete-view-all.liquid b/snippets/findify-autocomplete-view-all.liquid
index cf06b33..8ba24fa 100644
--- a/snippets/findify-autocomplete-view-all.liquid
+++ b/snippets/findify-autocomplete-view-all.liquid
@@ -1,12 +1,15 @@
 {% assign view_all_element_id = 'view-all-element' | append: '-' | append: position %}
 
-<button id="{{ view_all_element_id }}" class="findify-view-all view-all-{{position}}" >
+<button
+  id="{{ view_all_element_id }}"
+  class="findify-view-all findify-view-all-{{position}}"
+>
   {%- if query == '' -%}
     <label>{{ 'findify.autocomplete.view_all' | t }}</label>
   {%- else -%}
     <label>
       {{ 'findify.autocomplete.view_all_results_for' | t }}
-      <span class="findify-components-autocomplete--tip__highlight">"{{ query |  url_decode }}"</span>
+      <span class="findify-components-autocomplete--tip__highlight">"{{ query | url_decode }}"</span>
     </label>
   {%- endif -%}
 </button>
@@ -19,7 +22,7 @@
     document.getElementById(view_all_element_id).addEventListener('click', () => {
       const root = window.Shopify.routes.root ? window.Shopify.routes.root : '';
       window.location.href = query === 'none' ? `${root}search` : `${root}search?q=${query}`;
-    })
-  }
+    });
+  };
   clickViewAll();
-</script>
\ No newline at end of file
+</script>
diff --git a/snippets/findify-content-tabs.liquid b/snippets/findify-content-tabs.liquid
index 3d25c51..05d8fe3 100644
--- a/snippets/findify-content-tabs.liquid
+++ b/snippets/findify-content-tabs.liquid
@@ -12,7 +12,7 @@
 {% endcomment %}
 
 <div class="findify-tabs">
-  <button class="findify-tab active" target="findify-product-result">
+  <button class="findify-tab findify-active" target="findify-product-result">
     <label>{{ 'findify.search.search_results' | t }}</label>
     <span class="findify-tab-badge">{{ resultsCount }}</span>
   </button>
diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index dd1ad8f..e0de3d2 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -71,7 +71,9 @@
             {% when 'color' %}
               {% case color_layout %}
                 {% when 'color', 'color_with_label' %}
-                  <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
+                  <span
+                    class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} findify-solid-circle {{ color_layout }}"
+                  ></span>
                   {% if color_layout == 'color_with_label' %}
                     {{ value }}
                   {% endif %}
@@ -90,11 +92,11 @@
     </div>
     <script>
       const removeFilter = () => {
-        const breadcrumb_element_id = '{{ breadcrumb_element_id }}';
+        const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
 
-        const name = '{{ name }}';
-        const type = '{{ type }}';
-        const value = '{{ value }}';
+        const name = "{{ name }}";
+        const type = "{{ type }}";
+        const value = "{{ value }}";
 
         const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
 
@@ -110,7 +112,10 @@
   {% endfor %}
 
   {% assign breadcrumb_show_more_element_id = 'breadcrumb-show-more-' | append: component_id %}
-  <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
+  <div
+    id="{{ breadcrumb_show_more_element_id }}"
+    class="findify-filters-breadcrumbs-show-more"
+  >
     <small></small>
     <div class="findify-filters-breadcrumb-close">
       {% render 'findify-icon-arrow', size: 8 %}
@@ -132,7 +137,7 @@
     const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
     const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
 
-    const openClass = 'open-left';
+    const openClass = 'findify-open-left';
     const breacrumbClearAllClickHandler = () => {
       findify.filters.reset();
     };
@@ -180,7 +185,7 @@
       showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
       showMore.addEventListener('click', () => {
-        showMore.classList.toggle('open');
+        showMore.classList.toggle('findify-open');
         const showMoreText = showMoreTextContainer.textContent;
         const newShowMoreText = showMoreText === 'Less' ? `${hiddenBreadcrumbs.length} more` : 'Less';
 
diff --git a/snippets/findify-filter-checkbox.liquid b/snippets/findify-filter-checkbox.liquid
index a1b789e..f749f24 100644
--- a/snippets/findify-filter-checkbox.liquid
+++ b/snippets/findify-filter-checkbox.liquid
@@ -10,27 +10,21 @@
   data-name="{{name}}"
   data-type="{{type}}"
   selected="{{is_selected}}"
-  value="{{value}}">
+  value="{{value}}"
+>
   {% case component %}
     {% when 'reviews' %}
-      {% render 'findify-filter-rating-value'
-        , is_selected: is_selected
-        , value: value
-      %}
+      {% render 'findify-filter-rating-value', is_selected: is_selected, value: value %}
       <span class=" findify-filter-checkbox-item-count">({{ count }})</span>
     {% when 'color' %}
-      {% render 'findify-filter-color-value'
-        , is_selected: is_selected
-        , color_name: color_name
-        , border_color: border_color
-        , color_filter_layout: color_filter_layout
+      {% render 'findify-filter-color-value',
+        is_selected: is_selected,
+        color_name: color_name,
+        border_color: border_color,
+        color_filter_layout: color_filter_layout
       %}
     {% else %}
-      {% render 'findify-filter-text-value'
-        , is_selected: is_selected
-        , has_children: has_children
-        , text: text
-      %}
+      {% render 'findify-filter-text-value', is_selected: is_selected, has_children: has_children, text: text %}
       <span class="findify-filter-checkbox-item-count">({{ count }})</span>
   {% endcase %}
 </div>
@@ -46,7 +40,7 @@
     const filterClickHandler = (e) => {
       e.preventDefault();
       e.stopPropagation();
-      document.documentElement.classList.remove('no-scroll');
+      document.documentElement.classList.remove('findify-no-scroll');
       findify.filters.update({ value, type, name });
     };
 
@@ -57,4 +51,4 @@
   };
 
   onFilterClick();
-</script>
\ No newline at end of file
+</script>
diff --git a/snippets/findify-filter-color-value.liquid b/snippets/findify-filter-color-value.liquid
index aa922b0..174f484 100644
--- a/snippets/findify-filter-color-value.liquid
+++ b/snippets/findify-filter-color-value.liquid
@@ -9,17 +9,17 @@
 <span class="findify-filters-checkbox-item-value findify-filters--color-item {{ class }}">
   {% case color_filter_layout %}
     {% when 'color', 'color_with_label' %}
-      <span class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} solid-circle">
+      <span class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} findify-solid-circle">
         {% if is_selected %}
           {% render 'findify-icon-checkmark', color: color_name %}
         {% endif %}
       </span>
       {% if color_filter_layout == 'color_with_label' %}
         {{ color_name }}
-      {%  endif %}
+      {% endif %}
     {% else %}
       <span
-        class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} circle-with-label"
+        class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} findify-circle-with-label"
       ></span>
       {{ color_name | url_decode }}
       </span>
diff --git a/snippets/findify-filter-color.liquid b/snippets/findify-filter-color.liquid
index 8df0416..193f4d6 100644
--- a/snippets/findify-filter-color.liquid
+++ b/snippets/findify-filter-color.liquid
@@ -4,13 +4,12 @@
     assign component = 'text'
   endif
 
-  assign wrapper_class = 'body-wrapper-layout-' | append: color_filter_layout
+  assign wrapper_class = 'findify-body-wrapper-layout-' | append: color_filter_layout
   assign checkbox_class = 'findify-filters--color-item  findify-filters--color-item-layout-' | append: color_filter_layout
 %}
 
 {% if filters.size > 4 and component == 'text' %}
-  {% render 'findify-filter-search-input'
-    , name: name %}
+  {% render 'findify-filter-search-input', name: name %}
 {% endif %}
 
 <div class="findify-filters--body-wrapper {{wrapper_class}}">
@@ -29,19 +28,19 @@
     %}
 
     {% if value != 'nm' %}
-      {% render 'findify-filter-checkbox'
-        , name: name
-        , type: type
-        , is_selected: is_selected
-        , count: count
-        , component: component
-        , value: value
-        , text: value
-        , color_name: value
-        , border_color: border_color
-        , class: checkbox_class
-        , color_filter_layout: color_filter_layout
+      {% render 'findify-filter-checkbox',
+        name: name,
+        type: type,
+        is_selected: is_selected,
+        count: count,
+        component: component,
+        value: value,
+        text: value,
+        color_name: value,
+        border_color: border_color,
+        class: checkbox_class,
+        color_filter_layout: color_filter_layout
       %}
     {% endif %}
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/snippets/findify-filter-price-range.liquid b/snippets/findify-filter-price-range.liquid
index ca81d6b..7ae1b43 100644
--- a/snippets/findify-filter-price-range.liquid
+++ b/snippets/findify-filter-price-range.liquid
@@ -6,16 +6,17 @@
   assign submit_btn_selector_id = 'findify-price-submit-btn'
 %}
 
-<div class="price-range-container">
-  <div class="price-range-content">
+<div class="findify-price-range-container">
+  <div class="findify-price-range-content">
     <div class="findify-price-range-input-container">
       <input
         aria-label="{{'findify.filters.min_price' | t }}"
         min="{{ min_value }}"
         max="{{ max_value }}"
         type="number"
-        class="price-range-input"
-        id="{{ input_from_selector_id }}">
+        class="findify-price-range-input"
+        id="{{ input_from_selector_id }}"
+      >
       <span>{{ currency }}</span>
     </div>
     <span>-</span>
@@ -25,12 +26,15 @@
         min="{{ min_value }}"
         max="{{ max_value }}"
         type="number"
-        class="price-range-input"
-        id="{{ input_to_selector_id }}">
+        class="findify-price-range-input"
+        id="{{ input_to_selector_id }}"
+      >
       <span>{{ currency }}</span>
     </div>
   </div>
-  <button id='{{ submit_btn_selector_id }}'>{{ 'findify.filters.go' | t }}</button>
+  <button id="{{ submit_btn_selector_id }}">
+    {{ 'findify.filters.go' | t }}
+  </button>
 </div>
 
 <script>
@@ -51,9 +55,6 @@
       const rate = findify.utils.getShopifyCurrencyRate();
       let from = Math.round(fromInputElement.value / rate)
       let to = Math.round(toInputElement.value / rate)
-      console.log(from, to)
-      console.log(fromInputElement.value / rate, toInputElement.value / rate)
-
       let value;
       if (parseFloat(from) && parseFloat(to)) {
         value = `from|${from}-to|${to}`;
@@ -72,4 +73,4 @@
   };
 
   rangeSearch();
-</script>
\ No newline at end of file
+</script>
diff --git a/snippets/findify-filter-range-slider.liquid b/snippets/findify-filter-range-slider.liquid
index 5f15c68..3a4039e 100644
--- a/snippets/findify-filter-range-slider.liquid
+++ b/snippets/findify-filter-range-slider.liquid
@@ -1,17 +1,17 @@
 {% liquid
-  assign slider_container_selector = 'slider-container'
-  assign range_input_selector = 'range-input'
-  assign price_input_selector = 'price-input'
+  assign slider_container_selector = 'findify-slider-container'
+  assign range_input_selector = 'findify-range-input'
+  assign price_input_selector = 'findify-price-input'
 
   assign min_range_selector = 'min-range'
   assign max_range_selector = 'max-range'
 
-  assign min_input_selector = 'min-input'
-  assign max_input_selector = 'max-input'
+  assign min_input_selector = 'findify-min-input'
+  assign max_input_selector = 'findify-max-input'
 %}
-<div class="price-input-container">
+<div class="findify-price-input-container">
   <div class="{{slider_container_selector}}">
-    <div class="price-slider"></div>
+    <div class="findify-price-slider"></div>
     <div class="{{range_input_selector}}">
       <input
         type="range"
@@ -19,39 +19,45 @@
         min="0"
         max="{{ max }}"
         value="{% if from contains 'under' %}{{ min }}{% else %}{{ from }}{% endif %}"
-        step="0">
+        step="0"
+      >
       <input
         type="range"
         class="{{max_range_selector}}"
         min="0"
         max="{{ max }}"
         value="{% if to contains "up" %}{{ max }}{% else %}{{ to }}{% endif %}"
-        step="0">
+        step="0"
+      >
     </div>
   </div>
   <div class="{{price_input_selector}}">
-    <div class="price-field">
+    <div class="findify-price-field">
       <input
         type="hidden"
         class="{{min_input_selector}}"
-        value="{% if from contains 'under' %}{{ min }}{% else %}{{ from }}{% endif %}">
+        value="{% if from contains 'under' %}{{ min }}{% else %}{{ from }}{% endif %}"
+      >
       <div class="{{min_input_selector}} div">
         {% if from contains 'under' %}
           {{ min }}
         {% else %}
-          {{ from }}{% endif %}
+          {{ from -}}
+        {%- endif %}
       </div>
     </div>
-    <div class="price-field">
+    <div class="findify-price-field">
       <input
         type="hidden"
         class="{{max_input_selector}}"
-        value="{% if to contains "up" %}{{ max }}{% else %}{{ to }}{% endif %}">
+        value="{% if to contains "up" %}{{ max }}{% else %}{{ to }}{% endif %}"
+      >
       <div class="{{max_input_selector}} div">
         {% if to contains 'up' %}
           {{ max }}
         {% else %}
-          {{ to }}{% endif %}
+          {{ to -}}
+        {%- endif %}
       </div>
     </div>
   </div>
@@ -63,7 +69,7 @@
     const min_input_selector = '.{{min_input_selector}}.div';
     const max_input_selector = '.{{max_input_selector}}.div';
     const price_slider_selector =
-      '.{{slider_container_selector}} .price-slider';
+      '.{{slider_container_selector}} .findify-price-slider';
     const range_input_selector = '.{{range_input_selector}} input';
     const price_input_selector = '.{{price_input_selector}} input';
 
@@ -152,4 +158,4 @@
     }
   };
   initSlider();
-</script>
\ No newline at end of file
+</script>
diff --git a/snippets/findify-filters.liquid b/snippets/findify-filters.liquid
index e7aaa11..c69780e 100644
--- a/snippets/findify-filters.liquid
+++ b/snippets/findify-filters.liquid
@@ -4,80 +4,90 @@
   assign see_results_element_id = 'see-results-btn'
   assign findify_filters_component_id = 'findify-filters-sidebar'
 %}
-<aside id="{{ findify_filters_component_id }}" class="findify-filters-sidebar open">
+<aside
+  id="{{ findify_filters_component_id }}"
+  class="findify-filters-sidebar findify-open"
+>
   <div class="findify-filters-container">
     <button id="{{ close_filters_element_id }}" class="findify-modal-header">
-      <span class="findify-modal-header-title">{{ 'findify.filters.filter_by' | t }}</span>
+      <span class="findify-modal-header-title">
+        {{- 'findify.filters.filter_by' | 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 %}
+        {% 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">
+    <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>
-    <button id="{{ see_results_element_id }}" class="findify-modal-footer">{{ 'findify.filters.see_results' | t }}</button>
+    <button id="{{ see_results_element_id }}" class="findify-modal-footer">
+      {{ 'findify.filters.see_results' | t }}
+    </button>
   </div>
 </aside>
 
 <script>
-    const filterSection = () => {
-        const close_filters_element_id = "{{ close_filters_element_id }}";
-        const see_results_element_id = "{{ see_results_element_id }}";
-        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;
+  const filterSection = () => {
+      const close_filters_element_id = "{{ close_filters_element_id }}";
+      const see_results_element_id = "{{ see_results_element_id }}";
+      const component_id = "{{ component_id }}"
+      const findify_filters_component_id = "{{ findify_filters_component_id }}";
+      const openClass = 'findify-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('findify-open', '');
 
-        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
+      if(isAllFiltersCollapsed)
+        document.querySelectorAll('.findify-filters-body').forEach(item => {
+          item.setAttribute('aria-expanded', 'false');
+        })
 
-        const toggleFilterSection = () => {
-          const isDrawerDesktop = document.querySelector('.findify-search-section.filters-drawer');
-          if(findify.utils?.isMobile() || isDrawerDesktop){
-            findify.grid?.load();
-          }
-          const containerElement = document.getElementById(component_id);
-          containerElement.classList.toggle(openClass);
-          document.documentElement.classList.toggle("no-scroll");
+      if(isOneFilterOpen)
+        document.querySelectorAll('.findify-filters-body').forEach((item, index) => {
+          if(index > 0) item.setAttribute('aria-expanded', 'false');
+        })
+      //end
+
+      const toggleFilterSection = () => {
+        const isDrawerDesktop = document.querySelector('.findify-search-section.findify-filters-drawer');
+        if(findify.utils?.isMobile() || isDrawerDesktop){
+          findify.grid?.load();
+        }
+        const containerElement = document.getElementById(component_id);
+        containerElement.classList.toggle(openClass);
+        document.documentElement.classList.toggle("findify-no-scroll");
+      }
+      const setSidebarOpen = () => {
+        if (findify?.filters?.isSidebarOpen) {
+          const containerElement = document.getElementById(findify_filters_component_id);
+          containerElement?.classList?.add('findify-open');
         }
-        const setSidebarOpen = () => {
-          if (findify?.filters?.isSidebarOpen) {
-            const containerElement = document.getElementById(findify_filters_component_id);
-            containerElement?.classList?.add('open');
-          }
-        };
-        setSidebarOpen();
-        const closeFiltersElement = document.getElementById(close_filters_element_id);
-        closeFiltersElement.addEventListener('click', toggleFilterSection)
+      };
+      setSidebarOpen();
+      const closeFiltersElement = document.getElementById(close_filters_element_id);
+      closeFiltersElement.addEventListener('click', toggleFilterSection)
 
-        const seeResultsElement = document.getElementById(see_results_element_id);
-        seeResultsElement.addEventListener('click', toggleFilterSection);
-    }
-    filterSection();
-</script> 
\ No newline at end of file
+      const seeResultsElement = document.getElementById(see_results_element_id);
+      seeResultsElement.addEventListener('click', toggleFilterSection);
+  }
+  filterSection();
+</script>
diff --git a/snippets/findify-product-image.liquid b/snippets/findify-product-image.liquid
index 9fe0a96..be12393 100644
--- a/snippets/findify-product-image.liquid
+++ b/snippets/findify-product-image.liquid
@@ -1,16 +1,17 @@
 <img
   srcset="
-              {%- if media.width >= 165 -%}{{ media | image_url: width: 165 }} 165w,{%- endif -%}
-              {%- if media.width >= 360 -%}{{ media | image_url: width: 360 }} 360w,{%- endif -%}
-              {%- if media.width >= 533 -%}{{ media | image_url: width: 533 }} 533w,{%- endif -%}
-              {%- if media.width >= 720 -%}{{ media | image_url: width: 720 }} 720w,{%- endif -%}
-              {%- if media.width >= 940 -%}{{ media | image_url: width: 940 }} 940w,{%- endif -%}
-              {%- if media.width >= 1066 -%}{{ media | image_url: width: 1066 }} 1066w,{%- endif -%}
-              {{ media | image_url }} {{ media.width }}w
-            "
+    {%- if media.width >= 165 -%}{{ media | image_url: width: 165 }} 165w,{%- endif -%}
+    {%- if media.width >= 360 -%}{{ media | image_url: width: 360 }} 360w,{%- endif -%}
+    {%- if media.width >= 533 -%}{{ media | image_url: width: 533 }} 533w,{%- endif -%}
+    {%- if media.width >= 720 -%}{{ media | image_url: width: 720 }} 720w,{%- endif -%}
+    {%- if media.width >= 940 -%}{{ media | image_url: width: 940 }} 940w,{%- endif -%}
+    {%- if media.width >= 1066 -%}{{ media | image_url: width: 1066 }} 1066w,{%- endif -%}
+    {{ media | image_url }} {{ media.width }}w
+  "
   src="{{ media | image_url: width: 533 }}"
   alt="{{ media.alt }}"
-  class="adapt motion-reduce {{ class }}"
+  class="findify-adapt motion-reduce {{ class }}"
   loading="lazy"
   width="{{ media.width }}"
-  height="300px">
\ No newline at end of file
+  height="300px"
+>
diff --git a/snippets/findify-sorting.liquid b/snippets/findify-sorting.liquid
index da56b35..8d67915 100644
--- a/snippets/findify-sorting.liquid
+++ b/snippets/findify-sorting.liquid
@@ -8,12 +8,18 @@
     assign sorting_dropdown_btn_element_id = 'sorting-dropdown-btn'
     assign sorting_dropdown_body_element_id = 'sorting-dropdown-body'
   %}
-  <div id="{{ sorting_dropdown_body_element_id }}" class="findify-sorting desktop">
+  <div
+    id="{{ sorting_dropdown_body_element_id }}"
+    class="findify-sorting findify-desktop"
+  >
     <div class="findify-sorting-body">
       <span>
         {{ 'findify.sorting.sort_by' | t }}
       </span>
-      <button id="{{ sorting_dropdown_btn_element_id }}" class="findify-sorting-btn">
+      <button
+        id="{{ sorting_dropdown_btn_element_id }}"
+        class="findify-sorting-btn"
+      >
         {{ selectedLabel | url_decode }}
         {% render 'findify-icon-arrow' %}
       </button>
@@ -24,7 +30,11 @@
         {% assign label = parts[0] | url_decode %}
         {% assign field = parts[1] %}
         {% assign order = parts[2] %}
-        {% assign sorting_option_element_id = 'sorting-dropdown-option-' | append: field | append: '-' | append: order %}
+        {% assign sorting_option_element_id = 'sorting-dropdown-option-'
+          | append: field
+          | append: '-'
+          | append: order
+        %}
 
         {% if field == selectedField and order == selectedOrder %}
         {% else %}
@@ -41,7 +51,7 @@
           <script>
             const sortingOption = () => {
               const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
-              const openClass = 'open-right';
+              const openClass = 'findify-open-right';
               const sorting_option_element_id = '{{ sorting_option_element_id }}';
               const order = '{{ order }}';
               const field = '{{ field }}';
@@ -66,7 +76,7 @@
       const sortingDropdown = () => {
         const sorting_dropdown_btn_element_id = '{{ sorting_dropdown_btn_element_id }}';
         const sorting_dropdown_body_element_id = '{{ sorting_dropdown_body_element_id }}';
-        const openClass = 'open';
+        const openClass = 'findify-open';
 
         const onSortingDropdownBtnClickHandler = () => {
           const body = document.getElementById(sorting_dropdown_body_element_id);
@@ -101,17 +111,25 @@
     assign close_sorting_element_id = 'findify-close-btn'
     assign see_results_element_id = 'findify-see-results-btn'
   %}
-  <div id="findify-sorting-mobile" class="findify-sorting mobile">
+  <div id="findify-sorting-mobile" class="findify-sorting findify-mobile">
     <div class="findify-sorting-body">
-      <button id="{{ sorting_btn_element_id }}" class="findify-search-actions-toggle-btn">
+      <button
+        id="{{ sorting_btn_element_id }}"
+        class="findify-search-actions-toggle-btn"
+      >
         {% render 'findify-icon-sorting' %}
         {{ 'findify.sorting.sort_by' | t }}
       </button>
     </div>
 
-    <aside id="{{ sorting_sidepanel_element_id }}" class="findify-sorting-sidebar">
+    <aside
+      id="{{ sorting_sidepanel_element_id }}"
+      class="findify-sorting-sidebar"
+    >
       <button id="{{ close_sorting_element_id }}" class="findify-modal-header">
-        <span class="findify-modal-header-title">{{ 'findify.sorting.sort_by' | t }}</span>
+        <span class="findify-modal-header-title">
+          {{- 'findify.sorting.sort_by' | t -}}
+        </span>
         {% render 'findify-icon-cross' %}
       </button>
       <ul class="findify-sorting-mobile-list">
@@ -120,8 +138,16 @@
           {% assign label = parts[0] | url_decode %}
           {% assign field = parts[1] %}
           {% assign order = parts[2] %}
-          {% assign sorting_option_element_id = 'sorting-sidebar-option-' | append: field | append: '-' | append: order %}
-          <li tabindex="0" id="{{ sorting_option_element_id }}" class="findify-sorting-option">
+          {% assign sorting_option_element_id = 'sorting-sidebar-option-'
+            | append: field
+            | append: '-'
+            | append: order
+          %}
+          <li
+            tabindex="0"
+            id="{{ sorting_option_element_id }}"
+            class="findify-sorting-option"
+          >
             <input
               type="radio"
               {% if field == selectedField and order == selectedOrder %}
@@ -134,7 +160,7 @@
           <script>
             const sortingOption = () => {
               const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
-              const openClass = 'open-right';
+              const openClass = 'findify-open-right';
               const sorting_option_element_id = '{{ sorting_option_element_id }}';
               const order = '{{ order }}';
               const field = '{{ field }}';
@@ -145,7 +171,7 @@
 
                 const containerElement = document.getElementById(sorting_sidepanel_element_id);
                 containerElement.classList.remove(openClass);
-                document.documentElement.classList.remove('no-scroll');
+                document.documentElement.classList.remove('findify-no-scroll');
               };
 
               const option = document.getElementById(sorting_option_element_id);
@@ -165,12 +191,12 @@
       const sorting_sidepanel_element_id = '{{ sorting_sidepanel_element_id }}';
       const close_sorting_element_id = '{{ close_sorting_element_id }}';
       const see_results_element_id = '{{ see_results_element_id }}';
-      const openClass = 'open-right';
+      const openClass = 'findify-open-right';
 
       const toggleFilterSection = () => {
         const containerElement = document.getElementById(sorting_sidepanel_element_id);
         containerElement.classList.toggle(openClass);
-        document.documentElement.classList.toggle('no-scroll');
+        document.documentElement.classList.toggle('findify-no-scroll');
       };
 
       const sortingToggler = document.getElementById(sorting_btn_element_id);
@@ -185,7 +211,7 @@
       /*
        * Add additional classes conditioned by media queries
        */
-      const mobileContainerClasses = ['findify-modal', 'animated-right', 'right'];
+      const mobileContainerClasses = ['findify-modal', 'findify-animated-right', 'findify-right'];
       const container = document.getElementById(sorting_sidepanel_element_id);
       mobileContainerClasses.forEach((c) => container?.classList.add(c));
     };
diff --git a/snippets/findify-toolbar-desktop.liquid b/snippets/findify-toolbar-desktop.liquid
index acabc32..7d5b28b 100644
--- a/snippets/findify-toolbar-desktop.liquid
+++ b/snippets/findify-toolbar-desktop.liquid
@@ -3,10 +3,13 @@
   assign filter_component_id = filter_component_id
 %}
 
-<div class="findify-search-header desktop">
+<div class="findify-search-header findify-desktop">
   <div class="findify-search-header-toolbar">
     <div class="findify-search-header-toolbar-actions">
-      <button id="{{ filter_toggle_sidebar_element_id }}" class="findify-search-actions-toggle-btn">
+      <button
+        id="{{ filter_toggle_sidebar_element_id }}"
+        class="findify-search-actions-toggle-btn"
+      >
         {% render 'findify-icon-filter' %}
         {{ 'findify.filters.filter_by' | t }}
       </button>
@@ -19,7 +22,12 @@
     %}
 
     <div>
-      {% render 'findify-sorting', options: sort_options, default: default_sort_by, selected: sort_by, is_modal: false %}
+      {% render 'findify-sorting',
+        options: sort_options,
+        default: default_sort_by,
+        selected: sort_by,
+        is_modal: false
+      %}
     </div>
   </div>
   {% if active_filters != 'none' %}
@@ -27,7 +35,7 @@
       {% render 'findify-filter-breadcrumb',
         active_filters: active_filters,
         color_layout: color_layout,
-        component_id: 'desktop-toolbar',
+        component_id: 'findify-desktop-toolbar',
         sidebar_component_id: filter_component_id
       %}
     </div>
@@ -38,7 +46,7 @@
   const filterSidebar = () => {
     const filter_toggle_sidebar_element_id = '{{ filter_toggle_sidebar_element_id }}';
     const filter_component_id = '{{ filter_component_id }}';
-    const openClass = 'open';
+    const openClass = 'findify-open';
 
     const toggleFilterSection = () => {
       const containerElement = document.getElementById(filter_component_id);
diff --git a/snippets/findify-toolbar-mobile.liquid b/snippets/findify-toolbar-mobile.liquid
index 2fc8dab..64ea3a8 100644
--- a/snippets/findify-toolbar-mobile.liquid
+++ b/snippets/findify-toolbar-mobile.liquid
@@ -3,7 +3,7 @@
   assign filter_component_id = filter_component_id
 %}
 
-<div class="findify-search-header mobile">
+<div class="findify-search-header findify-mobile">
   {%
     render 'findify-query' terms: terms, results_count: results_count, is_collection: is_collection,       , terms: terms
     , corrected_q: corrected_q
@@ -11,7 +11,10 @@
   %}
   <div class="findify-search-header-toolbar">
     <div class="findify-search-header-toolbar-actions">
-      <button id="{{ filter_toggle_sidepanel_element_id }}" class="findify-search-actions-toggle-btn">
+      <button
+        id="{{ filter_toggle_sidepanel_element_id }}"
+        class="findify-search-actions-toggle-btn"
+      >
         {% render 'findify-icon-filter' %}
         FILTER BY
       </button>
@@ -26,12 +29,12 @@
   const filterSidePanel = () => {
     const filter_toggle_sidepanel_element_id = '{{ filter_toggle_sidepanel_element_id }}';
     const filter_component_id = '{{ filter_component_id }}';
-    const openClass = 'open-left';
+    const openClass = 'findify-open-left';
     const containerElement = document.getElementById(filter_component_id);
 
     const toggleFilterSection = () => {
       containerElement.classList.toggle(openClass);
-      document.documentElement.classList.toggle('no-scroll');
+      document.documentElement.classList.toggle('findify-no-scroll');
     };
 
     const filterToggleSidepanelElement = document.getElementById(filter_toggle_sidepanel_element_id);
@@ -39,13 +42,13 @@
     document.addEventListener('keyup', (e) => {
       if (e.code == 'Escape') {
         containerElement.classList.remove(openClass);
-        document.documentElement.classList.remove('no-scroll');
+        document.documentElement.classList.remove('findify-no-scroll');
       }
     });
     /*
      * Add additional classes conditioned by media queries
      */
-    const mobileContainerClasses = ['findify-modal', 'animated-left', 'left'];
+    const mobileContainerClasses = ['findify-modal', 'findify-animated-left', 'findify-left'];
     const container = document.getElementById(filter_component_id);
     mobileContainerClasses.forEach((c) => container?.classList.add(c));
   };

From 5437f1c40a7309e03c19066c5102919ccffe3d7b Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Thu, 12 Sep 2024 12:25:29 +0300
Subject: [PATCH 06/16] reverted the structure

---
 sections/findify-autocomplete.liquid | 121 ++++++++++++++++-----------
 1 file changed, 71 insertions(+), 50 deletions(-)

diff --git a/sections/findify-autocomplete.liquid b/sections/findify-autocomplete.liquid
index e422155..b9171cd 100644
--- a/sections/findify-autocomplete.liquid
+++ b/sections/findify-autocomplete.liquid
@@ -1,7 +1,9 @@
 {% include 'findify-autocomplete-connector' %}
 
 {%- if query != '' -%}
-  {%- assign suggestionsTitle = 'findify.autocomplete.search_suggestions' | t -%}
+  {%- assign suggestionsTitle = 'findify.autocomplete.search_suggestions'
+    | t
+  -%}
   {%- assign productsTitle = 'findify.autocomplete.product_matches' | t -%}
 {%- else -%}
   {%- assign suggestionsTitle = 'findify.autocomplete.trending_searches' | t -%}
@@ -12,58 +14,77 @@
   id="findify-autocomplete"
   class="findify-autocomplete findify-autocomplete-fullscreen findify-hidden {% if desktop_suggestion_template == 'horizontal' %} findify-suggestions-horizontal {% endif %}"
 >
-  {% if results_count == '0' %}
-    <div class="findify-zero-result-container">
-      <h1>{{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"</h1>
-      <h2>{{ 'findify.search.no_results_message' | t }}</h2>
-    </div>
-  {% else %}
-    <div class="findify-autocomplete-content">
-      <div
-        class="
-          findify-suggestions-wrapper
-          {% if desktop_suggestion_template == 'horizontal' %} findify-suggestions-horizontal {% endif %}
-          findify-mobile-{{ mobile_suggestion_template }}
-        "
-      >
-        <h2>{{ suggestionsTitle }}</h2>
-        <ul>
-          {% for suggestion in suggestions %}
-            {%- assign queryHTML = '<span>' | append: query | append: '</span>' -%}
-            {%- assign formattedSuggestion = suggestion | replace: query, queryHTML -%}
-            <li class="{% if query != "" %} findify-suggestion-item {% endif %}">
-              <a
-                class="findify-suggestion"
-                href="/{{ basepath }}?q={{ suggestion }}"
-                data-findify-suggestion
-              >
-                {{ formattedSuggestion | url_decode }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
+{% if results_count == "0" %}
+  <div class="findify-zero-result-container">
+    <h1>
+      {{ 'findify.search.no_results_for' | t }} "{{ query | url_decode }}"
+    </h1>
+    <h2>{{ 'findify.search.no_results_message' | t }}</h2>
+  </div>
+{% else %}
+  <div class="findify-autocomplete-content">
+    <div class="
+      findify-suggestions-wrapper 
+      {% if desktop_suggestion_template == 'horizontal' %} findify-suggestions-horizontal {% endif %}
+      findify-mobile-{{ mobile_suggestion_template }}
+    ">
+      <h2>{{ suggestionsTitle }}</h2>
+      <ul>
+        {% for suggestion in suggestions %}
+          {%- assign queryHTML = '<span>'
+            | append: query
+            | append: '</span>'
+          -%}
+          {%- assign formattedSuggestion = suggestion
+            | replace: query, queryHTML
+          -%}
+          <li class="{% if query != "" %} findify-suggestion-item {% endif %}">
+            <a
+              class="findify-suggestion"
+              href="/{{ basepath }}?q={{ suggestion }}"
+              data-findify-suggestion
+            >
+              {{ formattedSuggestion |  url_decode }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
 
-        {% render 'findify-autocomplete-content-block', contents_param: contents_param, content: contents[0] %}
-      </div>
+      {% render 'findify-autocomplete-content-block',
+        contents_param: contents_param,
+        content: contents[0]
+      %}
+    </div>
 
-      <div class="findify-products-wrapper">
-        <div class="findify-autocomplete-title-wrapper">
-          <h2>{{ productsTitle }}</h2>
-          {% render 'findify-autocomplete-view-all', basepath: basepath, query: query, position: 'top' %}
-        </div>
-        <div
-          id="findify-autocomplete-products"
-          class="findify-products-container findify-mobile-products-per-row-{{ mobile_products_per_row }}"
-        />
-        <button class="findify-close-autocomplete">
-          {% render 'findify-icon-cross' %}
-        </button>
+    <div class="findify-products-wrapper">
+      <div class="findify-autocomplete-title-wrapper">
+        <h2>{{ productsTitle }}</h2>
+        {% render 'findify-autocomplete-view-all',
+          basepath: basepath,
+          query: query,
+          position: 'top'
+        %}
       </div>
-
-      {% render 'findify-autocomplete-content-block', contents_param: contents_param, content: contents[1] %}
+      <div 
+        id="findify-autocomplete-products" 
+        class="findify-products-container findify-mobile-products-per-row-{{ mobile_products_per_row }}"
+      />
+      <button class="findify-close-autocomplete">
+        {% render 'findify-icon-cross' %}
+      </button>
     </div>
-    {% render 'findify-autocomplete-view-all', basepath: basepath, query: query, position: 'bottom' %}
-  {% endif %}
+
+    {% render 'findify-autocomplete-content-block',
+      contents_param: contents_param,
+      content: contents[1]
+    %}
+  </div>
+  {% render 'findify-autocomplete-view-all',
+    basepath: basepath,
+    query: query,
+    position: 'bottom'
+  %}
+{% endif %}
 
   <script>
     /* IMPORTANT: Script tags are executed within this file element. */
@@ -83,4 +104,4 @@
 {% endstylesheet %}
 
 {% javascript %}
-{% endjavascript %}
+{% endjavascript %}
\ No newline at end of file

From dcc01bdefb9c4dec675bf61ef2cf9583eae8f908 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Fri, 13 Sep 2024 12:46:00 +0300
Subject: [PATCH 07/16] updated classes

---
 assets/findify-content-card.css      | 4 ++--
 assets/findify-filter-breadcrumb.css | 2 +-
 assets/findify-filter.css            | 4 ++--
 assets/findify-product-card.css      | 5 +++++
 assets/findify-sidebar-mobile.css    | 4 ++--
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/assets/findify-content-card.css b/assets/findify-content-card.css
index ef7cad8..e700c34 100644
--- a/assets/findify-content-card.css
+++ b/assets/findify-content-card.css
@@ -1,10 +1,10 @@
-.adapt-content-img {
+.findify-adapt-content-img {
   width: 100%;
   aspect-ratio: 2/1;
   object-fit: cover;
 }
 
-.content-fallback-img {
+.findify-content-fallback-img {
   background: #f9f9f9;
   display: flex;
   justify-content: center;
diff --git a/assets/findify-filter-breadcrumb.css b/assets/findify-filter-breadcrumb.css
index 995c105..9b7582a 100644
--- a/assets/findify-filter-breadcrumb.css
+++ b/assets/findify-filter-breadcrumb.css
@@ -22,7 +22,7 @@
   width: 100px;
 }
 
-.findify-filters-breadcrumb-item .solid-circle,
+.findify-filters-breadcrumb-item .findify-solid-circle,
 .findify-filters-breadcrumb-item .findify-circle-with-label {
   height: 25px;
   width: 25px;
diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index 5ba021c..10230ce 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -445,8 +445,8 @@ button {
     justify-content: unset;
   }
   /* Ellipsis for mobile, increase with maximum */
-  .findify-filters-checkbox-item-value > span:not(.solid-circle),
-  .findify-filters--checkbox-nested-value > span:not(.solid-circle) {
+  .findify-filters-checkbox-item-value > span:not(.findify-solid-circle),
+  .findify-filters--checkbox-nested-value > span:not(.findify-solid-circle) {
     width: 250px;
   }
 }
diff --git a/assets/findify-product-card.css b/assets/findify-product-card.css
index 82352ff..28137c8 100644
--- a/assets/findify-product-card.css
+++ b/assets/findify-product-card.css
@@ -73,3 +73,8 @@
   font-style: italic;
   font-size: smaller;
 }
+@media (max-width: 576px) {
+  .findify-product-card {
+    min-height: 300px;
+  }  
+}
\ No newline at end of file
diff --git a/assets/findify-sidebar-mobile.css b/assets/findify-sidebar-mobile.css
index d3cd3b6..8535af2 100644
--- a/assets/findify-sidebar-mobile.css
+++ b/assets/findify-sidebar-mobile.css
@@ -86,7 +86,7 @@
     background: #5396ed;
     color: #fff;
     text-transform: uppercase;
-    position: absolute;
+    position: fixed;
     bottom: 0;
   }
 }
@@ -163,7 +163,7 @@
     background: #5396ed;
     color: #fff;
     text-transform: uppercase;
-    position: absolute;
+    position: fixed;
     bottom: 0;
   } 
 }
\ No newline at end of file

From 003aacd32d3a98cf80b99c76ef5a11712c18a271 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Mon, 16 Sep 2024 11:37:41 +0300
Subject: [PATCH 08/16] fixed OOB bugs

---
 assets/findify-autocomplete.js          | 2 ++
 assets/findify-filter.css               | 3 +++
 assets/findify-sorting.css              | 2 +-
 sections/findify-recommendation.liquid  | 2 --
 snippets/findify-filter-checkbox.liquid | 1 -
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/findify-autocomplete.js b/assets/findify-autocomplete.js
index c4c6eaa..8c394c5 100644
--- a/assets/findify-autocomplete.js
+++ b/assets/findify-autocomplete.js
@@ -95,6 +95,8 @@ const initFindifyAutocompleteEvents = () => {
     const top = getBottom(input) + 2;
     const autocomplete = document.querySelector('.findify-autocomplete');
     autocomplete.style.top = `${top}px`;
+    autocomplete.style.height = `max-content`;
+    autocomplete.style.maxHeight = `calc(100vh - ${top}px)`;
   };
 
   const closeAutocomplete = (e, isEscape) => {
diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index 10230ce..f8aeeb5 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -483,6 +483,9 @@ button {
   outline: none;
 }
 
+.findify-price-range-input-container .money {
+  white-space: nowrap;
+}
 /* Chrome, Safari, Edge, Opera */
 .findify-price-range-input::-webkit-outer-spin-button,
 .findify-price-range-input::-webkit-inner-spin-button {
diff --git a/assets/findify-sorting.css b/assets/findify-sorting.css
index 5d1a1c0..37f67a7 100644
--- a/assets/findify-sorting.css
+++ b/assets/findify-sorting.css
@@ -55,7 +55,7 @@
   right: 0;
   top: 100%;
   margin: 0;
-  z-index: 5;
+  z-index: 2;
 }
 
 .findify-sorting.findify-open .findify-sorting-list {
diff --git a/sections/findify-recommendation.liquid b/sections/findify-recommendation.liquid
index 29df894..eb8ebd0 100644
--- a/sections/findify-recommendation.liquid
+++ b/sections/findify-recommendation.liquid
@@ -19,10 +19,8 @@
 
   <script>
       const selector = "#{{ recommendation_id }} .swiper";
-
       const swiper = new Swiper(selector, {
         direction: "horizontal",
-        loop: true,
         pagination: {
           el: ".swiper-pagination",
           type: "bullets",
diff --git a/snippets/findify-filter-checkbox.liquid b/snippets/findify-filter-checkbox.liquid
index f749f24..5b04916 100644
--- a/snippets/findify-filter-checkbox.liquid
+++ b/snippets/findify-filter-checkbox.liquid
@@ -40,7 +40,6 @@
     const filterClickHandler = (e) => {
       e.preventDefault();
       e.stopPropagation();
-      document.documentElement.classList.remove('findify-no-scroll');
       findify.filters.update({ value, type, name });
     };
 

From 60a4bee1c2ba6760e0b4e00b40943725a65ae115 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Mon, 16 Sep 2024 12:05:20 +0300
Subject: [PATCH 09/16] added last changes from release

---
 sections/findify-product-card-old.liquid    |  20 ++++
 sections/findify-product-card.liquid        |  77 ++++---------
 sections/findify-product-list.liquid        |  25 +++++
 sections/findify-product.liquid             |   4 +
 snippets/findify-product-card-params.liquid | 113 ++++++++++++++++++++
 snippets/findify-product-card.liquid        |  66 ++++++++++++
 6 files changed, 247 insertions(+), 58 deletions(-)
 create mode 100644 sections/findify-product-card-old.liquid
 create mode 100644 sections/findify-product-list.liquid
 create mode 100644 sections/findify-product.liquid
 create mode 100644 snippets/findify-product-card-params.liquid
 create mode 100644 snippets/findify-product-card.liquid

diff --git a/sections/findify-product-card-old.liquid b/sections/findify-product-card-old.liquid
new file mode 100644
index 0000000..99fe7d1
--- /dev/null
+++ b/sections/findify-product-card-old.liquid
@@ -0,0 +1,20 @@
+{%- liquid
+  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&"
+  assign findify_product = page_url | split: "sections=findify-product-card&" | last
+  include 'findify-product-card-params'
+-%}
+
+{%- render 'findify-product-card'
+  , id: id
+  , class: class
+  , widget: widget
+  , page: page
+  , product_url: product_url
+  , current_variant: current_variant,
+  , product: product,
+  , showHoverImage: showHoverImage
+  , brand: brand,
+  , reviews: reviews
+  , reviews_count: reviews_count
+  , selected_variant_id: selected_variant_id
+-%}
\ No newline at end of file
diff --git a/sections/findify-product-card.liquid b/sections/findify-product-card.liquid
index ac12986..7acb3c6 100644
--- a/sections/findify-product-card.liquid
+++ b/sections/findify-product-card.liquid
@@ -1,59 +1,20 @@
-{%- include 'findify-product-card-connector' -%}
+{%- liquid
+  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&"
+  assign findify_product = page_url | split: "sections=findify-product-card&" | last
+  include 'findify-product-card-params'
+-%}
 
-<div
-  id="{{ id }}"
-  product-id="product-{{ id }}"
-  class="findify-product-card {{ class }} {{ widget }}_{{ id }}"
-  {% if page != blank %}
-    page="{{ page }}"
-  {% endif %}
->
-  <a class="findify-product-link" href="{{ product_url }}">
-    <div class="findify-product-card__image">
-      <div class="findify-image-container">
-        {% if current_variant.featured_media != null %}
-          {% render 'findify-product-image', media: current_variant.featured_media, class: 'first-image' %}
-        {% else %}
-          {% render 'findify-product-image', media: product.featured_media, class: 'first-image' %}
-        {% endif %}
-        {%- if product.media[1] != null and showHoverImage == 'true' -%}
-          {% render 'findify-product-image', media: product.media[1], class: 'findify-second-image' %}
-        {%- endif -%}
-
-        {% comment %} <img width="100%" height="100%" class="findify-product-swatch-image" hidden /> {% endcomment %}
-      </div>
-    </div>
-    <div class="findify-content-wrapper">
-      {% if brand %}
-        <div class="findify-product-brand">{{ brand }}</div>
-      {% endif %}
-
-      {% comment %}
-        {% render 'findify-product-swatches-color',
-            product_url: product_url,
-            product: product,
-            colormap: colormap,
-            variants: variants,
-        %}
-      {% endcomment %}
-
-      <div class="findify-product-title findify-cut-text">
-        <label>{{ product.title }}</label>
-      </div>
-      {% render 'findify-product-price', product: product %}
-      {% if reviews %}
-        {% render 'findify-rating', value: reviews, count: reviews_count %}
-      {% endif %}
-    </div>
-  </a>
-
-  <script>
-    /* IMPORTANT: Script tags are executed within this file element. */
-    const id = "{{id}}";
-    const selected_variant_id = "{{selected_variant_id}}";
-    const widget = "{{widget}}";
-    const page = "{{page}}"
-
-    initOnProductCardClick(id, page, { widget, selected_variant_id });
-  </script>
-</div>
+{%- render 'findify-product-card'
+  , id: id
+  , class: class
+  , widget: widget
+  , page: page
+  , product_url: product_url
+  , current_variant: current_variant,
+  , product: product,
+  , showHoverImage: showHoverImage
+  , brand: brand,
+  , reviews: reviews
+  , reviews_count: reviews_count
+  , selected_variant_id: selected_variant_id
+-%}
\ No newline at end of file
diff --git a/sections/findify-product-list.liquid b/sections/findify-product-list.liquid
new file mode 100644
index 0000000..97a077c
--- /dev/null
+++ b/sections/findify-product-list.liquid
@@ -0,0 +1,25 @@
+{%- liquid
+  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&"
+  assign findify_product_list_params = page_url | split: "sections=findify-product-list&" | last | url_decode | replace: 'ç', '&'
+  assign findify_product_list = findify_product_list_params | split: "§"
+-%}
+
+<div>
+    {% for findify_product in findify_product_list %}
+        {% include 'findify-product-card-params' %}
+        {%- render 'findify-product-card'
+  , id: id
+  , class: class
+  , widget: widget
+  , page: page
+  , product_url: product_url
+  , current_variant: current_variant,
+  , product: product,
+  , showHoverImage: showHoverImage
+  , brand: brand,
+  , reviews: reviews
+  , reviews_count: reviews_count
+  , selected_variant_id: selected_variant_id
+-%}
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/sections/findify-product.liquid b/sections/findify-product.liquid
new file mode 100644
index 0000000..6878b15
--- /dev/null
+++ b/sections/findify-product.liquid
@@ -0,0 +1,4 @@
+{% liquid
+  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&" | replace: '%7C', '|' | replace: '%20', ' '
+  assign query_parameters = page_url | split: "sections=findify-product-list&" | last
+%}
\ No newline at end of file
diff --git a/snippets/findify-product-card-params.liquid b/snippets/findify-product-card-params.liquid
new file mode 100644
index 0000000..d266dc0
--- /dev/null
+++ b/snippets/findify-product-card-params.liquid
@@ -0,0 +1,113 @@
+{%- liquid
+  # Product template settings
+  if findify_product contains "class="
+    assign class = findify_product | split: "class=" | last | split: "&" | first
+  endif
+  assign widget = findify_product | split: "widget=" | last | split: "&" | first
+
+  # Product Collection Slot
+  if findify_product contains "collectionSlot="
+    assign collection_slot = findify_product | split: "collectionSlot=" | last | split: "&" | first
+  endif
+  # Product Show Hover Image
+  if findify_product contains "showHoverImage="
+    assign showHoverImage = findify_product | split: "showHoverImage=" | last | split: "&" | first
+  endif
+
+  # Product metadata
+  assign colormap = findify_product | split: "colormap=" | last | split: "&" | first | split: ';'
+  assign position = findify_product | split: "position=" | last | split: "&" | first
+  assign page = page_url | split: 'page=' | last | split: '&' | first | plus: 0
+
+  if findify_product contains "handler="
+    assign handler = findify_product | split: "handler=" | last | split: "&" | first | url_decode
+    assign product = all_products[handler]
+  endif
+
+  # Product Findify variants fields
+  if findify_product contains "variants="
+    assign variants_parameters = findify_product | split: "variants=" | last | split: "&" | first
+    assign variants = variants_parameters | url_decode | split: "^"
+    # for variant in variants and then parse and assign values
+
+    # Variants may have same property as products, and so "regexes" may conflict picking wrong values, removing variants from here
+    assign variants_whole_block = "variants=" | append: variants_parameters
+    assign findify_product_splitted_by_variants = findify_product | split: variants_whole_block
+    assign findify_product_leftside = findify_product_splitted_by_variants[0]
+    assign findify_product_rightside = findify_product_splitted_by_variants[1] | replace_first: "&", ""
+    assign findify_product = findify_product_leftside | append: findify_product_rightside
+  endif
+
+  # Product Findify fields
+  if findify_product contains "availability="
+    assign availability = findify_product | split: "availability=" | last | split: "&" | first
+  endif
+  if findify_product contains "color="
+    assign colors = findify_product | split: "color=" | last | split: "&" | first | url_decode | split: ";"
+  endif
+  if findify_product contains "selected_variant_id="
+    assign selected_variant_id = findify_product | split: "selected_variant_id=" | last | split: "&" | first
+    for variant in product.variants
+      assign current_variant_id_number = selected_variant_id | plus: 0
+      if variant.id == current_variant_id_number
+        assign current_variant = variant
+      endif
+    endfor
+  endif
+  if findify_product contains "item_group_id="
+    assign item_group_id = findify_product | split: "item_group_id=" | last | split: "&" | first
+  endif
+  if findify_product contains "id="
+    assign id = findify_product | split: "id=" | last | split: "&" | first
+  endif
+  if findify_product contains "category="
+    assign category = findify_product | split: "category=" | last | split: "&" | first | url_decode
+  endif
+  if findify_product contains "price="
+    assign price = findify_product | split: "price=" | last | split: "&" | first
+  endif
+  # Manipulating product.url to add variant and collection awareness with locale awareness
+  if product.url contains "?"
+    assign product_url_dto = product.url | append: "&variant=" | append: selected_variant_id
+  else
+    assign product_url_dto = product.url | append: "?variant=" | append: selected_variant_id
+  endif
+  if product_url_dto contains routes.root_url and routes.root_url != '/'
+    assign product_url_dto = product_url_dto | replace: routes.root_url, ''
+  endif
+  assign product_url = routes.root_url | append: collection_slot | append: product_url_dto | replace: '//', '/'
+  if findify_product contains "quantity="
+    assign quantity = findify_product | split: "quantity=" | last | split: "&" | first
+  endif
+  if findify_product contains "size="
+    assign sizes = findify_product | split: "size=" | last | split: "&" | first | split: "^" | url_decode
+  endif
+  if findify_product contains "sku="
+    assign sku = findify_product | split: "sku=" | last | split: "&" | first
+  endif
+  if findify_product contains "tags="
+    assign tags = findify_product | split: "tags=" | last | split: "&" | first
+  endif
+  if findify_product contains "stickers="
+    assign stickers = findify_product | split: "stickers=" | last | split: "&" | first
+  endif
+  if findify_product contains "reviews.count="
+    assign reviews_count = findify_product | split: "reviews.count=" | last | split: "&" | first
+  endif
+  if findify_product contains "reviews.average_score="
+    assign reviews = findify_product | split: "reviews.average_score=" | last | split: "&" | first
+  endif
+  if findify_product contains "brand="
+    assign brand = findify_product | split: "brand=" | last | split: "&" | first | url_decode
+  endif
+  if findify_product contains "title="
+    assign title = findify_product | split: "title=" | last | split: "&" | first | url_decode
+  endif
+  # Product Findify custom fields
+  if findify_product contains "custom_fields="
+    assign custom_fields = findify_product | split: "custom_fields=" | last | split: "&" | first
+    # if custom_fields contains "example_field"
+    # assign example_field = custom_fields | split: "example_field=" | last | split: "~" | first | url_decode
+    # endif
+  endif
+-%}
\ No newline at end of file
diff --git a/snippets/findify-product-card.liquid b/snippets/findify-product-card.liquid
new file mode 100644
index 0000000..619cf9e
--- /dev/null
+++ b/snippets/findify-product-card.liquid
@@ -0,0 +1,66 @@
+<div
+  id="{{ id }}"
+  product-id="product-{{ id }}"
+  class="findify-product-card {{ class }} {{ widget }}_{{ id }}"
+  {% if page != blank %}
+  page="{{ page }}"
+  {% endif %}>
+  <a class="findify-product-link" href={{ product_url }}>
+    <div class='findify-product-card__image'>
+      <div class='findify-image-container'>
+        {% if current_variant.featured_media != null %}
+          {% render 'findify-product-image'
+            , media: current_variant.featured_media
+            , class: 'first-image' %}
+        {% else %}
+          {% render 'findify-product-image'
+            , media: product.featured_media
+            , class: 'first-image' %}
+        {% endif %}
+        {%- if product.media[1] != null and showHoverImage == 'true' -%}
+          {% render 'findify-product-image'
+            , media: product.media[1]
+            , class: 'findify-second-image' %}
+        {%- endif -%}
+
+      {% comment %} <img width="100%" height="100%" class="findify-product-swatch-image" hidden /> {% endcomment %}
+      </div>
+    </div>
+    <div class="findify-content-wrapper">
+      {% if brand %}
+        <div class="findify-product-brand">{{ brand }}</div>
+      {% endif %}
+
+      {% comment %} {% render 'findify-product-swatches-color',
+                              product_url: product_url,
+                              product: product,
+                              colormap: colormap,
+                              variants: variants,
+                      %} {% endcomment %}
+
+
+      <div class='findify-product-title findify-cut-text'>
+        <label>{{ product.title }}</label>
+      </div>
+      {% render 'findify-product-price'
+        , product: product %}
+      {% if reviews %}
+        {% render 'findify-rating'
+          , value: reviews
+          , count: reviews_count %}
+      {% endif %}
+    </div>
+  </a>
+
+
+  <script>
+        /* IMPORTANT: Script tags are executed within this file element. */
+        const id = "{{id}}";
+        const selected_variant_id = "{{selected_variant_id}}";
+        const widget = "{{widget}}";
+        const page = "{{page}}"
+
+        initOnProductCardClick(id, page, { widget, selected_variant_id });
+  </script>
+
+</div>
\ No newline at end of file

From f9e5f83dea440c9ee3ff7a3550a5806ca22e2f77 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Mon, 16 Sep 2024 12:11:27 +0300
Subject: [PATCH 10/16] deleted old file

---
 sections/findify-product-card-old.liquid | 20 --------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 sections/findify-product-card-old.liquid

diff --git a/sections/findify-product-card-old.liquid b/sections/findify-product-card-old.liquid
deleted file mode 100644
index 99fe7d1..0000000
--- a/sections/findify-product-card-old.liquid
+++ /dev/null
@@ -1,20 +0,0 @@
-{%- liquid
-  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&"
-  assign findify_product = page_url | split: "sections=findify-product-card&" | last
-  include 'findify-product-card-params'
--%}
-
-{%- render 'findify-product-card'
-  , id: id
-  , class: class
-  , widget: widget
-  , page: page
-  , product_url: product_url
-  , current_variant: current_variant,
-  , product: product,
-  , showHoverImage: showHoverImage
-  , brand: brand,
-  , reviews: reviews
-  , reviews_count: reviews_count
-  , selected_variant_id: selected_variant_id
--%}
\ No newline at end of file

From 4daa88ba4224cb71367411e6beede7a32b8aa3bb Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Mon, 16 Sep 2024 12:20:36 +0300
Subject: [PATCH 11/16] added div

---
 snippets/findify-product-card.liquid | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/snippets/findify-product-card.liquid b/snippets/findify-product-card.liquid
index 786f6ac..8936ba6 100644
--- a/snippets/findify-product-card.liquid
+++ b/snippets/findify-product-card.liquid
@@ -62,5 +62,4 @@
 
         initOnProductCardClick(id, page, { widget, selected_variant_id });
   </script>
-
-
+</div>
\ No newline at end of file

From 77b5ee345b532bb0971f1efc14a02574f0ff401a Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Mon, 16 Sep 2024 12:26:28 +0300
Subject: [PATCH 12/16] removed old file

---
 sections/findify-product.liquid | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 sections/findify-product.liquid

diff --git a/sections/findify-product.liquid b/sections/findify-product.liquid
deleted file mode 100644
index 6878b15..0000000
--- a/sections/findify-product.liquid
+++ /dev/null
@@ -1,4 +0,0 @@
-{% liquid
-  assign page_url = content_for_header | split: '"pageurl":"' | last | split: '"' | first | split: request.host | last | replace: "\/", "/" | replace: "\u0026", "&" | replace: '%7C', '|' | replace: '%20', ' '
-  assign query_parameters = page_url | split: "sections=findify-product-list&" | last
-%}
\ No newline at end of file

From 09f2bc690891210ad0ada81eb685bb77711be106 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Tue, 17 Sep 2024 12:45:29 +0300
Subject: [PATCH 13/16] added fix for breadcrumbs

---
 snippets/findify-filter-breadcrumb.liquid | 239 ++++++++++++----------
 1 file changed, 128 insertions(+), 111 deletions(-)

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index 8ee3374..5b08c4b 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -1,126 +1,143 @@
 {% assign breadcrumb_container_element_id = 'breadcrumb-container-' | append: component_id | replace: ' ', '' %}
-<div id="{{ breadcrumb_container_element_id }}" class="findify-filters-breadcrumbs-body">
-  {%- assign filters = active_filters | split: ";" -%}
-  {% for filter in filters %}
-    {% liquid
-      assign parts = filter | split: '~'
-      assign name = parts[0]
-      assign type = parts[1]
-
-      if type == 'range'
-        if name == 'price'
-          assign from_props = parts[2] | split: ':'
-          assign from = from_props | first
-          assign fromDisplay = from_props | last
-          assign to_props = parts[3] | split: ':'
-          assign to = to_props | first
-          assign toDisplay = to_props | last
+{% assign filters = active_filters | split: ';' %}
+{% assign breadcrumbs = '' %}
+{% for filter in filters %}
+  {% assign parts = filter | split: '~' %}
+  {% assign type = parts[1] %}
+
+  {% if type != 'undefined' %}
+    {% if breadcrumbs != '' %}
+      {% assign breadcrumbs = breadcrumbs | append: ',' %}
+    {% endif %}
+    {% assign breadcrumbs = breadcrumbs | append: filter %}
+  {% endif %}
+{% endfor %}
+
+{% assign breadcrumbs = breadcrumbs | split: ',' %}
+{% assign breadcrumbs_size = breadcrumbs | size %}
+{% if breadcrumbs_size > 0 %}
+  <div id="{{ breadcrumb_container_element_id }}" class="findify-filters-breadcrumbs-body">
+    {% for filter in filters %}
+      {% liquid
+        assign parts = filter | split: '~'
+        assign name = parts[0]
+        assign type = parts[1]
+
+        if type == 'range'
+          if name == 'price'
+            assign from_props = parts[2] | split: ':'
+            assign from = from_props | first
+            assign fromDisplay = from_props | last
+            assign to_props = parts[3] | split: ':'
+            assign to = to_props | first
+            assign toDisplay = to_props | last
+          else
+            assign from = parts[2]
+            assign fromDisplay = parts[2]
+            assign to = parts[3]
+            assign toDisplay = parts[3]
+          endif
+
+          assign value = 'from|' | append: from | append: '-to|' | append: to
+          assign reviewValue = from | append: 'to' | append: to
         else
-          assign from = parts[2]
-          assign fromDisplay = parts[2]
-          assign to = parts[3]
-          assign toDisplay = parts[3]
+          assign value = parts[2] | url_decode
         endif
 
-        assign value = 'from|' | append: from | append: '-to|' | append: to
-        assign reviewValue = from | append: 'to' | append: to
-      else
-        assign value = parts[2] | url_decode
-      endif
-
-      assign breadcrumb_element_id = 'breadcrumb-' | append: component_id | append: '-' | append: value | replace: ' ', ''
-    %}
-
-    <div
-      tabindex="0"
-      id="{{ breadcrumb_element_id }}"
-      class="findify-filters-breadcrumb-item"
-      selected="true"
-      type="{{type}}"
-      name="{{name}}"
-      value="{{value}}">
-      {% case type %}
-        {% when 'range' %}
-          {% case name %}
-            {% when 'reviews.average_score' %}
-              {% render 'findify-filter-rating-value', selected: true, value: from | append: 'to' | append: to %}
-            {% else %}
-              {% liquid
-                if name == 'price'
-                  assign toDisplay = toDisplay | times: 100 | money
-                  assign fromDisplay = fromDisplay | times: 100 | money
-                endif
-              %}
-              {% if fromDisplay == 'undefined' %}
-                <span>{{ 'findify.filters.under' | t }} {{ toDisplay }}</span>
-              {% elsif toDisplay == 'undefined' %}
-                <span>{{ fromDisplay }} {{ 'findify.filters.and_up' | t }}</span>
+        assign breadcrumb_element_id = 'breadcrumb-' | append: component_id | append: '-' | append: value | replace: ' ', ''
+      %}
+
+      <div
+        tabindex="0"
+        id="{{ breadcrumb_element_id }}"
+        class="findify-filters-breadcrumb-item"
+        selected="true"
+        type="{{type}}"
+        name="{{name}}"
+        value="{{value}}">
+        {% case type %}
+          {% when 'range' %}
+            {% case name %}
+              {% when 'reviews.average_score' %}
+                {% render 'findify-filter-rating-value', selected: true, value: from | append: 'to' | append: to %}
               {% else %}
-                {{ fromDisplay }} - {{ toDisplay }}
-              {% endif %}
-          {% endcase %}
-        {% else %}
-          {% case name %}
-            {% when 'color' %}
-              {% case color_layout %}
-                {% when 'color'
-                  , 'color_with_label' %}
-                  <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
-                  {% if color_layout == 'color_with_label' %}
-                    {{ value }}
-                  {% endif %}
+                {% liquid
+                  if name == 'price'
+                    assign toDisplay = toDisplay | times: 100 | money
+                    assign fromDisplay = fromDisplay | times: 100 | money
+                  endif
+                %}
+                {% if fromDisplay == 'undefined' %}
+                  <span>{{ 'findify.filters.under' | t }} {{ toDisplay }}</span>
+                {% elsif toDisplay == 'undefined' %}
+                  <span>{{ fromDisplay }} {{ 'findify.filters.and_up' | t }}</span>
                 {% else %}
-                  <span>
-                    {{ value | url_decode }}
-                  </span>
-              {% endcase -%}
-            {% else %}
-              <span>{{ value }}</span>
-          {% endcase %}
-      {% endcase %}
+                  {{ fromDisplay }} - {{ toDisplay }}
+                {% endif %}
+            {% endcase %}
+          {% else %}
+            {% case name %}
+              {% when 'color' %}
+                {% case color_layout %}
+                  {% when 'color'
+                    , 'color_with_label' %}
+                    <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
+                    {% if color_layout == 'color_with_label' %}
+                      {{ value }}
+                    {% endif %}
+                  {% else %}
+                    <span>
+                      {{ value | url_decode }}
+                    </span>
+                {% endcase -%}
+              {% else %}
+                <span>{{ value }}</span>
+            {% endcase %}
+        {% endcase %}
+        <div class="findify-filters-breadcrumb-close">
+          {% render 'findify-icon-cross'
+            , size: 8 %}
+        </div>
+      </div>
+      <script>
+        const removeFilter = () => {
+            const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
+
+            const name = "{{ name }}";
+            const type = "{{ type }}";
+            const value = "{{ value }}";
+
+            const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
+            
+            const breadcrumbElement = document.getElementById(breadcrumb_element_id);
+            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+            breadcrumbElement.addEventListener("keydown", (e) => {
+              if (e.key === 'Enter') breadcrumbClickHandler()
+            });
+        }
+        removeFilter();
+      </script>
+    {% endfor %}
+
+    {% assign breadcrumb_show_more_element_id = 'breadcrumb-show-more-' | append: component_id %}
+    <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
+      <small></small>
       <div class="findify-filters-breadcrumb-close">
-        {% render 'findify-icon-cross'
+        {% render 'findify-icon-arrow'
           , size: 8 %}
       </div>
     </div>
-    <script>
-      const removeFilter = () => {
-          const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
-
-          const name = "{{ name }}";
-          const type = "{{ type }}";
-          const value = "{{ value }}";
-
-          const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
-          
-          const breadcrumbElement = document.getElementById(breadcrumb_element_id);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener("keydown", (e) => {
-            if (e.key === 'Enter') breadcrumbClickHandler()
-          });
-      }
-      removeFilter();
-    </script>
-  {% endfor %}
-
-  {% assign breadcrumb_show_more_element_id = 'breadcrumb-show-more-' | append: component_id %}
-  <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
-    <small></small>
-    <div class="findify-filters-breadcrumb-close">
-      {% render 'findify-icon-arrow'
-        , size: 8 %}
+    {% assign breadcrumb_clear_all_element_id = 'breadcrumb-clear-all-' | append: component_id %}
+    <div
+      tabindex="0"
+      id="{{ breadcrumb_clear_all_element_id }}"
+      class="findify-filters-breadcrumbs-clear-all"
+      selected="true">
+      <muted>{{ 'findify.filters.clear_all' | t }}</muted>
     </div>
   </div>
-  {% assign breadcrumb_clear_all_element_id = 'breadcrumb-clear-all-' | append: component_id %}
-  <div
-    tabindex="0"
-    id="{{ breadcrumb_clear_all_element_id }}"
-    class="findify-filters-breadcrumbs-clear-all"
-    selected="true">
-    <muted>{{ 'findify.filters.clear_all' | t }}</muted>
-  </div>
-</div>
+{% endif %}
 
 <script>
     const removeAllFilters = () => {

From a9315d6e1418610ab7efcf7d3a732353520a915a Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Tue, 17 Sep 2024 12:50:44 +0300
Subject: [PATCH 14/16] merged to main

---
 snippets/findify-filter-breadcrumb.liquid | 177 +++++++++++-----------
 1 file changed, 91 insertions(+), 86 deletions(-)

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index 5b08c4b..d0a27b5 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -1,6 +1,7 @@
 {% assign breadcrumb_container_element_id = 'breadcrumb-container-' | append: component_id | replace: ' ', '' %}
 {% assign filters = active_filters | split: ';' %}
 {% assign breadcrumbs = '' %}
+
 {% for filter in filters %}
   {% assign parts = filter | split: '~' %}
   {% assign type = parts[1] %}
@@ -54,7 +55,8 @@
         selected="true"
         type="{{type}}"
         name="{{name}}"
-        value="{{value}}">
+        value="{{value}}"
+      >
         {% case type %}
           {% when 'range' %}
             {% case name %}
@@ -68,9 +70,15 @@
                   endif
                 %}
                 {% if fromDisplay == 'undefined' %}
-                  <span>{{ 'findify.filters.under' | t }} {{ toDisplay }}</span>
+                  <span>
+                    {{- 'findify.filters.under' | t }}
+                    {{ toDisplay -}}
+                  </span>
                 {% elsif toDisplay == 'undefined' %}
-                  <span>{{ fromDisplay }} {{ 'findify.filters.and_up' | t }}</span>
+                  <span>
+                    {{- fromDisplay }}
+                    {{ 'findify.filters.and_up' | t -}}
+                  </span>
                 {% else %}
                   {{ fromDisplay }} - {{ toDisplay }}
                 {% endif %}
@@ -79,8 +87,7 @@
             {% case name %}
               {% when 'color' %}
                 {% case color_layout %}
-                  {% when 'color'
-                    , 'color_with_label' %}
+                  {% when 'color', 'color_with_label' %}
                     <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
                     {% if color_layout == 'color_with_label' %}
                       {{ value }}
@@ -95,27 +102,26 @@
             {% endcase %}
         {% endcase %}
         <div class="findify-filters-breadcrumb-close">
-          {% render 'findify-icon-cross'
-            , size: 8 %}
+          {% render 'findify-icon-cross', size: 8 %}
         </div>
       </div>
       <script>
         const removeFilter = () => {
-            const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
-
-            const name = "{{ name }}";
-            const type = "{{ type }}";
-            const value = "{{ value }}";
-
-            const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
-            
-            const breadcrumbElement = document.getElementById(breadcrumb_element_id);
-            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-            breadcrumbElement.addEventListener("keydown", (e) => {
-              if (e.key === 'Enter') breadcrumbClickHandler()
-            });
-        }
+          const breadcrumb_element_id = '{{ breadcrumb_element_id }}';
+
+          const name = '{{ name }}';
+          const type = '{{ type }}';
+          const value = '{{ value }}';
+
+          const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
+
+          const breadcrumbElement = document.getElementById(breadcrumb_element_id);
+          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+          breadcrumbElement.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') breadcrumbClickHandler();
+          });
+        };
         removeFilter();
       </script>
     {% endfor %}
@@ -124,8 +130,7 @@
     <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
       <small></small>
       <div class="findify-filters-breadcrumb-close">
-        {% render 'findify-icon-arrow'
-          , size: 8 %}
+        {% render 'findify-icon-arrow', size: 8 %}
       </div>
     </div>
     {% assign breadcrumb_clear_all_element_id = 'breadcrumb-clear-all-' | append: component_id %}
@@ -133,79 +138,79 @@
       tabindex="0"
       id="{{ breadcrumb_clear_all_element_id }}"
       class="findify-filters-breadcrumbs-clear-all"
-      selected="true">
+      selected="true"
+    >
       <muted>{{ 'findify.filters.clear_all' | t }}</muted>
     </div>
   </div>
 {% endif %}
 
 <script>
-    const removeAllFilters = () => {
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-        const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
+  const removeAllFilters = () => {
+    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
+    const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
 
-        const openClass = 'open-left';
-        const breacrumbClearAllClickHandler =  () => {
-          findify.filters.reset();
-        }
+    const openClass = 'open-left';
+    const breacrumbClearAllClickHandler = () => {
+      findify.filters.reset();
+    };
 
-        breadcrumbClearAllElement.addEventListener("click", breacrumbClearAllClickHandler);
-        breadcrumbClearAllElement.addEventListener("keydown", (e) => {
-          if(e.key === 'Enter') breacrumbClearAllClickHandler();
-        });
+    breadcrumbClearAllElement.addEventListener('click', breacrumbClearAllClickHandler);
+    breadcrumbClearAllElement.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') breacrumbClearAllClickHandler();
+    });
+  };
+  removeAllFilters();
+
+  const showMore = () => {
+    const show_all = '{{ show_all }}' === 'true';
+    if (show_all) return;
+
+    const breadcrumb_container_element_id = '{{ breadcrumb_container_element_id }}';
+    const breadcrumb_show_more_element_id = '{{ breadcrumb_show_more_element_id }}';
+    const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
+    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
+
+    const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
+    if (!breadcrumbsContainer) return;
+    const showMore = document.getElementById(breadcrumb_show_more_element_id);
+
+    const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
+    const gap = 15;
+    const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
+
+    let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
+    const containerWidth = breadcrumbsContainer.offsetWidth;
+    const hiddenBreadcrumbs = [];
+
+    for (const breadcrumb of breadcrumbs) {
+      const breadcrumbWidth = breadcrumb.offsetWidth;
+      totalBreadcrumbsWidth += breadcrumbWidth + gap;
+
+      if (totalBreadcrumbsWidth > containerWidth) {
+        breadcrumb.style.display = 'none';
+        hiddenBreadcrumbs.push(breadcrumb);
+      }
     }
-    removeAllFilters();
-        
-    const showMore = () => {
-        const show_all = "{{ show_all }}" === "true";
-        if(show_all) return;
-
-        const breadcrumb_container_element_id = "{{ breadcrumb_container_element_id }}"
-        const breadcrumb_show_more_element_id = "{{ breadcrumb_show_more_element_id }}";
-        const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-
-        const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
-        if (!breadcrumbsContainer) return;
-        const showMore = document.getElementById(breadcrumb_show_more_element_id);
-
-        const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
-        const gap = 15;
-        const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
-
-        let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
-        const containerWidth = breadcrumbsContainer.offsetWidth;
-        const hiddenBreadcrumbs = [];
-
-        for (const breadcrumb of breadcrumbs) {
-            const breadcrumbWidth = breadcrumb.offsetWidth;
-            totalBreadcrumbsWidth += breadcrumbWidth + gap;
-
-            if (totalBreadcrumbsWidth > containerWidth) {
-                breadcrumb.style.display = "none";
-                hiddenBreadcrumbs.push(breadcrumb);
-            }
-        }
-
-        if (hiddenBreadcrumbs.length > 0) {
-            const showMoreTextContainer = showMore.querySelector("small");
-            showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
-            showMore.addEventListener("click", () => {
-                showMore.classList.toggle("open");
-                const showMoreText = showMoreTextContainer.textContent;
-                const newShowMoreText = showMoreText === "Less" ? `${hiddenBreadcrumbs.length} more` : "Less";
+    if (hiddenBreadcrumbs.length > 0) {
+      const showMoreTextContainer = showMore.querySelector('small');
+      showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
-                for (const breadcrumb of hiddenBreadcrumbs) {
-                    breadcrumb.style.display = breadcrumb.style.display === "none" ? "" : "none";
-                }
+      showMore.addEventListener('click', () => {
+        showMore.classList.toggle('open');
+        const showMoreText = showMoreTextContainer.textContent;
+        const newShowMoreText = showMoreText === 'Less' ? `${hiddenBreadcrumbs.length} more` : 'Less';
 
-                showMoreTextContainer.textContent = newShowMoreText;
-            });
-        } else {
-            showMore.style.display = "none";
+        for (const breadcrumb of hiddenBreadcrumbs) {
+          breadcrumb.style.display = breadcrumb.style.display === 'none' ? '' : 'none';
         }
-    };
-    showMore();
 
-</script>
\ No newline at end of file
+        showMoreTextContainer.textContent = newShowMoreText;
+      });
+    } else {
+      showMore.style.display = 'none';
+    }
+  };
+  showMore();
+</script>

From 17847d5707dc1993df5f482d7e26cd7a940fd5c9 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Tue, 17 Sep 2024 12:52:55 +0300
Subject: [PATCH 15/16] refactored

---
 snippets/findify-filter-breadcrumb.liquid | 176 +++++++++++-----------
 1 file changed, 86 insertions(+), 90 deletions(-)

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index d0a27b5..319dcce 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -55,8 +55,7 @@
         selected="true"
         type="{{type}}"
         name="{{name}}"
-        value="{{value}}"
-      >
+        value="{{value}}">
         {% case type %}
           {% when 'range' %}
             {% case name %}
@@ -70,15 +69,9 @@
                   endif
                 %}
                 {% if fromDisplay == 'undefined' %}
-                  <span>
-                    {{- 'findify.filters.under' | t }}
-                    {{ toDisplay -}}
-                  </span>
+                  <span>{{ 'findify.filters.under' | t }} {{ toDisplay }}</span>
                 {% elsif toDisplay == 'undefined' %}
-                  <span>
-                    {{- fromDisplay }}
-                    {{ 'findify.filters.and_up' | t -}}
-                  </span>
+                  <span>{{ fromDisplay }} {{ 'findify.filters.and_up' | t }}</span>
                 {% else %}
                   {{ fromDisplay }} - {{ toDisplay }}
                 {% endif %}
@@ -87,7 +80,8 @@
             {% case name %}
               {% when 'color' %}
                 {% case color_layout %}
-                  {% when 'color', 'color_with_label' %}
+                  {% when 'color'
+                    , 'color_with_label' %}
                     <span class="findify-filters--color-item-value color-mapping-background-{{value | downcase}} solid-circle {{ color_layout }}"></span>
                     {% if color_layout == 'color_with_label' %}
                       {{ value }}
@@ -102,26 +96,27 @@
             {% endcase %}
         {% endcase %}
         <div class="findify-filters-breadcrumb-close">
-          {% render 'findify-icon-cross', size: 8 %}
+          {% render 'findify-icon-cross'
+            , size: 8 %}
         </div>
       </div>
       <script>
         const removeFilter = () => {
-          const breadcrumb_element_id = '{{ breadcrumb_element_id }}';
-
-          const name = '{{ name }}';
-          const type = '{{ type }}';
-          const value = '{{ value }}';
-
-          const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
-
-          const breadcrumbElement = document.getElementById(breadcrumb_element_id);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
-          breadcrumbElement.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') breadcrumbClickHandler();
-          });
-        };
+            const breadcrumb_element_id = "{{ breadcrumb_element_id }}"
+
+            const name = "{{ name }}";
+            const type = "{{ type }}";
+            const value = "{{ value }}";
+
+            const breadcrumbClickHandler = () => findify.filters.update({ name, type, value });
+            
+            const breadcrumbElement = document.getElementById(breadcrumb_element_id);
+            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+            breadcrumbElement.addEventListener('click', breadcrumbClickHandler);
+            breadcrumbElement.addEventListener("keydown", (e) => {
+              if (e.key === 'Enter') breadcrumbClickHandler()
+            });
+        }
         removeFilter();
       </script>
     {% endfor %}
@@ -130,7 +125,8 @@
     <div id="{{ breadcrumb_show_more_element_id }}" class="findify-filters-breadcrumbs-show-more">
       <small></small>
       <div class="findify-filters-breadcrumb-close">
-        {% render 'findify-icon-arrow', size: 8 %}
+        {% render 'findify-icon-arrow'
+          , size: 8 %}
       </div>
     </div>
     {% assign breadcrumb_clear_all_element_id = 'breadcrumb-clear-all-' | append: component_id %}
@@ -138,79 +134,79 @@
       tabindex="0"
       id="{{ breadcrumb_clear_all_element_id }}"
       class="findify-filters-breadcrumbs-clear-all"
-      selected="true"
-    >
+      selected="true">
       <muted>{{ 'findify.filters.clear_all' | t }}</muted>
     </div>
   </div>
 {% endif %}
 
 <script>
-  const removeAllFilters = () => {
-    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
-    const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
+    const removeAllFilters = () => {
+        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
+        const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
 
-    const openClass = 'open-left';
-    const breacrumbClearAllClickHandler = () => {
-      findify.filters.reset();
-    };
+        const openClass = 'open-left';
+        const breacrumbClearAllClickHandler =  () => {
+          findify.filters.reset();
+        }
 
-    breadcrumbClearAllElement.addEventListener('click', breacrumbClearAllClickHandler);
-    breadcrumbClearAllElement.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') breacrumbClearAllClickHandler();
-    });
-  };
-  removeAllFilters();
-
-  const showMore = () => {
-    const show_all = '{{ show_all }}' === 'true';
-    if (show_all) return;
-
-    const breadcrumb_container_element_id = '{{ breadcrumb_container_element_id }}';
-    const breadcrumb_show_more_element_id = '{{ breadcrumb_show_more_element_id }}';
-    const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
-    const breadcrumb_clear_all_element_id = '{{ breadcrumb_clear_all_element_id }}';
-
-    const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
-    if (!breadcrumbsContainer) return;
-    const showMore = document.getElementById(breadcrumb_show_more_element_id);
-
-    const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
-    const gap = 15;
-    const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
-
-    let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
-    const containerWidth = breadcrumbsContainer.offsetWidth;
-    const hiddenBreadcrumbs = [];
-
-    for (const breadcrumb of breadcrumbs) {
-      const breadcrumbWidth = breadcrumb.offsetWidth;
-      totalBreadcrumbsWidth += breadcrumbWidth + gap;
-
-      if (totalBreadcrumbsWidth > containerWidth) {
-        breadcrumb.style.display = 'none';
-        hiddenBreadcrumbs.push(breadcrumb);
-      }
+        breadcrumbClearAllElement.addEventListener("click", breacrumbClearAllClickHandler);
+        breadcrumbClearAllElement.addEventListener("keydown", (e) => {
+          if(e.key === 'Enter') breacrumbClearAllClickHandler();
+        });
     }
+    removeAllFilters();
+        
+    const showMore = () => {
+        const show_all = "{{ show_all }}" === "true";
+        if(show_all) return;
+
+        const breadcrumb_container_element_id = "{{ breadcrumb_container_element_id }}"
+        const breadcrumb_show_more_element_id = "{{ breadcrumb_show_more_element_id }}";
+        const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
+        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
+
+        const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
+        if (!breadcrumbsContainer) return;
+        const showMore = document.getElementById(breadcrumb_show_more_element_id);
+
+        const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
+        const gap = 15;
+        const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
+
+        let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
+        const containerWidth = breadcrumbsContainer.offsetWidth;
+        const hiddenBreadcrumbs = [];
+
+        for (const breadcrumb of breadcrumbs) {
+            const breadcrumbWidth = breadcrumb.offsetWidth;
+            totalBreadcrumbsWidth += breadcrumbWidth + gap;
+
+            if (totalBreadcrumbsWidth > containerWidth) {
+                breadcrumb.style.display = "none";
+                hiddenBreadcrumbs.push(breadcrumb);
+            }
+        }
+
+        if (hiddenBreadcrumbs.length > 0) {
+            const showMoreTextContainer = showMore.querySelector("small");
+            showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
-    if (hiddenBreadcrumbs.length > 0) {
-      const showMoreTextContainer = showMore.querySelector('small');
-      showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
+            showMore.addEventListener("click", () => {
+                showMore.classList.toggle("open");
+                const showMoreText = showMoreTextContainer.textContent;
+                const newShowMoreText = showMoreText === "Less" ? `${hiddenBreadcrumbs.length} more` : "Less";
 
-      showMore.addEventListener('click', () => {
-        showMore.classList.toggle('open');
-        const showMoreText = showMoreTextContainer.textContent;
-        const newShowMoreText = showMoreText === 'Less' ? `${hiddenBreadcrumbs.length} more` : 'Less';
+                for (const breadcrumb of hiddenBreadcrumbs) {
+                    breadcrumb.style.display = breadcrumb.style.display === "none" ? "" : "none";
+                }
 
-        for (const breadcrumb of hiddenBreadcrumbs) {
-          breadcrumb.style.display = breadcrumb.style.display === 'none' ? '' : 'none';
+                showMoreTextContainer.textContent = newShowMoreText;
+            });
+        } else {
+            showMore.style.display = "none";
         }
+    };
+    showMore();
 
-        showMoreTextContainer.textContent = newShowMoreText;
-      });
-    } else {
-      showMore.style.display = 'none';
-    }
-  };
-  showMore();
-</script>
+</script>
\ No newline at end of file

From dfef5dbd451d0f4afafcf4daf1723630786b0f67 Mon Sep 17 00:00:00 2001
From: rozhnovaYana <scream.yv@gmail.com>
Date: Tue, 17 Sep 2024 12:57:45 +0300
Subject: [PATCH 16/16] fixed a bug

---
 snippets/findify-filter-breadcrumb.liquid | 144 +++++++++++-----------
 1 file changed, 72 insertions(+), 72 deletions(-)

diff --git a/snippets/findify-filter-breadcrumb.liquid b/snippets/findify-filter-breadcrumb.liquid
index 319dcce..42a70e5 100644
--- a/snippets/findify-filter-breadcrumb.liquid
+++ b/snippets/findify-filter-breadcrumb.liquid
@@ -18,7 +18,7 @@
 {% assign breadcrumbs_size = breadcrumbs | size %}
 {% if breadcrumbs_size > 0 %}
   <div id="{{ breadcrumb_container_element_id }}" class="findify-filters-breadcrumbs-body">
-    {% for filter in filters %}
+    {% for filter in breadcrumbs %}
       {% liquid
         assign parts = filter | split: '~'
         assign name = parts[0]
@@ -138,75 +138,75 @@
       <muted>{{ 'findify.filters.clear_all' | t }}</muted>
     </div>
   </div>
-{% endif %}
-
-<script>
-    const removeAllFilters = () => {
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-        const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
-
-        const openClass = 'open-left';
-        const breacrumbClearAllClickHandler =  () => {
-          findify.filters.reset();
-        }
-
-        breadcrumbClearAllElement.addEventListener("click", breacrumbClearAllClickHandler);
-        breadcrumbClearAllElement.addEventListener("keydown", (e) => {
-          if(e.key === 'Enter') breacrumbClearAllClickHandler();
-        });
-    }
-    removeAllFilters();
-        
-    const showMore = () => {
-        const show_all = "{{ show_all }}" === "true";
-        if(show_all) return;
-
-        const breadcrumb_container_element_id = "{{ breadcrumb_container_element_id }}"
-        const breadcrumb_show_more_element_id = "{{ breadcrumb_show_more_element_id }}";
-        const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
-        const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
-
-        const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
-        if (!breadcrumbsContainer) return;
-        const showMore = document.getElementById(breadcrumb_show_more_element_id);
-
-        const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
-        const gap = 15;
-        const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
-
-        let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
-        const containerWidth = breadcrumbsContainer.offsetWidth;
-        const hiddenBreadcrumbs = [];
-
-        for (const breadcrumb of breadcrumbs) {
-            const breadcrumbWidth = breadcrumb.offsetWidth;
-            totalBreadcrumbsWidth += breadcrumbWidth + gap;
-
-            if (totalBreadcrumbsWidth > containerWidth) {
-                breadcrumb.style.display = "none";
-                hiddenBreadcrumbs.push(breadcrumb);
-            }
-        }
-
-        if (hiddenBreadcrumbs.length > 0) {
-            const showMoreTextContainer = showMore.querySelector("small");
-            showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
 
-            showMore.addEventListener("click", () => {
-                showMore.classList.toggle("open");
-                const showMoreText = showMoreTextContainer.textContent;
-                const newShowMoreText = showMoreText === "Less" ? `${hiddenBreadcrumbs.length} more` : "Less";
-
-                for (const breadcrumb of hiddenBreadcrumbs) {
-                    breadcrumb.style.display = breadcrumb.style.display === "none" ? "" : "none";
-                }
-
-                showMoreTextContainer.textContent = newShowMoreText;
-            });
-        } else {
-            showMore.style.display = "none";
-        }
-    };
-    showMore();
-
-</script>
\ No newline at end of file
+  <script>
+      const removeAllFilters = () => {
+          const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
+          const breadcrumbClearAllElement = document.getElementById(breadcrumb_clear_all_element_id);
+
+          const openClass = 'open-left';
+          const breacrumbClearAllClickHandler =  () => {
+            findify.filters.reset();
+          }
+
+          breadcrumbClearAllElement.addEventListener("click", breacrumbClearAllClickHandler);
+          breadcrumbClearAllElement.addEventListener("keydown", (e) => {
+            if(e.key === 'Enter') breacrumbClearAllClickHandler();
+          });
+      }
+      removeAllFilters();
+          
+      const showMore = () => {
+          const show_all = "{{ show_all }}" === "true";
+          if(show_all) return;
+
+          const breadcrumb_container_element_id = "{{ breadcrumb_container_element_id }}"
+          const breadcrumb_show_more_element_id = "{{ breadcrumb_show_more_element_id }}";
+          const breadcrumbItemSelector = '.findify-filters-breadcrumb-item';
+          const breadcrumb_clear_all_element_id = "{{ breadcrumb_clear_all_element_id }}";
+
+          const breadcrumbsContainer = document.getElementById(breadcrumb_container_element_id);
+          if (!breadcrumbsContainer) return;
+          const showMore = document.getElementById(breadcrumb_show_more_element_id);
+
+          const breadcrumbs = Array.from(breadcrumbsContainer.querySelectorAll(breadcrumbItemSelector));
+          const gap = 15;
+          const clearAllWidth = document.getElementById(breadcrumb_clear_all_element_id).offsetWidth;
+
+          let totalBreadcrumbsWidth = showMore.offsetWidth + clearAllWidth + gap;
+          const containerWidth = breadcrumbsContainer.offsetWidth;
+          const hiddenBreadcrumbs = [];
+
+          for (const breadcrumb of breadcrumbs) {
+              const breadcrumbWidth = breadcrumb.offsetWidth;
+              totalBreadcrumbsWidth += breadcrumbWidth + gap;
+
+              if (totalBreadcrumbsWidth > containerWidth) {
+                  breadcrumb.style.display = "none";
+                  hiddenBreadcrumbs.push(breadcrumb);
+              }
+          }
+
+          if (hiddenBreadcrumbs.length > 0) {
+              const showMoreTextContainer = showMore.querySelector("small");
+              showMoreTextContainer.textContent = `${hiddenBreadcrumbs.length} more`;
+
+              showMore.addEventListener("click", () => {
+                  showMore.classList.toggle("open");
+                  const showMoreText = showMoreTextContainer.textContent;
+                  const newShowMoreText = showMoreText === "Less" ? `${hiddenBreadcrumbs.length} more` : "Less";
+
+                  for (const breadcrumb of hiddenBreadcrumbs) {
+                      breadcrumb.style.display = breadcrumb.style.display === "none" ? "" : "none";
+                  }
+
+                  showMoreTextContainer.textContent = newShowMoreText;
+              });
+          } else {
+              showMore.style.display = "none";
+          }
+      };
+      showMore();
+
+  </script>
+{% endif %}