Stuck on cart, if item becomes out of stock during shopping journey

[filipefurtad0]

Description

After a customer visits the shopfront and adds items to cart, it can happen that the stock is reduced, making those items unavailable, before the customer checks out. If this happens, and the customer attempts to check out, he is redirected to the cart page, where the red banner displays with "An item in your cart has become unavailable." Also, in front of the respective item, a red text indicates "Insufficient stock available, only xxx remaining" - pic below.

Now, at this point, the user is "stuck" in the /cart page. Even if the number of items is reduced (either introducing a number or using the small down-arrow) till the "insufficient stock" warning disappears, it is not possible, as the buttons below in [brackets], only leave you on the current cart page:

• to proceed to checkout [ Checkout > ]
• go back to the shopfront. [ < Continue Shopping ]
• Going "back" in the browser does not work either.

Expected Behavior

It should be possible to leave the cart page, either by:

• correcting the number of items and pressing [ Checkout > ]
• go back to the shopfront. [ < Continue Shopping ], for example, to choose from another product

Actual Behaviour

Customer gets stuck on cart page.

Steps to Reproduce

C - Customer
A - Admin

C - add X items to the cart.
C - Proceed to Checkout page
A - In Products, reduce the amount of available items, to a value below X
C - Press [Place Order Now]
-> boom!

Animated Gif/Screenshot

Workaround

Here, the only way out, is pressing the trash-bin and removing the items from the cart.

Severity

bug-s3: a feature is broken but there is a workaround
(however, perhaps this affects few users? S3 and a half? :-)

Your Environment

• Version used: v2.9.2
• Browser name and version: Firefox 75
• Operating System and version (desktop or mobile): Ubuntu 18.04

Possible Fix

[RachL]

This is something I've hit in previous test and never manage to properly reproduce, thanks @filipefurtad0 !
However the probability for customers to hit that one is higher than ever. All our hubs have little stock and all customers are ordering during the first hours of the order cycle.

I would make this one an s2. Thougths? @lin-d-hop @luisramos0 ?

[luisramos0]

I can replicate but I am not stuck in the cart page. It's just incredible bad UX :-(
Have you tried to reduce quantity and press Update?

If the stock available is changed to be insufficient on checkout, I get sent to the cart page with the warning. I cant navigate way (which is weird).
But I can change the quantity (both entering a number or pressing the small down button), and when I change the quantity I see the warning:

And the quantity field gets changes to the available quantity (it doesnt matter what was the number I entered).
So, after this if I press Update, all is good again.
So, the user is prompted to change quantity and is blocked until they change the quantity (I think this is a bit weird byut accceptable), the problem is the necessity to press the Update button, no user will guess this trick...

Also, when I press Update, if stock available is changed to zero the item is removed (and I get redirected to the shop page if there are no items in the cart), if quantity is above 0 it stays in the cart page.

I think a simple solution to improve the UX in this cart experience is to add some javascript code that will highlight the Update button when there are unsaved changes in the quantity fields.
Another better but not so quick option would be to remove the update button and update the server everytime the user changes the quantity in this page. This is what happens in the shop page.

Thoughts?

[luisramos0]

oh, also, one improvement here would be to improve the messages with a CTA: tell the user to update the quantity. "An item in your cart has become unavailable, please update the quantity of the item and press the Update button".

[filipefurtad0]

Ohh. My bad - I can't believe I did not try the update button!
Thank you @luisramos0 for investigating this is detail!

I guess for me the update button became invisible mostly because - and as you say - the shopfront-page has a different/opposite behaviour, i.e.: it updates automatically when the quantity is changed.

So, I see two situations, after stock reduction,
a) The user wants to checkout anyway - needs to adjust cart
For sure, changing the text would be a great (and fast?) improvement, as it would point out what to do, to get unlocked, and proceed with the purchase.

b) The user does not want to checkout - just wants to leave
It would be good that the user can either navigate away or that the Continue Shopping button works, without having to make adjustments to the cart.

Would there be any advantage in introducing an Update button in the shopfront instead of removing it from the /cart page? This would mean not updating the server every time the user changes the quantity in the shopfront - any foreseeable gain in performance?

[luisramos0]

yeah, there would be some gain in performance but I think we should remove the update button and send to the server alll the user interactions. These changes of quantities in the cart wont be a major load on the server anyway.

[filipefurtad0]

Removing the update button sounds great to me, especially if there is a negligible effect on performance. This way, the shopfront and the cart will work in a similar way 👍

[luisramos0]

Filipe FYI
I just realized we have an extra modal (not an alert) to show out of stock in some particular concurrent situations.
This modal is being tested in specs but I cant replicate the scenario manually 🙈
Here's the code of the test:

