Shopify 订单表单 Ajax 循环两次

Question

我在产品页面上有一个 Ajax 订单。当您单击#submit-table 按钮时，它将显示一个下拉菜单，其中显示更新的购物车信息，包括更新的数量和价格以及刚刚添加的产品。

这是我的问题的图片（应该只显示绿色的正确项目）：

到目前为止，这是我的代码，但它触发了两次，从而复制了产品，这是怎么回事？

$(document).ready(function () {
$("#submit-table").click(function(e) {
    e.preventDefault();
    //array for Variant Titles
    var toAdd = new Array();
  var qty;

    for(i=0; i < length; i++){
        toAdd.push({
            variant_id: $("#variant-"+i).val(),
            quantity_id: $("#quantity-"+i).val() || 0
        });
    }

    function moveAlong(){
        if (toAdd.length) {
            var request = toAdd.shift();
            var tempId= request.variant_id;
            var tempQty = request.quantity_id;
            var params = {
                type: 'POST',
                url: '/cart/add.js',
                data: 'quantity='+tempQty+'&id='+tempId,
                dataType: 'json',
                success: function(line_item) {

          jQuery.getJSON('/cart.js', function(cart, variant, item, line_item) {
            $('nav .customer-wrap ul li.basket span').text(cart.item_count);
            $( '<li class="c-1"><a href="{{ item.url }}" title="View product">  <div class="qc-thumb"><img src="{{ item.product.featured_image.src | product_img_url: 'thumbnail' }}" alt="{{ item.title }}" class="wk-variant-image" /></div>  <div class="qc-details"><p>{{ product.title }}</p>  <p>Qty:' + tempQty + '</p></div></a></li>' ).prependTo( ".basket-quick-view" );
          });

          console.log("success!");
          setTimeout(function () {
            $('nav .customer-wrap ul li.basket ul.basket-quick-view').removeClass('variant-added');
          }, 3000);

          moveAlong();

                },
                error: function() {
                    console.log("fail");
                    moveAlong();
                }
            };
            $.ajax(params);
        }
        else {
            //document.location.href = '/cart';
        }
    };

  jQuery.getJSON('/cart.js', function(cart, variant) {
    $('nav .customer-wrap ul li.basket span').addClass('product-added');
    $('li.empty').hide();
    $('nav .customer-wrap ul li.basket ul.basket-quick-view').addClass('variant-added');
  });

    moveAlong();
});
});

Answer 1

因为您在对cart/add.js 的ajax 调用的success() 处理程序中再次调用moveAlong() 方法

success: function(line_item) {

          jQuery.getJSON('/cart.js', function(cart, variant, item, line_item) {
            $('nav .customer-wrap ul li.basket span').text(cart.item_count);
            $( '<li>Removed for clarity </li>' ).prependTo(".basket-quick-view" );
          });

          console.log("success!");
          setTimeout(function () {
            $('nav .customer-wrap ul li.basket ul.basket-quick-view')
                                                       .removeClass('variant-added');
          }, 3000);

          moveAlong();  // Calling it again.

 }

我还建议将moveAlong 方法的定义移出提交按钮单击事件之外。您可以在 click 事件范围之外定义它，并从 click 事件中调用 moveAlong() 方法。像这样的。

$(document).ready(function () {
   $("#submit-table").click(function(e) {
    e.preventDefault();
       postCartData();
   });
});
function postCartData()
{
   //create the data to send and do call to cart/add
   $.ajax( "cart/add.php" )
  .done(function(response) {
     console.log(response);
     alert( "success" );
     getCartDataAndDisplay();
  })
  .fail(function() {
     alert( "error" );
  });

}
function getCartDataAndDisplay()
{
  //get the cart data and display
  jQuery.getJSON('/cart.js',function(res){
    console.log(res);
     //parse the response and build the UI
  });
}

Answer 2

只需在 moveAlong 函数中使用 moveAlong() 即可

$(document).ready(function () {
$("#submit-table").click(function(e) {
    e.preventDefault();
    //array for Variant Titles
    var toAdd = new Array();
  var qty;

    for(i=0; i < length; i++){
        toAdd.push({
            variant_id: $("#variant-"+i).val(),
            quantity_id: $("#quantity-"+i).val() || 0
        });
    }

    function moveAlong(){
        if (toAdd.length) {
            var request = toAdd.shift();
            var tempId= request.variant_id;
            var tempQty = request.quantity_id;
            var params = {
                type: 'POST',
                url: '/cart/add.js',
                data: 'quantity='+tempQty+'&id='+tempId,
                dataType: 'json',
                success: function(line_item) {

          jQuery.getJSON('/cart.js', function(cart, variant, item, line_item) {
            $('nav .customer-wrap ul li.basket span').text(cart.item_count);
            $( '<li class="c-1"><a href="{{ item.url }}" title="View product">  <div class="qc-thumb"><img src="{{ item.product.featured_image.src | product_img_url: 'thumbnail' }}" alt="{{ item.title }}" class="wk-variant-image" /></div>  <div class="qc-details"><p>{{ product.title }}</p>  <p>Qty:' + tempQty + '</p></div></a></li>' ).prependTo( ".basket-quick-view" );
          });

          console.log("success!");
          setTimeout(function () {
            $('nav .customer-wrap ul li.basket ul.basket-quick-view').removeClass('variant-added');
          }, 3000);

          //moveAlong(); get ride of this

                },
                error: function() {
                    console.log("fail");
                    moveAlong();
                }
            };
            $.ajax(params);
        }
        else {
            //document.location.href = '/cart';
        }
    };

  jQuery.getJSON('/cart.js', function(cart, variant) {
    $('nav .customer-wrap ul li.basket span').addClass('product-added');
    $('li.empty').hide();
    $('nav .customer-wrap ul li.basket ul.basket-quick-view').addClass('variant-added');
  });

    moveAlong();
});
});