Shopify 购物车减少数量 Ajax 相反 Shopify.addItem()

Question

为了透明起见：这是我在 Shopify 论坛中提出的请求的精确副本，但我在那里没有得到任何帮助（除了解决问题的昂贵提议...）。

我拥有一家在结账前使用弹出式购物车的 Shopify 商店。我在弹出式购物车上使用以下代码，以使客户能够增加或减少购物车中的商品数量：

<div class="input-group m-0">
      <input type="button" value="-" class="button-minus" data-field="quantity">
      <input id="{{ item.variant.id }}" type="number" step="1" max="" value="{{ item.quantity }}" name="quantity" class="quantity-field">
      <input type="button" value="+" class="button-plus" data-field="quantity" onclick="Shopify.addItem({{ item.variant.id }}, 1)">
</div>

如您所见，我在触发 onclick 时使用 Shopify.addItem() 函数来增加购物车中每个产品的项目数量。这个功能确实有效。遗憾的是我没有找到任何函数来减少 1 的数量。所以我写了一些 JavaScript，但遗憾的是它不起作用。在这里找到代码：

$('.input-group').on('click', '.button-minus', function(e) {
    e.preventDefault();
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    var currentVariant = parseInt(parent.find('input[name=' + fieldName + ']').attr('id'), 10);
    jQuery.post('/cart/change.js', { quantity: currentVal - 1, id: currentVariant });    
});

Answer 1

您的 currentVal & currentVariant 声明是错误的。需要在属性

里面加上 "

var currentVal = parseInt(parent.find('input[name="' + fieldName + '"]').val(), 10);
var currentVariant = parseInt(parent.find('input[name="' + fieldName + '"]').attr('id'), 10);

+ jQuery.post 需要在 aysnc ... await 函数中。试试这个

$('.input-group').on('click', '.button-minus', async function(e) {
  ......
  await jQuery.post('/cart/change.js', { quantity: currentVal - 1, id: currentVariant });    
});

上面的应该可行，但是如果我们可以使用 Shopify.removeItem 不是很好吗？创建一个这样的函数并将其添加到 scripts.js.liquid 文件

Shopify.removeItem = async function(id,quantity){
  await $.ajax({
    method:'POST',
    url:'/cart/change.js',
    data:{ id:id, quantity:(--quantity) },
    dataType: 'json'
  })
}

并将数量按钮更改为

<div class="input-group m-0">
  <input type="button" value="-" class="button-minus" data-field="quantity" onclick="Shopify.removeItem({{ item.variant.id }},{{ item.quantity }})">
  <input id="{{ item.variant.id }}" type="number" step="1" max="" value="{{ item.quantity }}" name="quantity" class="quantity-field">
  <input type="button" value="+" class="button-plus" data-field="quantity" onclick="Shopify.addItem({{ item.variant.id }}, 1)">
</div>

Answer 2

我使用了 HymnZ 的结果。遗憾的是，所提供的代码需要稍作改动才能在我的商店中工作。在下面找到它！感谢 HymnZ 提供解决方案的提示！

Shopify.reduceItem = function(variant_id, quantity, callback) {
  var quantity = quantity;
  quantity = quantity-1;
  var params = {
    type: 'POST',
    url: '/cart/change.js',
    data: 'quantity=' + quantity + '&id=' + variant_id,
    dataType: 'json',
    success: function(line_item) {
      if ((typeof callback) === 'function') {
        callback(line_item);
      }
      else {
        Shopify.cartPopap(variant_id);
        Shopify.onItemAdded(line_item);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      Shopify.onError(XMLHttpRequest, textStatus);
    }
  };
  jQuery.ajax(params);
};

Shopify 购物车减少数量 Ajax 相反 Shopify.addItem()

Shopify cart reduce quantity Ajax opposite of Shopify.addItem()

ajax

jquery

shopify

shopify-api