Category: Uncategorized

Categories
Uncategorized

how to add Filter price with progress bar

SCREENSHOT

https://prnt.sc/Z9aOPVafWlY5

File: Facet.liquid (snippets)

Below Line number:- 312

<details 
id="Details-{{ forloop.index }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
data-index="{{ forloop.index }}"
if filter_type == 'vertical' and forloop.index == 1 %}
open
{% endif %}
>

  <summary class="facets__summary caption-large focus-offset">
   <div>
     <span>{{ filter.label | escape }}</span>
       {% render 'icon-caret' %}
   </div>
  </summary>
{%- assign max_price_amount = filter.range_max | money_without_currency | round | strip_html | escape -%}

<div class="double_range_slider_box">
   <div class="double_range_slider">
     <span class="range_track" id="range_track"></span>
     <input type="range" class="min" min="0" 

                      max="{{ max_price_amount }}"

                      {%- if filter.min_value.value -%}

                        {%- if uses_comma_decimals -%}

                          value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                        {%- else -%}

                          value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"

                      {%- endif %}

                        {% else %}

                          value="0"

                      {%- endif -%}

                      step="0">

                      <input type="range" class="max" min="0" 

                        max="{{ max_price_amount }}"

                      {%- if filter.max_value.value -%}

                        {%- if uses_comma_decimals -%}

                          value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                        {%- else -%}

                          value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"

                        {%- endif %}

                        {% else %}

                          value="{{ max_price_amount }}"

                    {%- endif -%}

                        step="0">

                    </div>

                   </div>

                    <!-- <div id="slider-range"></div> -->

                    <div

                      id="Facet-{{ forloop.index }}-{{ section.id }}"

                      class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"

                    >

                      <div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">

                      {% comment %}        

                        <span class="facets__selected">

                          {{- 'products.facets.max_price' | t: price: max_price_amount -}}

                        </span>

                      {% endcomment %}        

                        {%- if filter_type != 'vertical' -%}

                          <facet-remove>

                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">

                              {{ 'products.facets.reset' | t }}

                            </a>

                          </facet-remove>

                        {%- endif -%}

                      </div>

                      <price-range class="facets__price">

                        <div class="field">

                        <span class="field-currency">{{ cart.currency.symbol }}</span>

                          <input

                            class="field__input"

                            name="{{ filter.min_value.param_name }}"

                            id="Filter-{{ filter.label | escape }}-GTE"

                            {%- if filter.min_value.value -%}

                              {%- if uses_comma_decimals -%}

                                value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              {%- else -%}

                                value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"

                            {%- endif %}

                              {% else %}

                                value="0"

                            {%- endif -%}

                            type="number"

                            placeholder="0"

                            min="0"

                            {%- if uses_comma_decimals -%}

                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                            {%- else -%}

                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                            {% endif %}

                          >

                        </div>

                        {%- if filter_type != 'vertical' -%}

                        {%- endif -%}

                        <div class="field">

                          <span class="field-currency">{{ cart.currency.symbol }}</span>

                          <input

                            class="field__input"

                            name="{{ filter.max_value.param_name }}"

                            id="Filter-{{ filter.label | escape }}-LTE"

                            {%- if filter.max_value.value -%}

                              {%- if uses_comma_decimals -%}

                                value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              {%- else -%}

                                value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"

                              {%- endif %}

                              {% else %}

                                value="{{ max_price_amount }}"

                            {%- endif -%}

                            type="number"

                            min="0"

                            {%- if uses_comma_decimals -%}

                              placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                            {%- else -%}

                              placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                            {% endif %}

                          >

                        </div>

                      </price-range>

                    </div>

                  </details>    

2) facets.js paste below Line number (233)

let minRangeValueGap = 6;

const range = document.getElementById("range_track");

const rangeInput = document.querySelectorAll("input[type='range']");

let minRange, maxRange, minPercentage, maxPercentage;

const setMinValueOutput = () => {

  $( "#Filter-PRICE-GTE" ).val(rangeInput[0].value);

  minRange = parseFloat(rangeInput[0].value);

};

