Add multiple products inside another product

Technical Q&A
1

So I have a build a box type product built in vueJs within shopify. It contains 5 steps in which the user must choose the initial product being a card front. Inside the product, it becomes a build-a-box type product. The steps are as follows:

  1. Write text
  2. Choose a pattern (radiobutton)
  3. Upload Photos
  4. Select a graphic panel (radiobutton)
  5. Choose a gift

On the fifth step, I would like to have the gifts be other products listed on the store under a different collection/tag. I have the ability to show the information for all of the gifts on the final step, however, I do not know how to add multiple gifts to the cart from the initial box/card product customizer.

The gifts will have a different occupancy to them similar to blackbowgiftco.ca or shopboxfox.com.

I am hoping this is possible to complete without the use of a shopify app. Is there any way to save the product id to an array and process the gifts with the original card (and the line item properties) on a single add to cart button click?

2

You can use the Ajax API to add multiple items to the cart with one call. https://shopify.dev/docs/themes/ajax-api/reference/cart#post-cart-add-js

3

Did you try to use ajax cart js to add all products at once?

4

Thank you! My dev team and I had been working with it and it was giving a few errors, we finally got it working. Appreciate the fast response.