Корзина Shopify уменьшает количество Ajax в отличие от Shopify.addItem ()

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


jquery ajax shopify shopify-api
person Nik Las    schedule 18.09.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Ваше 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>
person HymnZzy    schedule 18.09.2020

arrow_upward
0
arrow_downward

Я использовал результаты 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);
};

person Nik Las    schedule 18.09.2020
comment
Я вернулся, чтобы добавить, что вам нужно настроить то, как работает функция Shopify.addItem, но вы уже разместили ее здесь. Мне любопытно, что это за тема? В последнее время я не видел такого хорошего кода в темах Shopify. - person HymnZzy; 18.09.2020
comment
Все, что я разместил здесь, - это 100% кастомный код. Таким образом, группа ввода была моей собственной, а также JavaScript. Я также немного разочарован своей темой, поэтому сейчас я так сильно меняю код темы, чтобы он работал так, как я хочу ... Для полноты картины я использую тему Corano. После первых положительных эмоций я все больше злился на стиль кодирования - но для шаблонов Shopify это нормально. - person Nik Las; 19.09.2020
comment
В таком случае загляните на cartjs.org. - person HymnZzy; 19.09.2020