1

我正在尝试将 3 件商品循环添加到购物车中。Firebug 报告对“/cart/add.js”的每个单独的 ajax 调用都返回 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() 函数的回调直到收到成功后才执行？不？

非常感谢您的任何指点！

4

2 回答 2

3

2种可能性：

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

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

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);
      }
    }
  });  
};

高温高压

于 2013-05-29T15:15:30.193 回答
1

一旦我将 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;
};
于 2013-05-30T17:16:21.310 回答