Add multiple products to cart with one button

GSLFab
Excursionist
32 0 5

Hey guys,
So we've recently added some product bundles to the website, and I've spent most of the day looking at things that try to explain how to add multiple products to the cart from AJAX to forms, but I can not wrap my head around why it's not working. I'll show what I currently have on my store, take from this article.

<script>
data = {
  items: [
    {
      quantity: 1,
      id: 2737248338005,
      properties: {
        'MAF sensor': 'Without MAF port',
        'Colour': 'Brushed Stainless'
      }},
	{
      quantity: 1,
      id: 2712481398869,
      properties: {
        'System Type': 'DPF Back',
        'Vehicle Year Model': '2022',
        'Vehicle Type': 'Dual cab'
      }},
	{
      quantity: 1,
      id: 4600435179605,
      properties: {
        'Panel Filter': 'GSL Performance Filter (+$121.90)',
        'Colour': 'Brushed Stainless'
      }}

    ]
});
  
  addAllItems(variantIdArray) {
  # split fake liquid array to make proper array
  var newVariantIdArray = array.split(',');

  # map over variant array to create an array of objects with quantity and id
  var product_data = newVariantIdArray.map(variantId => {
    return {quantity: 1, id: variantId}
  })

  # add the items to the data object we need to pass to the fetch call 
  var data = {
    items: product_data
  }
        
  fetch('/cart/add.js', {
    body: JSON.stringify(data),
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With':'xmlhttprequest'
    },
    method: 'POST'
  }).then((response) => {
    return response.json();
  }).then((json) => {
    /* yay! our products were added - do something here to indicate to the user */
    console.log('products', json)
  }).catch((err) => {
    /* uh oh, we have error. */
    console.error(err)
  });
}
</script>
<button id="add-{{ collections['Bundle1'].id }}" onclick="addAllItems('{% for product in collections['Bundle1'].products %}
	{{ product.selected_or_first_available_variant.id }}
		{% unless forloop.last %},
		{% endunless %}
	{% endfor %}'); return false;">Add to cart
</button>

 It's on this page - https://gslfab.com.au/pages/gsl-bundles
It comes up with an 'Add to cart' button (haven't styled it yet), but nothing happens when I click it. I've got the button linked from a page builder (Pagefly) and used custom html/liquid just to include a snippet I made, '{% include 'add-multiple-cart' %}' and all that code is located in the snippet.

 

Long Story Short

 

If anyone knows how to make an add to cart button, that allows me to add multiple products to cart, and select the variants similar to what's seen in the previous code (or if you have an alternate way that's easier that'll be great too), I - and I'm sure many others - would be ever greatful!

Thanks so much everyone

Replies 4 (4)

Mike_Haslam
Shopify Partner
4 0 0

Hi Did you find a solution for this?

I did something similar for a client https://macaroner.com/products/build-your-own-box

I am working on another one as well using Web Components.

 

I would first check if you are getting the right variant ids.

Here is a trick if you go to a product page and add .json to the end of address in browser it will show a json object with all the data.

I'm happy to take a look at your code ig you like.

 

I am pst timezone (California)

I followed you on instagram.
https://www.instagram.com/stories/yourshopifyguy/

Cheers,
Mike Haslam

Problem Solved? ✔Accept and Like solutions to help others.
Kind regards,
Mike Haslam
fideas
Shopify Partner
14 0 4

Hi Mike,

I've been trying out the same code and getting

Uncaught ReferenceError: addAllItems is not defined

 

Would be great if you can help fix this. I'll PM you. 

SeagraveIO
Shopify Partner
7 0 0

Mike and GSLFab - Do you guys resolve this? I have a similar problem, and would love to see how you solved yours. Best,

Robert

Kumar2573
Shopify Partner
171 8 21

<script>
document.getElementById('atcbtn_click').addEventListener('click', function(event) {
event.preventDefault();
var dataType = [];
$(".list_freq-product .meta_check:checked").each(function() {
var data = {}; // Create a new object for each iteration
data['id'] = parseInt($(this).attr('value'));
data['quantity'] = 1;
//console.log(data);
dataType.push(data);
});
const newData = {
items : [...dataType]
}
// console.log("data",newData)
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: newData,
dataType: 'json',
success: function(data) {
console.log(data);
window.location.href= '/cart'
}
});
});

</script>

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me