Shopify Sense / Adding multiple products to the cart, on the product page

Technical Q&A
, , ,
1

Hello Shopify Communty,

The task is paid for, provided the solution is not straightforward!

I am currently working in Shopify’s Sense theme and, in connection with that, I need to rewrite their Add To Cart function so that it can add more than one product to the cart at a time.

I have a setup where some additional products have been added to the product page, which the customer can add to a so-called bundle. When the customer clicks “add to cart” on the main product, it should add not only the main product but also the selected products in the bundle to the cart. Each bundle product has an associated form, just like the main product.

Here is Shopify’s Add To Cart script:

https://pastebin.com/ECcXk3hq

I imagine creating a forEach loop over each selected bundle product and creating a new formData for each one, then merging them all together with the main product’s formData. However, I haven’t been able to make it work completely.

You can read Shopify’s Cart API Documentation on the subject here:

https://shopify.dev/docs/api/ajax/reference/cart

2

In simple scenarios just use javascript to click the other add-to-cart buttons AFTER each previous add-to-cart function finishes; keeping in mind being able to continue even if any of the variants cannot be added to the cart by being unavailable or out of stock,etc.

Otherwise either consolidate all the forms into one form, or remove the extra forms instead making all the inputs standalone that reference the main form using the inputs form attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form

For the name attribute using name=“id[]” and value attribute value=“{{ variant.id }}” ; any main selects need it’s name attribute modified as well to name=“id[]”, or using updates brackets like the cart form or quick-order-list section does.

Look at Dawns variant-list quick-order-list section that uses the updates form submission for the carts api

https://github.com/Shopify/dawn/blob/main/sections/quick-order-list.liquid

https://github.com/Shopify/dawn/blob/main/snippets/quick-order-list-row.liquid

https://github.com/Shopify/dawn/blob/main/snippets/quantity-input.liquid#L23C6-L23C6

3

Hi,

Would you mind to share your product URL and password if required.

You can use private msg if their is any privacy concern.