How to handle AJAX cart discount item separation issues?

Technical Q&A
1

I am currently creaing a cart using the Cart AJAX API, handling increasing/decreasing quantity and removing items.
I am running into a bug where when a X for Y discount (Buy 2 get 50% in my example) it splits those items onto new lines, this makes the cart on the frontend look very confusing and messy.

cart example.png
cart example.png497×1071 33.3 KB

I have tried many things to try to wordaround what is happening, including;

  • Storing the cart in local browser storage and merging all items with the same variant id together, other than discounted items which sit on different line.
  • Storing the cart with merged variant ids and kept a seperate locally stored ‘updates’ object which handling the update.js endpoint to update the cart.

Everthing I did to try to fix this seemed to break my quantity controls, It seems that shopify added the merged products up to how many lines where in the original cart.js endpoint. It was very strange.

At this point im stuck, and I am wondering if anybody else has found a workaround or if there is nothing we can do about this issue.

Thanks

2

The behavior you described with the X for Y discount splitting items onto new lines in the cart is a known limitation in Shopify’s default cart behavior. When applying discounts like “Buy X, Get Y” or any other discounts that modify the line items, it can result in separate line items for each discounted item.

Unfortunately, there is no direct built-in solution within the Shopify platform to automatically merge these line items into a single line. However, you can consider implementing some custom logic to improve the display and user experience of the cart.

Here are a few potential workarounds you can explore:

  1. Visual representation: Instead of displaying each line item separately, you can visually group or stack the discounted items together to indicate that they are part of the same discount. This can be achieved by customizing the cart template in your Shopify theme.

  2. Custom line item merging: You mentioned trying to merge line items with the same variant ID, except for discounted items. To make this approach work, you would need to carefully manage the logic for updating quantities and removing items to ensure that the merging is handled correctly. This can be complex, and it’s important to thoroughly test and handle edge cases to avoid any unintended issues.

  3. Custom cart display: Consider building a custom cart interface using Shopify’s Storefront API or the AJAX Cart API. With this approach, you have more control over how the cart is displayed and can implement custom logic to merge and present the line items in a desired format.

It’s important to note that implementing these workarounds may require some development expertise and careful consideration of the specific requirements and constraints of your project.

3

I did try to create a Custom Cart Display via locally storing a copy of the cart in the browser which I would then update everytime the cart changes and use to display it on my frontend.

For the locally stored cart, I would then merge the copys of the products other than any that have a discounted price. But handling the increasing or decreasing of quantities would act odd, I think the quantity was multiplying by how many items were in the cart.js endpoint.
I couldnt find a way around this, do you have any suggestions?