Saturday, July 29, 2017

Looping Ajax

from the latest project i do with shopify, i need to use ajax inside looping to add products to cart.
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