Shopify - удалить / изменить количество товаров в корзине

Question

Я пытаюсь выяснить, как настроить несколько элементов корзины.

По сути, у нас есть страница пользовательского заказа, которая добавляет несколько продуктов в корзину. Все добавленные продукты имеют одно и то же уникальное свойство.

Например, эти два продукта добавлены в корзину:

Product 1
ID: 1000
Property: CustomProduct2

Product2 
ID: 1001
Property: CustomProduct2

Конечный пользователь видит это как один продукт, поэтому я хотел бы удалить или откорректировать количества для всех продуктов с совпадающими свойствами с помощью одной кнопки.

Я знаю, что нижеприведенное не сработает, но предполагаю, что по возможности это будет что-то вроде:

$(document).on('click','.remove',function(e){
  var property = $(this).attr('data-property');
       $.ajax({
         type: 'POST',
         url: '/cart/add.js',
         data: {
           quantity: 0,
           id: *,
           properties: {
             'Property': data-property
           }
         },
         dataType: 'json',
         async:false,

       });
     });

Answer 1

Этого можно достичь с помощью конечной точки /cart/update.js. (См. Официальная документация Shopify

. В документации не указывается, что в качестве ключа можно использовать либо идентификатор варианта , либо значение ключа key для полезной нагрузки. Это важно при использовании свойств элемента строки, так как один и тот же идентификатор варианта может существовать в нескольких строках, если он был добавлен несколько раз с различными свойствами строки каждый раз. Однако ключ гарантированно будет уникальным для каждая строка в корзине.

Пример запроса может быть таким:

$.ajax({
     type: 'POST',
     url: '/cart/update.js',
     data: {
       updates:{
          "100000:abcdef":0, // Use the line-item key inside the quotes 
          "100001:xyzwnm":0
       }
     },
     dataType: 'json',
     async:false,  // Be warned, async:false has been deprecated in jQuery for a long time and is not recommended for use. It's generally recommended to use callbacks or promises instead

   });

Один из способов создания данных updates может быть простой через l oop. текущее содержимое корзины сохранено в переменную с именем cart, которая может выглядеть следующим образом:

var updateData = {}
for(var i=0; i < cart.items.length; i++){
  var item = cart.items[i];
  if( /* Check for item that needs to be removed */){
    updateData[item.key] = 0;
  }
}
// Now you can make your AJAX call using this updateData object

Вы также можете сделать это, используя array.reduce, если хотите будьте любезны:

var updateData = cart.items.reduce(function(acc, item){
  if( /* Check for item that we want to remove */){
    acc[item.key] = 0
  }
  return acc;
}, {})
// Now make your AJAX call using the updateData that we created

В любом случае наш последний AJAX вызов теперь будет выглядеть примерно так:

$.ajax({
 type: 'POST',
 url: '/cart/update.js',
 data: {
   updates: updateData
 },
 dataType: 'json',
 success: function(cart){ console.log('Hooray!', cart) },
 error: function(err){ console.error('Booo!', err) }

});

Надеюсь, это поможет!