May 26, 2021

Add to cart to collection pages

Add this code in product-item.liquid under Snippets

<button  type="submit" name="add" aria-label="Add to cart" class="ad_to_cart_coll Button Button--primary" id="ad_to_cart" aria-haspopup="dialog" data-add-to-cart="{{ product.variants.first.id }}" data-var_id="{{ product.variants.first.id }}">
          Add to cart</button>

Next in custom.js under Assets, add this code

$('.ad_to_cart_coll').click(function(){    
  var ID = $(this).attr("data-var_id");
  addItemToCart( ID, 1);    // paste your id product number
  $('.cart_dr').trigger( "click" );
});
function addItemToCart(variant_id, qty) {
  data = {
    "id": variant_id,
    "quantity": qty
  }
  jQuery.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: data,
    dataType: 'json',
    success: function() { 
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true  //this code is for prestige theme, is to refresh the cart
      }));
    }   
    
  }); 
 
}