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}`);
}