Basically we need product id or product variant id and quantity.
here is the code from shopify to insert product to cart.
jQuery.post('/cart/add.js', {
quantity: 1,
id: 794864229,
properties: {
'First name': 'Caroline'
}
});
that code above, use both id and quantity, for the properties it's not obligatory.
now is the interesting part, looping with ajax.
/*=== ADD TO CART LOOPING BEGIN ============================================================*/
jQuery(".product-template.product-stl .imm-shop-the-look-add-all").on("click", function(){
var product_list = jQuery(".shop-the-look-product-list .product-details");
jQuery(".shop-the-look-product-list .add-to-cart-response").remove();
for(i=0;i<product_list.length;i++){
var id_product = jQuery(product_list[i]).find(".imm-shop-the-look-variant").attr("selected_variant");
var quantity = jQuery(product_list[i]).find(".product-amount .js-qty__num").val();
var numberloop = i;
add_to_cart_loop(product_list.length, id_product, quantity, numberloop);
break;
}
});
function add_to_cart_loop(jml, product_id, quantity,loop_number )
{
console.log(loop_number);
jQuery.ajax({
type: "POST",
url:'/cart/add.js',
async: true,
dataType: "json",
data:{ quantity: quantity,id: product_id},
success:function(data){
var product_list = jQuery(".shop-the-look-product-list .product-details");
jQuery(product_list[loop_number]).append("<p class='add-to-cart-response' style='color:green;'>added to cart</p>");
var numberloop1=loop_number+1;
var name_product = jQuery(product_list[numberloop1]).find(".product-title a").text();
var id_product = jQuery(product_list[numberloop1]).find(".imm-shop-the-look-variant").attr("selected_variant");
var quantity = jQuery(product_list[numberloop1]).find(".product-amount .js-qty__num").val();
if(loop_number<jml){
add_to_cart_loop(jml, id_product, quantity, numberloop1);
}
if(jml === loop_number){
ajaxCart.load();
}
},
error: function (data) {
var data2 = JSON.parse(data.responseText)
var error_desc = data2.description;
var error_msg = data2.message;
var error_status = data2.status;
var product_list = jQuery(".shop-the-look-product-list .product-details");
jQuery(product_list[loop_number]).append("<p class='add-to-cart-response' style='color:red;'>"+error_desc+"</p>");
var numberloop1=loop_number+1;
var name_product = jQuery(product_list[numberloop1]).find(".product-title a").text();
var id_product = jQuery(product_list[numberloop1]).find(".imm-shop-the-look-variant").attr("selected_variant");
var quantity = jQuery(product_list[numberloop1]).find(".product-amount .js-qty__num").val();
if(loop_number<jml){
add_to_cart_loop(jml, id_product, quantity, numberloop1);
}
if(jml === loop_number){
ajaxCart.load();
}
}
});
}
/*=== ADD TO CART LOOPING END ============================================================*/
this is simple version of the function
function add_to_cart_loop(jml, product_id, quantity,loop_number )
{
console.log(loop_number);
jQuery.ajax({
type: "POST",
url:'/cart/add.js',
async: true,
dataType: "json",
data:{ quantity: quantity,id: product_id},
success:function(data){
var numberloop1=loop_number+1;
if(loop_number<jml){
add_to_cart_loop(jml, id_product, quantity, numberloop1);
}
if(jml === loop_number) {
// finish loop.. do something
}
},
error: function (data) {
var numberloop1=loop_number+1;
if(loop_number<jml){
add_to_cart_loop(jml, id_product, quantity, numberloop1);
}
if(jml === loop_number){
// finish loop.. do something
}
}
});
}
No comments:
Post a Comment