Merge pull request #63 from findify/bug/FI-7719-liquid-fix-bug-list

Bug/fi 7719 liquid fix bug list

assets/findify-autocomplete.css

@@ -248,7 +248,12 @@ body {
   line-height: 1;
   padding: 5px;
 }
-
+.findify-autocomplete .suggestions-wrapper .findify-suggestion-item a {
+  color: #c0c0c0;
+}
+.findify-autocomplete .suggestions-wrapper .findify-suggestion-item a span {
+  color: #1c1d1d;
+}
 /* end */
 
 /* dropdown start */
@@ -287,7 +292,7 @@ body {
 .findify-autocomplete-fullscreen {
   width: 100%;
   padding: 15px 30px 20px;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .findify-autocomplete-fullscreen .findify-autocomplete-content {

assets/findify-filter.css

@@ -204,6 +204,9 @@ button {
   max-height: 155px;
   overflow: auto;
 }
+#findify-filters-price .findify-filters--body-wrapper, #findify-filters-reviews\.average_score .findify-filters--body-wrapper {
+  max-height: initial;
+}
 .findify-filters--body-wrapper::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 4px;

assets/findify-product-card.css

@@ -42,9 +42,16 @@ a:visited:not(.button) {
 
 .image-container {
   position: relative;
+  padding-top: 150%;
   display: inline-block;
   width: 100%;
 }
+.image-container img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
 
 .image-container .second-image {
   display: none;

assets/findify-sorting.css

@@ -18,7 +18,7 @@
 .findify-sorting-btn {
   height: 46px;
   padding: 0 10px 0 15px;
-  width: 160px;
+  width: 240px;
   display: flex;
   align-items: center;
   justify-content: space-between;

sections/findify-autocomplete.liquid

@@ -14,10 +14,21 @@
       <h3>{{ suggestionsTitle }}</h3>
       <ul>
         {% for suggestion in suggestions %}
-          <li>
-            <div data-findify-suggestion class="findify-suggestion">
-              {{ suggestion }}
-            </div>
+          {%- assign queryHTML = '<span>'
+            | append: query
+            | append: '</span>'
+          -%}
+          {%- assign formattedSuggestion = suggestion
+            | replace: query, queryHTML
+          -%}
+          <li class="{% if query != "none" %} findify-suggestion-item {% endif %}">
+            <a
+              class="findify-suggestion"
+              href="/{{ basepath }}?q={{ suggestion }}"
+              data-findify-suggestion
+            >
+              {{ formattedSuggestion }}
+            </a>
           </li>
         {% endfor %}
       </ul>

snippets/findify-filter-breadcrumb.liquid

@@ -37,16 +37,17 @@
               {% render 'findify-filter-rating-value', selected: true, value: from | append: 'to' | append: to %}
             {% else %}
               {% liquid
-                assign fake_price = 123
-                assign money_price = fake_price | times: 100 | money
-                assign currency = money_price | replace: fake_price, '' | replace: ',00', ''
+                if name == 'price'
+                  assign to = to | times: 100 | money
+                  assign from = from | times: 100 | money
+                endif
               %}
               {% if from == 'undefined' %}
-                <span>{{ 'findify.filters.under' | t }} {{ to | append: currency }}</span>
+                <span>{{ 'findify.filters.under' | t }} {{ to }}</span>
               {% elsif to == 'undefined' %}
-                <span>{{ from | append: currency }} {{ 'findify.filters.and_up' | t }}</span>
+                <span>{{ from }} {{ 'findify.filters.and_up' | t }}</span>
               {% else %}
-                {{ from | append: currency }} - {{ to | append: currency }}
+                {{ from }} - {{ to }}
               {% endif %}
           {% endcase %}
         {% else %}

snippets/findify-filter-checkbox.liquid

@@ -1,4 +1,5 @@
 {% liquid
+  assign value = value | strip_html
   assign filter_element_id = 'findify-filter-' | append: value
 %}
 
@@ -35,21 +36,28 @@
 
 <script>
   const onFilterClick = () => {
-  const filter_element_id = "{{ filter_element_id }}"
-  const value = "{{ value }}";
-  const type = "{{ type }}";
-  const name = "{{ name }}";
-
+    const filter_element_id = "{{ filter_element_id }}"
+    let value = "{{ value }}";
+    const type = "{{ type }}";
+    const name = "{{ name }}";
     const filterElement = document.getElementById(filter_element_id);
 
     const filterClickHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const openClass = 'open-left';
-        const containerElement = document.getElementById('findify-filters-sidebar');
-        containerElement?.classList.remove(openClass);
-        document.documentElement.classList.remove("no-scroll");
-        findify.filters.update({ value, type, name });
+      e.preventDefault();
+      e.stopPropagation();
+      const openClass = 'open-left';
+      const containerElement = document.getElementById(
+        'findify-filters-sidebar',
+      );
+      containerElement?.classList.remove(openClass);
+      document.documentElement.classList.remove('no-scroll');
+      if (name === 'price') {
+        const rate = findify.utils.getShopifyCurrencyRate();
+        value = value.replace(/\d+(\.\d+)?/g, (num) =>
+          +num ? (+num / rate)?.toFixed(2) : num,
+        );
+      }
+      findify.filters.update({ value, type, name });
     };
 
     filterElement.addEventListener("click", filterClickHandler);

snippets/findify-filter-color-value.liquid

@@ -8,14 +8,20 @@
 
 <span class="findify-filters-checkbox-item-value findify-filters--color-item {{ class }}">
   {% case color_filter_layout %}
-    {% when 'color' %}
+    {% when 'color', 'color_with_label' %}
       <span class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} solid-circle">
         {% if is_selected %}
-          {% render 'findify-icon-checkmark' %}
+          {% render 'findify-icon-checkmark', color: color_name %}
         {% endif %}
       </span>
+      {% if color_filter_layout == 'color_with_label' %}
+        {{ color_name }}
+      {%  endif %}
     {% else %}
-      <span class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} circle-with-label"></span>
+      <span
+        class="findify-filters--color-item-value {{ background_color_class }} {{ border_color_class }} circle-with-label"
+      ></span>
       {{ color_name | url_decode }}
-    </span>
-{% endcase %}</span>
+      </span>
+  {% endcase -%}
+</span>

snippets/findify-filter-price-range.liquid

@@ -48,15 +48,16 @@
     const submitBtnElement = document.getElementById(submit_btn_selector_id);
 
     const onSubmitHandler = () => {
-      let from = (fromInputElement.value / window.findifyBGOperationsBlockSettings?.rate).toFixed(2);
-      let to = (toInputElement.value / window.findifyBGOperationsBlockSettings?.rate).toFixed(2);
+      const rate = findify.utils.getShopifyCurrencyRate();
+      let from = (fromInputElement.value / rate).toFixed(4);
+      let to = (toInputElement.value / rate).toFixed(4);
 
       let value;
-      if (from && to) {
+      if (parseFloat(from) && parseFloat(to)) {
         value = `from|${from}-to|${to}`;
-      } else if (from && !to) {
+      } else if (parseFloat(from) && !parseFloat(to)) {
         value = `from|${from}`;
-      } else if (to && !from) {
+      } else if (parseFloat(to) && !parseFloat(from)) {
         value = `to|${to}`;
       }
 

snippets/findify-filter-rating-value.liquid

@@ -1,4 +1,4 @@
-<span class="findify-filters-checkbox-item-value {%if selected == 't'%}findify-filters-checkbox-item-value-selected{% endif %}">
+<span class="findify-filters-checkbox-item-value {%if is_selected == true %}findify-filters-checkbox-item-value-selected{% endif %}">
   {%- assign fromValue = value | split: '-' | first -%}
   {% assign value = fromValue | split: '|' | last %}
   {%- render 'findify-rating', value: value -%}

snippets/findify-icon-checkmark.liquid

@@ -1,12 +1,21 @@
+{% liquid
+  assign color = color | downcase
+  assign stroke = 'white'
+  if color == 'white'
+    assign stroke = 'black'
+  endif
+%}
+
 <svg
   width="14"
   height="11"
   viewBox="0 0 14 11"
   fill="none"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M1 5.44444L4.69231 9L13 1"
-    stroke="black"
+    stroke="{{stroke}}"
     stroke-width="2"
     stroke-linecap="round" />
-</svg>
+</svg>