Adding multiple products to cart - main product not adding

dragzter
New Member
2 0 0

Hello,

 

I have created product addons for the main product on my product page.  I am able to set the quantity of the addons and I have hardcoded the variant id's into the input fields.  I have a custom script to add these items to my cart one at a time with an example i found here (this is a test project).  Basically what happens is, I am on the product page and I select the quantity of my addon products and I hit add to cart, my expectation is that the Main item, along with the addon items is added to cart.  This works inconsistently because if try to add 5 or 6 items, the main item doesn't always get added to cart.  I assume that it gets skipped somehow.  Once my queue gets pushed through the script take me straight to cart whether or not the main product (the current item in my product page) was added.  It seems that the addons and the main items are being added separately and I am running into a race condition.

 

How can I add my addons and also my main product reliably?

 

Here is my code:

// product-template.liquid
<div style="display: block;"><label for="arkaine">Arkaine's Valor</label>
<input id="arkaine" class="variant-add" type="number" data-variant-id="20883132481590" value="0" ></div>

<div style="display: block;"><label for="glads">Gladiators</label>
<input id="glads" class="variant-add" type="number" data-variant-id="20883138117686" value="0" ></div>
         
<div style="display: block;"><label for="marrowwalk">Marrowwalk</label>
<input id="marrowwalk" class="variant-add" type="number" data-variant-id="20883135922230" value="0" ></div>

// theme.js
  $('form[action="/cart/add"]').submit(function (e) {
    e.preventDefault()
   
    Shopify.queue = [];
    
    var rawItems = $('.variant-add')
    var cartItem = $('#the_select')
    //rawItems.push(cartItem)
    
    $(rawItems).each(function() {
      Shopify.queue.push( {
        variantId: $(this).attr('data-variant-id'),
        quantity: parseInt(jQuery(this).val(), 10) || 0
      });
    });
    
    console.log(Shopify.queue)
    
    Shopify.addItem = function(id, qty, callback) {
      var params = {
        quantity: qty,
        id: id
      };
 
      $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        dataType: 'json',
        data: params,
        success: function(){
          if(typeof callback === 'function'){
            callback();
          }
        },
        error: function(){}
      });
    }
    
    Shopify.moveAlong = function() {
      // If we still have requests in the queue, let's process the next one.
      if (Shopify.queue.length) {
        var request = Shopify.queue.shift();
        Shopify.addItem(request.variantId, request.quantity, Shopify.moveAlong);
      }
      // If the queue is empty, we will redirect to the cart page.
      else {
        document.location.href = '/cart';
      }
    };
   
  	Shopify.moveAlong()
    //e.preventDefault();
  })
 
0 Likes
PublicApps
Shopify Partner
89 4 25

+1

Exactly the same situation. I find that keeping X ms between add to carts results in the addon being added consistently.

Just trying to help out.
- If my reply was helpful, please Like it or mark it as Accepted Solution to let me know!
- Need store customizations? Then consider Hiring us.
0 Likes
Mircea_Piturca
Shopify Partner
1489 42 316

From what I see you are using a queue and add each variant individually to cart.

The POST /cart/add.js can also take an Array. You can add all your variants in one call. This speeds things up and it should solve your issue.

See: https://shopify.dev/docs/themes/ajax-api/reference/cart

Finally—Add variant descriptions to your products
0 Likes