Question

我试图在循环中向购物车添加3件商品。 Firebug报告每个单独的ajax调用'/cart/add.js'返回200 OK，返回的json对象显示刚刚添加的正确variant_id和数量。但是，购物车的最终内容通常是不正确的 - 通常只显示1或2，而不是预期的3个项目。

这是我的代码。

$('form[name="one-step-checkout"]').submit(function(event) {
  event.preventDefault();
  Shopify.clear(function(cart) {
    add_items(function() {
      Shopify.getCart(function(cart) {
        alert('items in cart : ' + cart.items.length)
      })
    });
  });

});


add_items = function(callback) {
  add_variant_array = [];
  $('form[name="one-step-checkout"]').find('div.checkout-step-options input:radio').each(function() {
    if($(this).is(':checked') && $(this).attr('name') == 'price') {
      var choice = $(this).val();
      $('input.variant-price.' + choice).each(function() {
        var variant_id = this.id;
        add_variant_array.push(Shopify.addItem(variant_id, 1));
      });
    }

  });

  if (typeof callback == "function") {
    $.when.apply($, add_variant_array).done(function() {
      alert('done adding to cart');
    });
    callback();
  }  
};

如果我反复提交表格，购物车中的商品数量在1到3之间变化。我唯一能想到的是购物车在操作过程中以某种方式被清除。我认为传递给Shopify.clear（）函数的回调直到收到成功后才被执行？没有？

非常感谢任何提示！

Answer 1

2种可能性：

A）你提到你正在使用循环。在添加新请求之前，您是否在等待一个请求完成？从api.jquery.js文件的头部开始。

“Ajax请求更新Shopify的购物车必须排队并同步发送到服务器。含义：您必须等待第一个ajax回调发送第二个请求，然后等待回调发送第3个请求等“

B）在客户端站点上工作时，我不得不更改getCart，以便它不会缓存数据。这主要是IE上的问题，但这可能是您问题的另一个来源。所以，getCart改为：

Shopify.getCart = function(callback) {
  jQuery.ajax({
    dataType: "json",
    url: '/cart.js',
    cache: false,
    success: function (cart, textStatus) {
      if ((typeof callback) === 'function') {
        callback(cart);
      }
      else {
        Shopify.onCartUpdate(cart);
      }
    }
  });  
};

HTH

Answer 2

Shopify ajax调用在我将它们添加到阵列后就被解雇了。 meeech正确地指出，Shopfiy ajax api要求我等待每次ajax呼叫之间的成功返回消息。我的代码基本上是一次性地喷出请求。

为了解决这个问题，我编写了一个函数，该函数以递归方式调用自身，以确保在前一个请求返回之前不会触发每个请求。然后，我传入一个参数数组和一个相应的函数数组，以便按顺序执行。每次调用自身时，它都会删除一个参数和一个函数，直到没有任何一个为止。

$('form[name="one-step-checkout"]').submit(function(event) {
  event.preventDefault();
  Shopify.clear(function() {
    var variants = get_variants();
    var tasks = []
    for (i = 0; i < variants.length; i++) {
      tasks.push(Shopify.addItem);
    }
    // add the shopify items in order
    sequencer(variants, tasks, function() {
      goto_cart();
    });
  });
});



sequencer = function(args, tasks, callback) {
  if (tasks.length < 1) {
    callback();
  } else {
    task = tasks.shift();
    arg = args.shift();
    task(arg, 1, function() {
      sequencer(args, tasks, callback); // keep passing the original callback forward
    });
  }
}

get_variants = function() {
  var variants = [];
  $('form[name="one-step-checkout"]').find('div.checkout-step-options     input:radio').each(function() {
    if($(this).is(':checked') && $(this).attr('name') == 'price') {
      var choice = $(this).val();
      $('input.variant-price.' + choice).each(function() {
        variants.push(this.id);
      });
    }
  });
  return variants;
};

Shopify jquery ajax api，addItem（）返回成功，但购物车没有显示正确的项目数

2 个答案: