Adding multiple variants to cart using items array

[OwenLD]

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?

[SBD_]

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)?

[OwenLD]

Hi @SBD_. 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.

[OwenLD]

Hi @SBD_,

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.

[SBD_]

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).

[SBD_]

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?

[OwenLD]

Hi @SBD_,

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.

[SBD_]

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

[SBD_]

Hey @OwenLD,

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

[dscnex]

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

[dscnex]

@SBD_  fyi

[SBD_]

Hey @dscnex,

Are the items added to cart? If not, can you provide a snippet of the code?

[dscnex]

They are added. The only problem is that the response from this ajax call is not processed correctly, so the event listeners don't know what products have just been added

[kjdointhings]

Same issue. Products are being added to cart but there is no response to the success callback.

[SBD_]

Hey @kjdointhings,

Can you please provide a code sample / example store url?

[kjdointhings]

The following will add the items to cart but the success callback does not fire:

    var items = [
      { quantity: 1, id: 28615271105 },
      { quantity: 1, id: 37548776065 }
    ];

    $.ajax({
      type: "POST",
      url: '/cart/add.js',
      data: { items: items },
      success: function(data) {
        console.info('success',data);
      },
      dataType: 'application/json'
    });

And this will add the items to cart, the error callback will fire, then the .always callback will fire and return the added items. Can this be addressed so the success callback fires as expected?

    var items = [
      { quantity: 1, id: 28615271105 },
      { quantity: 1, id: 37548776065 }
    ];

    $.post('/cart/add.js', {
      items: items
    })
    .done(function() {
      console.log( "success" );
    })
    .fail(function() {
      console.log( "error" );
    })
    .always(function(data) {
      console.info('finished',JSON.parse(data.responseText));
    });

[SBD_]

Hey @kjdointhings,

Those method are expecting the response to have a `application/json` content-type, so jQuery's failure callback fires.

Post to /cart/add.json instead.