一键将多件商品添加到 Shopify 购物车

时间:2021-06-12 08:20:07

标签: ajax loops shopify cart

我有一个 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'
    ; 
  }
});
    ; 
  }
});
  }})}})}})}})};

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

1 个答案:

答案 0 :(得分:0)

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