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.

  var addData = {
    'id':21373873027, /* for testing, change this to a variant ID on your store */
  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 */
  }).catch(function(err) {
    /* uh oh, we have error. */