Mini cart notice popup

custom-addtocart-btn.liquid
{%- capture form_id -%}AddToCartForm-cart-upsell-{{ product.id }}{%- endcapture -%}
  <div class="quic-add-btn-main-wapper {% if  product.selling_plan_groups.size > 0  %} selling-custom-mini-cart {% endif %}">
      {%- form 'product', product, id: form_id, class: 'product-single__form quick_add_form' -%}
                <select name="id" class="product-single__variants no-js">
                {%- for variant in product.variants -%}
                  {%- if variant.available -%}
                    <option {% if variant == product.selected_or_first_available_variant %}
                      selected="selected"{% endif %}
                      value="{{ variant.id }}">
                      {{ variant.title }} - {{ variant.price | money_with_currency }}
                    </option>
                  {%- else -%}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {%- endif -%}
                {%- endfor -%}
              </select>
              <button
                class="btn custom-check-btn btn__default submit_form"
                data-pro-id="{{ product.selected_or_first_available_variant.id }}"  type="button" 
                {% unless product.selected_or_first_available_variant.available %}
                  disabled="disabled"
                {% endunless %}
              >
                {% comment %}
                {% if product.selected_or_first_available_variant.available %}
                 {{ 'products.product.add_to_cart' | t }}
                  {% else %}
                 {{ 'products.product.sold_out' | t }}
                {% endif %}
                {% endcomment %}
               <span class="svg-wrapper">
                  <svg xmlns="http://www.w3.org/2000/svg" width="21.512" height="20.966" viewBox="0 0 21.512 20.966">
                  <path id="Path_111329" data-name="Path 111329" d="M101.631,35.975a2.065,2.065,0,0,0,2-1.436l2.1-6.24H91.17l2.1,6.24a2.065,2.065,0,0,0,2,1.436ZM89.973,27.914l-1.029-3.066a2.065,2.065,0,0,0-2-1.436h-.814a.507.507,0,0,1,0-1.014h.814A3.088,3.088,0,0,1,89.9,24.527l.926,2.757h15.6a.513.513,0,0,1,.16.026.506.506,0,0,1,.319.64l-2.319,6.908a3.088,3.088,0,0,1-2.958,2.129H95.263a3.087,3.087,0,0,1-2.958-2.129L90,27.992a.508.508,0,0,1-.026-.079ZM101.038,38.7a2.236,2.236,0,1,1-1.58.655A2.225,2.225,0,0,1,101.038,38.7Zm.863,1.372a1.219,1.219,0,1,0,.358.863A1.216,1.216,0,0,0,101.9,40.067ZM94.888,38.7a2.236,2.236,0,1,1-1.58.655A2.225,2.225,0,0,1,94.888,38.7Zm.863,1.372a1.219,1.219,0,1,0,.358.863A1.216,1.216,0,0,0,95.751,40.067Z" transform="translate(-85.524 -22.299)" fill="#5c957f" stroke="#6d8b75" stroke-width="0.2"/>
                </svg>
                </span>
              </button>
      {% endform %}
  </div>

main.js

  /*** MINI CART  ***/
   $(document).on("click", ".submit_form", function(e) {
      e.preventDefault(); 
      var $form = $(this).closest("form");
      var variantId = $form.find("select[name='id']").val() || $(this).data("pro-id");
      $.ajax({
        type: "POST",
        url: window.Shopify.routes.root + "cart/add.js",
        data: JSON.stringify({
          id: variantId,
          quantity: 1
        }),
        dataType: "json",      
        contentType: "application/json",
        success: function(data) {
          var url = new URL(window.location.href);
          url.searchParams.set("open_cart", "1");
          window.location.href = url.toString();
        },
        error: function(xhr, status, error) {
          console.error("Add to cart error:", error);
        }
      });
    });
  /*** MINI CART  ***/ 


const params = new URLSearchParams(window.location.search);
if (params.get('open_cart') === '1') {
   const cartToggle = document.querySelector('#cart-icon-bubble');
    if (cartToggle) {
      cartToggle.click();
  }
  params.delete('open_cart');
  history.replaceState({}, '', `${location.pathname}?${params}`);
}

Leave a Reply

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