Блог

Для прозрачности: это точная копия запроса, который я сделал на форуме 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>  

Как вы могли видеть, я использую Shopify.addItem() при запуске onclick, чтобы увеличить количество товаров на товар в корзине. Эта функция действительно работает. К сожалению, я не нашел никакой функции для уменьшения количества на 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 amp; 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   'amp;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);
};