Add item to the Shopify cart using the JavaScript Fetch API

Since usage of the Fetch API is growing I’ve started to see a few people having issue with POSTing to AJAX add.js endpoint. If you’re running into 400 (Bad Request) errors you might not have set the correct headers.

I’ve put together a very basic example of a Fetch POST so you can check the X-Requested-With headers used and then adapt it to your own code.

/*
Example code showing how to add an item to 
the cart in Shopify using the Fetch API. 
The important line is where we add the 
X-Requested-With header. Without that the 
fetch call will fail with a bad request error.
*/

(function(){
  var addData = {
    'id':21373873027, /* for testing, change this to a variant ID on your store */
    'quantity':1
  };
  fetch('/cart/add.js', {
    body: JSON.stringify(addData),
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With':'xmlhttprequest' /* XMLHttpRequest is ok too, it's case insensitive */
    },
    method: 'POST'
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    /* we have JSON */
    console.log(json)
  }).catch(function(err) {
    /* uh oh, we have error. */
    console.error(err)
  });
  
})();