一键将多个商品添加到 Shopify 购物车答案

【问题标题】：Adding multiple items to Shopify cart with one click一键将多个商品添加到 Shopify 购物车
【发布时间】：2021-06-12 08:20:07
【问题描述】：

我有一个 Shopify 网站，在查看某些产品时，我会为买家提供同时添加其他相关商品的选项。每个相关产品都有自己的数量输入，名称为“quantity1”、“quantity2”等。

我想要做的是计算我的页面上有多少输入名称包含文本“数量”，然后在这个数量上创建一个循环，并通过 AJAX 添加数量大于零的每个项目.

我对此很陌生，所以不太确定自己在做什么，并且尝试了数小时寻找解决方案，但一直碰壁。

我已经完成了简单的部分，即使用此代码计算“数量”输入的数量：

var len = $('input[id^=quantity]').length;

这是成功的，但是我在 AJAX 调用中的循环中苦苦挣扎，我尝试了很多不同的代码，但没有一个有效。我实际上想做以下事情：

function addItemToCart(variant_id, qty) {
 var len = $('input[id^=quantity]').length;
  data = {"id": $('#quantity'+loopnumber).parent().attr('name'),
         "quantity": parseFloat($("#quantity"+loopnumber).val()),
         }
  jQuery.ajax({
   type: 'POST',
   url: '/cart/add.js',
   data: data,
   dataType: 'json',
   success: function()

我知道我没有把 for 循环代码放在这里，但那是因为我不知道把它放在哪里，希望有人能帮助我。数据字段中的“loopnumber”文本将引用循环的当前迭代，因此迭代 1 将查找输入名称“quantity1”并查找其各自的值，将其发布到 AJAX 购物车，然后成功循环下一个数量值，直到它达到 for 循环限制。然后它会重定向到购物车。

我知道我可以简单地执行以下操作，而无需循环，但我认为这很浪费：

var quantity1 = parseFloat($("#quantity1").val());
var qty1 = $('#quantity1').parent().attr('name');
var quantity2 = parseFloat($("#quantity2").val());
var qty2 = $('#quantity2').parent().attr('name');
var quantity3 = parseFloat($("#quantity3").val());
var qty3 = $('#quantity3').parent().attr('name');
var quantity4 = parseFloat($("#quantity4").val());
var qty4 = $('#quantity4').parent().attr('name');
var quantity5 = parseFloat($("#quantity5").val());
var qty5 = $('#quantity5').parent().attr('name');

data = {
  "id": prodid,
  "quantity": mainquantity,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty1,
  "quantity": quantity1,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty2,
  "quantity": quantity2,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty3,
  "quantity": quantity3,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty4,
  "quantity": quantity4,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty5,
  "quantity": quantity5,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() {  window.location.href = '/cart'
    ; 
  }
});
    ; 
  }
});
  }})}})}})}})};

非常感谢任何帮助！谢谢乔恩

【问题讨论】：

标签： ajax loops shopify cart

【解决方案1】：

我已经整理好了，我把事情弄得太复杂了。我所要做的就是创建一个数组，这样就不必创建一个我无法工作的 AJAX 循环。一次性将所有商品添加到 AJAX 购物车也更快。

【讨论】：