Item_components incorrect order in liquid

Online Store and Theme Development
1

TL;DR The item_components array is returning a reversed order of component items to what checkout displays and visiting checkout and returning to cart corrects the order

The issue
We’ve noticed an issue with how item_components are rendered in Liquid on the cart page. When a bundle is added to the cart, the item_components array appears in reverse order compared to how they’re displayed at checkout. This causes the cart to show the selected bundle items in the wrong order, which can confuse customers.

Interestingly, once you visit the checkout and return to the cart, the order in item_components corrects itself to match the checkout and the expected cart transformation logic. (Which actually makes catering for this quirk even harder)

I’ve included a video example below using the Shopify Bundles app on the Horizon theme. Please watch closely to the order of the bundle components (Bag, Cap, Glasses) and how it reverses when first added to the cart, before correcting after checkout is visited.

  1. Create a bundle with 3 products using Shopify’s Bundles app (ensure products have variants so their order is visible on the product page).
  2. Set the bundle to active and view it on the Horizon theme.
  3. Add the bundle to cart and open the cart drawer: you’ll see the item_components are in reverse order compared to the product page.
  4. Proceed to checkout: component items display in the correct order.
  5. Return to the cart: the order of the component items is now also correct in the cart.

Ideally, the item_components array matches both the order output in the cart transformation and checkout. The fact that is doesn’t stay reversed means I can’t apply a simple | reverse filter to the array and correct the behaviour.

Thanks
Gabbie

2

Hey @Gabrielle_Rea :waving_hand:- good to see you in the forums again, thanks for flagging this. I think I’ve replicated what you’re seeing on my end here. Just wanted to confirm I’m looking at this correctly, here’s a video of my replication:

From what I can tell it seems like we’re seeing the exact same behaviour which is that when the bundle is added to the cart initially, we display the objects in the reverse order from how they were added when the bundle was initially created, but then at checkout it seems to display them in the correct order and retroactively applies that order to the cart display page as well?

Definitely seems like it could be a potential issue, but just wanted to confirm that I’m looking at this correctly. I think my next step will be to get in touch with our cart product team though - hope to hear from you soon!

3

Hey @Alan_G! So happy to have your help on this :smiley:

That is correct, your replication shows it too.

It becomes more of a concern for step based bundles like what our app offers. We need the cart output to match checkout (and our function output) straight away, not show the reverse until checkout is opened.

Thanks so much for your quick response and help with this.
Gabbie

4

No worries - happy to help and thanks for confirming! I’ll get in touch with our product team on this and loop back with you once I have next steps or a fix :slight_smile:

6

Hey @Gabrielle_Rea - just following up with you here! I was able to get in touch with our product team on this, and we’ve opened up an investigation into this as a probable bug. I’ll keep you in the loop in this thread here, can’t guarantee an turnaround time, but I’ll update you as soon as I can confirm a fix or get in touch if we need more info from you!

8

Hey @Alan_G thanks for following this up. Hopefully there is a fix :crossed_fingers: