We ran into a bug in the Cart API. On the cart page, we have the option to show the cart items ordered by product_id instead of the default order (by time added). So all added variants of a product will be displayed as grouped.
When the customer changes the quantity of one of the items, we use the line_item.key to process this change using the {{ routes.cart_change_url }} endpoint.
This all works fine and changes are processed correctly, when looking at the cart data at /cart?format=json
However, when the customer proceeds to checkout, the updated quantities are not correct anymore. It seems like the quantities are linked to the line_item.index
So for example, in the cart I have 3 products:
Product 1 - variant A (qty 1)
Product 2 - variant A (qty 1)
Product 1 - variant B (qty 1)
On the cart page, these are displayed based on the product_id order:
Product 1 - variant A (qty 1)
Product 1 - variant B (qty 1)
Product 2 - variant A (qty 1)
The customer updates the quantity of one of the products:
Product 1 - variant A (qty 1)
Product 1 - variant B (qty 5)
Product 2 - variant A (qty 1)
Then proceeds to checkout, where the quantities are not correct anymore:
Product 1 - variant A (qty 1)
Product 2 - variant A (qty 5)
Product 1 - variant B (qty 1)
When returning to the cart page from the checkout, the quantities are also not correct anymore.
Hi, these checks all pass. After processing the quantity change (using line_item.key and the /cart/change.js endpoint) the changes are reflected correctly on the /cart?format=json endpoint. It’s not wrong until proceeding to the checkout where the inconsistency shows up. Then after the user navigates from the checkout back to the cart page, the /cart?format=json endpoint has the wrong data which is different from the same /cart?format=json endpoint data before proceeding to checkout.
This does make be believe this is an actual bug in the Cart API itself.
If anyone is ever looking for an answer here, the issue is when the inputs in the form being submitted by the checkout button are in a different order than the cart json. For example, we were displaying items in the cart with different grouping and only had a quantity input for each, so when the cart form was submitted to go to checkout, the quantity inputs were submitted in the order they were displayed, not connected to a specific line item key or variant id, etc.
Our solution was to move these inputs outside of the form, simplify the form itself, and handle the cart update events via javascript separately. At that point, submitting the form resulted in submitting whatever state the cart.json was in, rather than tied to any visual display order.