将大量Ajax调用更改为一个调用

时间:2018-04-05 05:28:52

标签: ajax shopify

我在Shopify上创建了一个大型快速订购表单,涉及约200种产品。每个产品都有一个文本框,用户可以在其中输入所需的数量。当他们在文本框中输入数字时,将项目添加到购物车所需的数据将添加到数组中。当用户按下“添加到购物车”时,一个函数将在数组中运行,通过Ajax将每个数据传递到购物车。

我遇到的问题是,在用户添加大量产品的情况下,假设为50,该过程需要很长时间才能运行。添加50个产品将涉及50个Ajax调用。我试过在一次调用中传递整个数组,但问题是Shopify不允许我访问Ajax的PHP部分,因此我无法更新它以容纳作为数组传入的数据。

还有另一种方法可以加快这个过程吗?一种在一次Ajax调用中发送数据的方法,无需编辑PHP。

这是我的JS:

 $(document).ready(function () {
  var updated = new Array();

  /**
  ** Creates array of textboxes that have input.
  ** Updates the array, if a textbox's input is changed.
  **/
  $("input[type=number]").on("input", function() {  

    var new_item = true;
    var variant = $(this).parent().children("input[type=hidden]").val();        
    var quantity = $(this).val();

    if(updated.length <= 0) {
      updated.push({
        variant_id: variant,        
        quantity: quantity
      });
    }

    else if (updated.length > 0) {
      for (var key in updated) {
       if(parseInt(updated[key].variant_id) == variant) {
         updated[key].quantity = quantity;
         new_item = false;
         return false;
       } 
     }

     if(new_item == true) {
       updated.push({
         variant_id: variant,        
         quantity: quantity
      });
     }
    }

  });

  /**
  ** On press of "Add to Cart", runs through array of textboxes and posts values to cart.
  **/
  $("#submit-table").click(function(e) {  
    e.preventDefault();
    $(this).val("Adding to Cart...");

    var toAdd = new Array();

    for(i=0; i < updated.length; i++){

      if(updated[i].quantity === "") {
            updated[i].quantity = 0; 
      }

      toAdd.push({
        variant_id: updated[i].variant_id,        
        quantity: updated[i].quantity
      });
    }

    function moveAlong(){
      if (toAdd.length) {

        var request = toAdd.shift();
        var tempId= request.variant_id;
        var tempQty = request.quantity;

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

          },
          error: function() {
            moveAlong();

          }
        };
        $.ajax(params);
      }
      else {                
        document.location.href = '/cart';
      }  
    };
    moveAlong();
  });
});

0 个答案:

没有答案