Adding multiple variants to cart using items array

Highlighted
Tourist
6 0 1

When adding items to the cart the docs mention that 'You can add multiple variants to the cart by appending more objects in the items array'. (https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#add-to-cart)

 

This does not seem to work for me, even with one item in the array like they are using in their example.

 

I can get one item to add by changing the data to this:

{
    quantity: 1,
    id: 20665810092102
}

However, when the data is changed to this:

{
    items: [
        {
            quantity: 1,
            id: 20665810092102
        }
    ]
}

I then get an error. The error I am getting is in the console is '[shop_events_listener] Error in handleXhrDone: e.id is undefined'. Has anyone managed to get this working?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
653 88 93

Hey @OwenLD,

 

It's working for me - I get a warning after it completes, but the items are added to cart. The warning appears to be from the analytics code, but it shouldn't affect the add to cart. Have you checked cart afterwards? It could also be caused by some custom JS in the theme - can you provide the shop URL (reply or DM)?

0 Likes
Highlighted
Tourist
6 0 1

Hi @scottydont. Thanks for the reply.

 

After looking at this again it seems that I was setting the wrong content-type on my request.

 

My request now looks like this:

const data = {
	items: [
		{
			quantity: 1,
			id: variantid1
		},
		{
			quantity: 2,
			id: variantid2
		}
	]
};

const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify(data));

This now works as expected.

1 Like
Highlighted
Tourist
6 0 1

Hi @scottydont,

 

I am now trying to get error reporting working on the ajax cart. When the user adds more quantity to the cart than is in stock, I want to return an erorr.

 

For example if there is a variant with 10 stock, I don't want the user to be able to add more than 10.

 

The response status is 200 even when the user adds more than are in stock, is this expected?

 

The only way I have managed to get this working so far is by adding the items one by one to the cart and queueing the ajax calls. This is not ideal as it takes longer than adding all the items in one ajax call.

 

Is there a way I can get the error messaging with one ajax call for multiple items?

 

EDIT: The following is required on the request to get error reporting working:

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Maybe this should be added to the docs as not everyone uses jQuery? Could save people a lot of time.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
653 88 93

Hey @OwenLD,

 

You should hit a 422: 

 

{"status":422,"message":"Cart Error","description":"You can't add more ... to the cart."}

Is the product configured to oversell? Can you share a link to the product page (in reply or DM)?

 

Also, the variant.inventory_quantity might be handy here too (for client-side validation).

0 Likes
Highlighted
Shopify Staff
Shopify Staff
653 88 93

Ah sorry missed the last part of your reply, so it works when you set a X-Requested-With header? Interesting, I'll dig deeper. Are you able to share a demo page or some vanilla JS examples?

0 Likes
Tourist
6 0 1

Hi @scottydont,

 

When I was testing, the request would always return a 200 without a X-Requested-With header. Regardless of what you are adding to the cart.

 

This is what my request looks like:

function request(success) {
	const xhr = new XMLHttpRequest();
	xhr.open('POST', '/cart/add.js', true);
	xhr.onreadystatechange = () => {
		if (xhr.readyState > 3) success(xhr);
	};
	xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
	xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	xhr.send(JSON.stringify({items: items}));
}

Where 'items' is an array of selected variants.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
653 88 93

I'm able to replicate. This is being discussed internally. Thanks for reporting.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
653 88 93

Hey @OwenLD,

 

This has been resolved, the response should now be consistent.

1 Like
Highlighted
New Member
3 0 0

Hi, I'm having the same problem. I don't receive any error in the console, but the script in "shop_events_list..." that is waiting for the call to cart/add.js is failing to parse the response and because of that, pushing an undefined product to enhanced ecommerce (G. analytics).

This also generates problem on our G. Analytics reports

0 Likes