Getting a new cart after adding the product in decoupled frontend

Question

I'm using the headless Craft together with decoupled frontend on Nuxt.js. I have to implement Craft Commerce 3 cart logic on the frontend, for that purpose I'm using graphQl/axios requests.

However each time I call http://example.com?action=commerce/cart/update-cart&note=from+ajax with cart payload it returns me a new cart with added product (doesn't update the current cart, but returns a new cart each time).

Is there something I'm missing in my payload/headers to keep the same cart?

Answer 1

UPD: after some hours of research I found the solution in this topic:

CORS preflight check failing for AJAX login form on different domain

Also I had to pass the orderNumber parameter with the value of cart number in payload.

However I have a different issue now. First I call ?action=commerce/cart/load-cart&note=from+ajax&number={number} to load my stored card into the session. Then I call action=commerce/cart/get-cart&note=from+ajax to get the content of the cart I loaded in step one, but it returns me a new empty cart. I suppose there is something to deal with the CraftSessionId in headers, am I right?

Answer 2

UPD 2: Spending more hours gave me the solution:

It seems like Ajax generates a new sessionId with each call, so it's impossible to preserve cart along with session Id in that case. As workaround I was trying to pass session id cookie manually, but it was rejected by Axios.

What I have found is that you can actually call action=commerce/cart/get-cart&note=from+ajax as POST request with passing the following body:

{
    "orderNumber": "{{ number of a cart }}"
}

So it can be used to load the cart you actually need. Therefore there is no need to use ?action=commerce/cart/load-cart&note=from+ajax&number={number} cause it works only with sessions.

The only thing you need is to store cart number in your localStorage or store to pass it as body parameter