Question

Quick question – I’ve got a $.each loop, with a function call inside with a callback function

what can i put inside of that callback function to continue the loop

$.each(product, function () {
    AddToCart($(this), function () {

    });
});

right now – if it loops through 5 products, only the last one gets added to the cart

i need a way of pausing the loop to ensure the product is added to the cart before adding the next one

thanks!

Here is the AddToCart function:

function AddToCart(product, callback) {
            //Get the product ID and info
            var product = product;
            var productid = product.children(".productId").val();
            var productName = product.children(".productName").val();
            var productPage = product.children(".productPage").attr("href");
            var productImage = product.find(".productImage").attr("src");
            var productPrice = product.find(".productPrice").val();
            var productMSRP = product.find(".productMSRP").val();

            var productList = $("#productList");
            var exists = false;
            listItems = $("#productList").find("li");
            // Loop through to see if the product has already been added
            listItems.each(function (idx, li) {
                var item = $(li);
                var itemId = item.children(".productId").val();
                if (itemId == productid) {
                    exists = true;
                    //find its quantity
                    var quantity = item.children(".quantity").html();

                    //increment the quantity
                    quantity = parseInt(quantity) + 1;
                    item.children(".quantity").html(quantity);
                }
            });

            if (!exists) {
                var listItem = "<li>" +
                                    "<a href='" + productPage + "'><img height='80px' src='" + productImage + "'/></a>" +
                                    "<input type='button' value='X' class='cartRemoveBtn'/>" +
                                    "<span class='quantity'>1</span>" +
                                    "<div class='tooltip_info'>" +
                                    "<span class='tooltip_name'>" + productName + "</span>" +
                                    "<span class='tooltip_price'>Our Price: $" + parseFloat(productPrice, 10).toFixed(2) + "</span>" +
                                    "<span class='tooltip_msrp'>List Price: $" + parseFloat(productMSRP, 10).toFixed(2) + "</span>" +
                                    "<span class='tooltip_savings'>You Save: $" + parseFloat(productMSRP - productPrice, 10).toFixed(2) + "</span>" +
                                    "</div>" +
                                    "<input type='hidden' class='productId' value='" + productid + "' />" +
                                    "<input type='hidden' class='productPrice' value='" + productPrice + "' />" +
                                    "<input type='hidden' class='productMSRP' value='" + productMSRP + "' />" +
                               "</li>";


                productList.prepend(listItem);
            }
            OpenCart();
            updateTotals();
            initializeCart();
            refreshTooltips();
            $.post('/Store/Cart/AddToCart/' + productid, function () {
                callback();
            });
            return false;
        }

Answer 1

The $.each function is already synchronous meaning that it is stepping through each product one at a time, first to last. The first function call is blocking the second function call until the first function returns.

Here is a working pseudo-code example:

function AddToCart(item, callback){
  alert(item);
};

var products = [1,2,3,4,5];

$.each(products, function(index, product){
  AddToCart(product);
});

Possible Issue

The AddToCart function is registering a callback on post (an asynchronous call from inside of AddToCart) which means that it is returning before the post function has had time to complete. I don’t know what your callback is doing but this is probably completing all of the AddToCart calls before the first post is returning from ‘/Store/Cart/AddToCart/’

Solution

Run the code that depends upon the return of the post inside of the callback of the AddToCart function.

Alternate Solution

Use another form of stepping through the products… this uses the callback of AddToCart to call the next product addition.

function AddEachToCart(products) {
  // ensure products is not a js Array
  products = $(products).toArray();
  if (products.length > 0) 
    AddToCart(products.shift(), function(){AddEachToCart(products)});
};