add multiple product to cart with one button?

Highlighted
New Member
1 0 0

You can use <input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ variant.option2 }}" /> in Liquid file for form build.

 

// Liquid

<form id="product-form__bundle-{{ product.id }}" class="product-form__bundle text-center">
{% for variant in product.variants %}
<input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ variant.option2 }}" />
{% endfor %}
<button type="button" class="addtocart"></button>
</form>

 

// Your javascript

$('.product-form__bundle .addtocart').on('click', function(){
var form = $(this).parent('form');

console.log($(form).serialize());

$.ajax({
type: "POST",
url: "/cart/add.js",
data: $(form).serialize(),
success: () => {
},
error: function(xhr, status, error) {
console.log(xhr);
},
dataType: "json",
});
});

0 Likes
Highlighted
New Member
1 0 0

What step do I need to take to input those codes?

0 Likes
Highlighted

Hi,

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.

0 Likes
Highlighted
New Member
2 0 0

Hi @VinceNg. I'm trying to have a look at your solution but the link is not working? 

0 Likes
Highlighted
Shopify Partner
116 4 16

@Bashir1 ah so sorry, we are moving to the new system, then it should take about 2-3 days.

In the meaning time, you can review our example code here: https://codepen.io/vincehappypoints/pen/xxGxRZX

Hope this helps.

 

Thanks,

Vince Nguyen | Ecommerce Consultant at HappyPoints.io
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Email me at: vince@happypoints.io
Skype: vince@happypoints.io
Highlighted
Shopify Partner
26 0 5

Hi @ave ,

I'm curious why would you want to do that? If you want to consider various pieces of advice, here is mine. How about using Upsell and Cross-sell app? With Upsell and Cross-sell tool, customers can add many products at once. Moreover, you can get sales advantages from this app. Let me know what you think. Cheers!

 

Highlighted
New Member
2 0 0

Thanks @VinceNg, this helps a lot. Another question though, is there a way to only display the button (no image, title or quantity)?

0 Likes
Highlighted
Shopify Partner
116 4 16

@Bashir1 I think yes, you can take a look at all the options here: https://shopify.github.io/buy-button-js/customization/, but my lib was out of date so I'm not so sure 100%. Just try it and see.

Vince Nguyen | Ecommerce Consultant at HappyPoints.io
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Email me at: vince@happypoints.io
Skype: vince@happypoints.io
0 Likes