I need to add the other products from the same add to cart button

Online Store and Theme Development
1

As a default behavior of the shopify add to cart is that it adds the single product to cart, Is there a way i can gets its formData items and add other product into it?. I need to add other product into the cart.

2

Yes, you can add additional hidden form fields, with additional variant_id(s) and quantity(ies) :slight_smile:

1 Like
3

Can you provide me the some sample example?

4

You can’t add multiple products using ‘true’ FormData. Take a look at the Cart API docs (while they use the variable formData, they’re just passing an object to the API.

5

I am using this API to add a product to the cart, but the cart only updates after refreshing the page. I want to replicate the default Shopify behavior, such as showing the popup or cart drawer when a product is added. I also have the updated sections code available. How can I trigger the default cart behavior so that it works consistently across all Shopify themes? Is there a way to achieve this?

6

There is no way to trigger the behaviour across all themes, they all differ.

1 Like
7

For multiple items, sans javascript or pre javascript, set the id inputs name attribute using name=“id[]” and value attribute value=“{{ variant.id }}”
Or use the name="updates[{{variant.id}}]" value="1" quantity pattern found in order forms like in dawns quantity input used by the quick-order-list

You are asking a very BROOOOOOAD question akin to "how do theme development.
You need to just inspect/descontruct the available themes and docs as be a bit more specific in showing work so far and question.
And start from scratch in the .dev theme architecture docs and the section rendering api.

etc etc

1 Like
8

How to rendered the section from theme app extension.

let formData = {
 'items': items,
 'sections':"cart-drawer,cart-icon-bubble",
 'sections_url':'/cart?section_id=cart-drawer'
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});

The response give the updated data, but it isnot rendered properly. Is there anything we need to do to rendered the content.

9

The section rendering api just returns the content as JSON.
You still need to then act upon it.
Look at the dawn reference theme for dynamically rendering responses.

that doesn’t communicate anything to other people.
In what specific way is it not “proper”