/cart/update.js using fetch API

Highlighted
Tourist
3 0 2

Hi all!

First time posting here but long-time hoarder of knowledge from previous posts.

I've written some js/liquid code to automatically add a product to the cart if the cart meets certain conditions. To do this, I used /cart/add.js with the Javascript fetch api as below (I'm trying not to add any new jQuery code to our site). This works correctly and successfully adds the item to the cart.

Shopify.Cart.GWP.add = function(gwp_id) {
    let addData = {
      'id':gwp_id,
      'quantity':1
    };

    fetch('/cart/add.js', {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(addData)
    }).then(function (data) {
      if (data.status == 200) {
        window.location.reload;
        return
      }
      else {
        console.log('Request returned an error', data)
      };
    })
    .catch(function (error) {
      console.log('Request failed', error);
    });
  };

However, I am not able to use a similar method to POST to /cart/update.js or /cart/change.js. Attempting to do so results in either a 400 Bad Request or 404 error. It does, however, work when I POST to update.js or change.js using jQuery. Is there something obvious I'm missing?

Working jQuery:

jQuery.post('/cart/update.js', {updates: {gwp_id: 0}});

Erroring Javascript:

Shopify.Cart.GWP.update = function(gwp_id) {
    
    let updateData = {
      updates: {
        gwp_id: 0
      }
    }
    
    fetch('/cart/update.js', {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(updateData)
    }).then(function (data) {
      if (data.status == 200) {
        window.location.reload
        return
      }
      else {
        console.error('Request returned an error', data)
      }
    })
    .catch(function (error) {
      console.error('Request failed', error)
    });
  };

 

Also a bonus question: is it possible to update line item properties with update.js?

Thanks in advance for your help!

Highlighted
New Member
2 0 0

Interestingly I had the same issue recently. I thought my fetch posts were previously working, but I was able to get the request to not return a 422 by removing the:

'X-Requested-With': 'XMLHttpRequest'
in the headers object. I know that header is for security and I believe jQuery ajax requests will add this by default.
So simply:
 
 
fetch('/cart/update.js', {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
 
0 Likes
Highlighted

I had the exact same problem with '/cart/change.js' only. I had to make sure my data was presented as follow:

JSON.stringify({"quantity": 1,"id":"0123456789"})

 instead of 

JSON.stringify({quantity: 1,id:0123456789})

 

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes