AJAX API - Add items to cart, order of items changed

[jtaylormatchles]

Quite some time ago we implemented our own add to cart code in our theme, for a custom "product options" implementation. 

In doing so, we found that we needed to post the array of items to /cart/add.js in the REVERSE order of how we wanted them to appear in the shopping cart. 

Suddenly, in the past few days this seems to have been reversed in the implementation on the Shopify side, and I've just spent a Saturday afternoon chasing this down and changing our code.

I'd like to get some validation from the Shopify team on this, as well as some assurances that whatever they "fixed" is now functioning as they intend it to. You can't go changing behavior of APIs like that, there are far too many downstream dependencies.

[Liam]

Hi Jtaylormatchles,

Thanks for flagging this - for sure is not ideal that this change impacted your theme in this way. I'll connect with our product teams to find more details on this change and pass your feedback on. 

Cheers,

[jtaylormatchles]

Liam - some info on this would be great as it seems to have reverted back to how it behaved prior, once again causing me a ton of chaos.

[jtaylormatchles]

Still looking for some sort of confirmation / reply here, please.

[Alexander_K]

Hello Liam.
any news about it?
I see the same behavior on our website.
Also i've checked several light websites . The order of the items in the cart differs from site to site.

[jtaylormatchles]

Hi Alexander. I've reached out to them again, because this behavior flip-flopped on me again today. Someone keeps changing an implementation and it's causing absolute chaos for me.

I'm in the middle of negotiating an upgrade to Plus, so I just brought this up to my sales team, hoping that gets some attention.

[SteveKaran]

@jtaylormatchles @Liam I am experiencing similar behaviour. I am following the documentation of the Cart API to add multiple items to the cart with one click. When I started experiencing the issue within my theme, I decided to test this manually by entering the same code from my theme into my browser console, effectively bypassing any other apps/processes. Here is my code for comparison:

fetch(Theme.routes.cart_add_url + ".js", { method: "POST", headers: { "content-type": "application/json", accept: "application/json" }, body: `{"items":[{ "id": "45473501315388", "quantity": "1" }, { "id": "45473501348156", "quantity": "1" }]}`})

I have attached screenshots of the request and response, both which indicate a successful addition to the cart (note the order of the items)

Next, I manually fetch the contents of the cart with the following code:

fetch(Theme.routes.cart_url, { headers: { "accept": "application/json" }})

Here is the response from the server (note the order of the items has changed)

Since I am entering the same code used by theme manually, what could be causing the order of the items to change server side? I am testing some Cart Transform and Discount Functions, but the apps are not running, so they can't be affecting this behaviour.

Any insights as to what might be causing this would be greatly appreciated.

[jtaylormatchles]

I have a very lengthy support thread with their team; a couple of months ago, they acknowledged it was an issue and the level of detail I provided let them reproduce it. 

They have since fixed it, and I'm no longer experiencing the issue. However, in my testing I did find that I needed to clear my client side cache in order to get it to function properly again (which is wild, I have no idea why/how that would be the case). You may want to give that a try.

[SteveKaran]

@jtaylormatchlesAppreciate the update and the reply. I don't think client-side cache is an issue for me as I'm able to reproduce (as documented in my post) at will, even on the first loading of the product page. I also use private browsing where no cookies and cache are stored between browser sessions, so I strongly believe the issue is server-side. Mind you, I'm currently working on a dev store, but would hate to encounter this on a live store, so best to resolve the issue before going live.

@LiamAny ideas/insights about this issue? Ticket # is 43261348. Haven't heard back from Support just yet.

[SteveKaran]

@jtaylormatchles @Liam @Alexander_K 

Did some more testing of this quirky issue:

1. Add 2 items to the cart manually via the browser console using fetch according to the Cart API. The 2nd item added appears as the 1st item when fetching the contents of the cart.
2. Add 3 items to the cart manually via the browser console using the fetch Cart API. The 3rd item added appears as the 1st item in the cart, followed by the 2nd, then the 1st.
3. Add 3 items to the cart manually via the browser console, one at a time (3 separate calls to the Cart API). The 3rd item appears as the 1st item in the cart, followed by then 2nd, then the 1st
4. Perform tests 1-3 on a different browser, same results.
5. Perform tests 1-3 on a different dev store, same results

Given I get the same results on a different browser and store, this must be something server side. It's as if the items are being added using a stack LIFO algorithm, such that the last item added to the cart appears as the first item in the cart.

Would appreciate some guidance. Thanks!

[jtaylormatchles]

Hi - 

A little more detail for you based on my experience. The LIFO behavior you refer to is how it has always worked, and how it SHOULD work. I confirmed as much with the Shopify team.

What was happening to me, however, over a period of weeks is that the LIFO would suddently switch to FIFO, stay that way for a few days, and then switch back. It was inconsistent. 

The "caching" client side issue was only related to whether or not the session had a cookie already associated with a cart. So, for example, I could test using my main browser that I normally am on my shop with. The behavior would be consistent, but then I'd open a new private session and see that the behavior for new carts (cart as a proper object on the Shopify server side, like a session) would have flipped. 

Ever since I got through to the right team, and they investigated (took weeks) the issue was mitigated, the behavior has stayed normal - that being, the ajax cart add will manifest as LIFO when you go to the cart or order. So if that's what you are seeing, that would be correct. Until Shopify arbitrarily changes it.

[MaxDesign]

There still are inconsistencies with the cart queue order to this day. I tested on latest dawn version: when I add a discount code in the checkout and come back to the website to add more products, the newly added products are added at the end of the queue. It's only when I clear the cart and rebuild it that the items are added in correct order (from top to bottom). So discount codes are somehow messing with the queue as this recording demonstrates:  https://i.vgy.me/KfAtqr.gif

[VedranD]

Hello, 

Is solution for this ever implemented or do we have any new info? 
We are doing similar custom code to add products to cart and we want to control the order of items added to cart. 

We noticed that everything works until user enters checkout. If user has entered checkout, and goes back to site, interpretation of add.js function when it comes to item order changes, from LIFO to FIFO. And that continues to happen until you clear cart cookie, or clear cart. 

Best, 
Vedran

[SteveKaran]

Looking through my notes, it doesn't look like this was ever addressed by Shopify. The last update I received from support on the ticket was the ability to maintain the order of cart line items was going to be submitted as a feature request.

In an effort to get some more attention to this, I'd suggest opening a new ticket, reference my ticket from this thread, then see where it leads.

[jtaylormatchles]

I haven't experienced that; my primary issue is that the order of items entered through the AJAX api would change, and I could correlate that to Shopify platform changes.

They addressed it, and since it's maintained the "correct" order, which is reverse of how they are pushed.

[SteveKaran]

Interesting... I remember posting this question on Slack, where a partner provided the following link:

https://shopify.dev/changelog/cart-line-items-now-ordered-in-reverse-chronological-order-based-on-ti...

However, just now, on my dev store, I add two items to the cart and they appeared in the order I added them in (item #1 first, item #2 second). I am testing an app that uses Cart Transform, so the items in the cart were transformed into a bundle (as desired). On checkout, the items in the bundle were in the reverse order from how they were added to the cart (#2 first, #1 second).

Head-scratching... 🤕

[VedranD]

I saw that link, and it behaves according that changelog input, until you are in checkout. 

And if you go back in the site, you can try it on your dev store also, it will become FIFO. 
We tried to make a workaround to change our code to know when user visited checkout or cleared cart to change how we add items, but then we encountered another problem. 

When doing removal of items in cart, sometimes (we do not have pattern yet), it starts to behave properly again, even that cart is not fully cleared, and there we hit a wall because we did not find a pattern when change back to LIFO happens after you visit checkout. 

I'll try with new ticket. Thanks