const setMaxValueOutput = () => {

  maxRange = parseFloat(rangeInput[1].value);

  var maxRangef = parseFloat(rangeInput[1].value);

  $( "#Filter-PRICE-LTE" ).val(maxRangef);

};

rangeInput.forEach((input) => {

  input.addEventListener("change", (e) => {

    setMinValueOutput();

    setMaxValueOutput();

    // console.log("maxRange=>",maxRange);

    if (maxRange - minRange < minRangeValueGap) {

      if (e.target.className === "min") {

        rangeInput[0].value = maxRange - minRangeValueGap;

        setMinValueOutput();

        e.target.style.zIndex = "2";

      } else {

        rangeInput[1].value = minRange + minRangeValueGap;

        e.target.style.zIndex = "2";

        setMaxValueOutput();

      }

    }

  });

});
Categories
Uncategorized

How To Show Drop Down on Hover in Dawn Theme

Paste code below Line number 24 (global.js )

let items = document.querySelector(".header__inline-menu").querySelectorAll("details");

  console.log(items)

  items.forEach(item => {

    item.addEventListener("mouseover", () => {

      item.setAttribute("open", true);

      item.querySelector("ul").addEventListener("mouseleave", () => {

        item.removeAttribute("open");

      });

    item.addEventListener("mouseleave", () => {

      item.removeAttribute("open");

    });

  });

  });
Categories
Uncategorized

How to add product variant Image swatches in Collection page

https://prnt.sc/RPCqovU6xl-d

Card-product.liquid (Snipets)

   <!– start Color Swatch code –>

        {% for option in card_product.options %}

          {% assign color_option = option %} 

        {% endfor %}

        {% if color_option contains “Color” %}

          <div class=”color_swatches”>

            {% for option in card_product.options %}

              {% if option == ‘Color’ %}

                {% assign index = forloop.index0 %}

                {% assign colorlist = ” %}

                {% assign color = ” %}

                {% for variant in card_product.variants limit:3 %}

                  {% capture color %} {{ variant.options[index] }} {% endcapture %}

                  {% unless colorlist contains color %}

                  {% assign var_img = variant.image.src | img_url: ’35x’ %}

                  {% assign ftr_img = variant.image.src | img_url: ‘master’ %}

                    <a href=”javascript:void(0);”><img src=”{{ var_img }}” class=”hover_image” alt=”{{ color }}” data-image=”{{ ftr_img }}” width=”34″ height=”34″ alt=”{{ color }}” loading=”lazy” /></a>

                    {% capture tempList %}{{colorlist | append: color | append: ‘ ‘}}{% endcapture %}

                    {% assign colorlist = tempList %}

                  {% endunless %}

                {% endfor %}

              {% endif %}

            {% endfor %}

        {% assign var_size = card_product.variants | size %}

        {% if var_size > 3 %}

          <a href=”{{ card_product.url }}” class=”product_more_link”><img src=”{{ ‘plus_icon.svg’ | asset_url }}” loading=”lazy” alt=”plus icon”></a>

        {% endif %}

          </div>

        {% endif %}

        <!– start Color Swatch code –>

Categories
Uncategorized

How to use variant images as swatches

Product-variant-options.liquid

Example Code with tested

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

        {% if option.name == 'Color' %}

              {% unless colorlist contains color %}

              {% assign var_img = product.variants[forloop.index0].image.src | img_url: '35x' %}

              {% assign ftr_img = product.variants[forloop.index0].image.src | img_url: 'master' %}

                <img src="{{ var_img }}" class="hover_image" alt="{{ color }}" data-image="{{ ftr_img }}" title="{{ value }}" width="34" height="34" alt="{{ color }}" loading="lazy" /> 

                {% capture tempList %}{{colorlist | append: color | append: ' '}}{% endcapture %}

                {% assign colorlist = tempList %}

              {% endunless %}

          {% else %}

            {{ value -}}    

        {% endif %}

      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>

    </label>