How do I add Multiple Variants to the Cart at once?

[NicheStore]

Hello Shopify Devs,

I am having a bit of an issue, what I want to achieve is adding multiple variants to the Cart from one Product page at once.

For example:

I have Two Products on one product page - One Blue T-Shirt and One Pink 

There are 3 variants (options available):

Variant 1: Add Blue T-shirt to cart.

Variant 2:Add Pink T-shirt to cart.

Variant 3:Add Both

So when I add both it will add them individually. Reason for this is that the Printful app has yet to make this a feature.

I have done some research before I posted this and I figured I wanted to write a small script that when the add to cart button is clicked it executes it (might be inefficient but if you have different ideas there might be better ways).

So for Variant 3 (Both) I will have the SKU as BOTH, I wrote this before (I don't know liquid or AJAX so I understand this might be wrong):

{% if variant.sku == 'BOTH' %} //If the product variant selected is BOTH
	
	jQuery.post('/cart/add.js', { //Post the below in the cart
		quantity: {{ variant.inventory_quantity }}, //Add the quantity of products
		id: {{ product.variant1 }}, 
		id: {{ product.variant2 }},
  }
});
{% endif %}

I'm only going to have two variants in each product so I don't need a For loop to check how many variants they product has.

Then of course as it will be a bundle I will need to add a discount if both products are in the cart (but I will use an app for that).

Also, where do I put this script so I can make it work for what I need.

Any help is really appreciated.

Thank you

[NicheStore]

Bumping, if anyone has any ideas it would help massively.

[NicheStore]

Bumping, can anyone help with this? Thank you

[NicheStore]

Bumping if anyone can help

[NicheStore]

Still looking for some help :)

[BywardLabs]

To answer your question, you have a few things that you need to do:

1.  Attach your javascript code to the "Add to cart" button 'onClick' event

2.  Post your data to the cart.js (which you wrote pseudo code for)

3.  Decide if you want to redirect your client to the shopping cart page

All of this javascript code should exist in the product liquid code in the "Sections" folder (if you are using a sectioned theme).

I think the reason no one has really responded is due to the fact that all themes are different so there really isn't a general answer.  But for the most part, all you have to do is add your code to the Product liquid code and it should get executed when the page loads.

---

@NicheStore wrote:

Still looking for some help :)

---

[PaulNewton]

the carts /add endpoint is for a variant, for different variants you need to us /update or build a queue per the docs on using ajax api

Shopify.queue = [];

jQuery('.quantity').each(function() {
  Shopify.queue.push( {
    variantId: jQuery(this).data('variant-id'),
    quantity: parseInt(jQuery(this).val(), 10) || 0
  } );
});

check the docs for the rest

[jahangir]

Hello,
This thread is quite old, but if this helps others who are looking for the same solution for adding multiple variants to the cart at once.

You can use MultiVariants ‑ Bulk Order to allows your customers to order multiple variants and quantities of the same product in just one click.

Here is the demo, you can take a look.