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 1/4] 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 2/4] 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 3/4] 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 4/4] 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 %}