Shopify购物车减少Shopify.addItem对面的数量Ajax

编程问答 2022-06-13

问题描述

为了保持透明度：这是我在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 });    
});

解决方法

您的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>
,

我使用了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);
};

ajaxjqueryshopifyshopify-api