add 2 gift mini cart


 {% render 'free-shipping-bar' %} 
{% if settings.show_free_shipping_bar 
          and settings.cart_shipping_value_1 != blank 
          and settings.cart_shipping_value_2 != blank %}
        
       {% assign threshold1 = settings.cart_shipping_value_1 | times: 1.0 %}
      {% assign threshold2 = settings.cart_shipping_value_2 | times: 1.0 %}
      {% assign cart_total = cart.total_price | times: 1.0 %}

        
        <div class="free_shipping_card_wrapper">
          <!-- Message -->
            <div class="free_shipping_card_title">
              {% if cart_total < threshold1 %}
                {% assign diff = threshold1 | minus: cart_total %}
                {% assign diff_money = diff | money %}
                {{ settings.cart_shipping_text_1 | replace: 'XX', diff_money }}
              {% elsif cart_total < threshold2 %}
                {% assign diff = threshold2 | minus: cart_total %}
                {% assign diff_money = diff | money %}
                {{ settings.cart_shipping_text_2 | replace: 'XX', diff_money }}
              {% else %}
                {{ settings.cart_shipping_text_3 }}
              {% endif %}
            </div>
          {% assign percent = cart_total | divided_by: threshold2 | times: 100 %}
          {% if percent > 100 %}
            {% assign percent = 100 %}
          {% endif %}

          <!-- Progress Bar Wrapper -->
          <div class="free_shipping_card_progress_wrapper">
            <!-- Progress Bar -->
            <div class="free_shipping_card_progress">
              <div class="free_shipping_card_progress_bar" style="width:{{ percent }}%"></div>
            </div>

            <!-- Checkpoint Icons -->
            <div class="free_shipping_card_icons">
              <!-- First checkpoint -->
              <div class="checkpoint {% if cart_total >= threshold1 %}active{% endif %}" 
                  style="left: {{ threshold1 | divided_by: threshold2 | times: 100 }}%;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gift-icon">
                  <polyline points="20 12 20 22 4 22 4 12"></polyline>
                  <rect x="2" y="7" width="20" height="5"></rect>
                  <line x1="12" y1="22" x2="12" y2="7"></line>
                  <path d="M12 7a3 3 0 1 1-6 0c0-1.66 3-5 3-5s3 3.34 3 5z"></path>
                  <path d="M12 7a3 3 0 1 0 6 0c0-1.66-3-5-3-5s-3 3.34-3 5z"></path>
                </svg>
              </div>

              <!-- Second checkpoint -->
              <div class="checkpoint {% if cart_total >= threshold2 %}active{% endif %}" style="left: 100%;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gift-icon">
                  <polyline points="20 12 20 22 4 22 4 12"></polyline>
                  <rect x="2" y="7" width="20" height="5"></rect>
                  <line x1="12" y1="22" x2="12" y2="7"></line>
                  <path d="M12 7a3 3 0 1 1-6 0c0-1.66 3-5 3-5s3 3.34 3 5z"></path>
                  <path d="M12 7a3 3 0 1 0 6 0c0-1.66-3-5-3-5s-3 3.34-3 5z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>

      {% endif %}

Leave a Reply

Your email address will not be published. Required fields are marked *