openfoodnetwork/spec/features/consumer/shopping/shopping_spec.rb

Line 323 in 9e43661

describe "when a product goes out of stock just before it's added to the cart" do

[filipefurtad0]

Thank you very much for pointing this out @luisramos0. I'll see if I can replicate this manually.

I am wondering about a slightly different scenario:
How should the system handle the closing of an order-cycle, during the shopping-journey? I just met the snail by:

• User: populating the cart
• User: proceeding to check-out
• Admin: closing the order-cycle in which some products from the above cart are included
• User: pressing Place order now

Strangely, Bugsnag did not get triggered. This is reproducible, and perhaps worth a separate issue. Pinging @RachL @lin-d-hop on this as well.

Update: This is now issue #5372

[filipefurtad0]

Hey @luisramos0 ,

I think the modal described on the rspec above in line 323 is this one:

"Reduced stock available

While you've been shopping, the stock levels for one or more of the products in your cart have reduced. Here's what's changed:

Cachupa - 1kg is now out of stock."

This modal can also contain a slightly different text:

"Reduced Stock Available - While you've been shopping, the stock levels for one or more of the products in your cart have reduced. Here's what's changed:

Cachupa - 1kg is now only 5 remaining."

This can be reproduced by:

1. admin: seting a variants' amount to "on demand"
2. user: going to /shop
3. admin: reducing the amount to zero
4. user: inserting any number in the items amount triggers the modals above

I've never seen this modal before! Below is the usual one, which happens when one increases an amount beyond the initially set limit, when the page was loaded:

"Insufficient stock available, only 5 remaining"

I hope this helps!

[luisramos0]

thanks Filipe, that helps a lot. Now I see it's in the shop page, not the cart.

[tschumilas]

@RachL asked above if this should be an s2. I'd say yes --- given how busy shops are right now. And - while there is a work-a-round for the shopper (pressing update) - its not very clear thats what they have to do. Is it possible to at least change the direction to the consumer quickly? (as @luisramos0 notes above) ??

[kirstenalarsen]

i'm fine with that - if @filipefurtad0 can't see the update button I totally get that customers can't. If it is relatively easy to remove the need for the update button I would say go so far as to do that. This would definitely qualify as response in the MOSS project and I will check with @NickWeir63 as to the best way to keep track of these

[mkllnk]

Design ideas from the delivery train meeting:

• Highlight the input box that needs updating (red border).
• Highlight update button when form has been changed.
• Disable Checkout button until the form has been saved.

[Matt-Yorkley]

@filipefurtad0's point at the end: the user can't easily navigate away from the page at this point, they get repeatedly redirected back to the cart unless they correctly perform all the required steps manually.

[Matt-Yorkley]

I think the "Highlight update button when form has been changed" bit would be great in general, and not just for this specific issue.

[RachL]

@filipefurtad0's point at the end: the user can't easily navigate away from the page at this point, they get repeatedly redirected back to the cart unless they correctly perform all the required steps manually.

So the "continue shopping" button is not available?

[filipefurtad0]

@RachL It's available, you can click it, but you get redirected back to the cart page - the user is really stuck :-)

"Highlight update button when form has been changed" sound like a great improvement here. Also, @luisramos0 mentioned, that changing the text from the error would additionally help the user know what to do.

[RachL]

Yes changing the text is really important. But I don't understand why we don't want the user to continue shopping 🤔

[luisramos0]

@RachL because the cart is in a state the system cant really handle in the other pages like shop and checkout.
Could be fixed but maybe not straight forward. I'd rather keep that behavior and go with the other easy fixes proposed:

• change message, highlight input box, highlight update button and disable checkout button.

[filipefurtad0]

Sounds good @luisramos0. Then perhaps we should disable the Continue Shopping button as well? At least until the changes are made, which allow pressing the Update button.

Update: actually, we should disable both the Continue Shopping and the Checkout button, when the page is in this state, as none of them works.

[luisramos0]

agree @filipefurtad0

I just noticed we have something different to the Update button when editing a completed order:

[filipefurtad0]

This looks great as well @luisramos0.

The Save Changes covers all functionality of the Update button and has much better UX I think. Implementing this and removing the update would be a good solution too, especially if combined with the design solutions above:

• changing message, highlight input box, and disabling continue shopping/checkout buttons.

[luisramos0]

yeah, I think we agreed not to move the update button though :-)

[filipefurtad0]

Oh, so I misunderstood your suggestion :-) I interpreted this as a separate option for solving this. Please disregard the comment above then - sorry!

[kirstenalarsen]

I think we should go ahead with the solution described above so we can just get this sorted

AND I can't help wondering why we don't just automatically amend the cart to remove out of stock items and notify the customer. But anyway, fix above is a good step forward