Openfoodnetwork: [mobile ux] edit cart displaying on home tab + shop tab; check out displays snail

[daniellemoorhead]

Description

Edit cart screen displays the home tab content, and then seems to break shop tab.

Expected Behavior

When I click 'Edit cart' I am taken to the list of products in my cart (in which tab @yukoosawa does the edit cart detail go?), and I can then click on 'shop' tab which takes me back to the product list, with no cart product list displaying

Actual Behaviour

When I click 'Edit cart' I am taken to the home tab, with the content above and then the list of products in my cart displays underneath.

I then click on 'shop tab' and I am taken to the shop tab but it thinks I've done a search, displays a weird message, shows the loading icon continually, and also displays the cart underneath it all. (note: if I edit the cart here and then hit update I am taken back to the home tab with the updated cart displaying underneath copy.)

Then I try to check out - snail fail :(

Steps to Reproduce

1. Add a product to your cart
2. Scroll to end of product list, click on 'Edit cart'
3. Home tab opens, list of products display underneath the shopfront copy
4. Click on shop tab
5. Shop tab opens, zero search results + loading icon + error message + variables not processing displays with edit cart list.
6. Update an item in the cart, then hit update
7. Home tab opens, list of products that has been updated displays underneath the shopfront copy.
8. Open

Animated Gif/Screenshot

https://www.loom.com/share/4565ba63167b4e938bfde078341f7cbe

Workaround

No workaround; checkout broke.

Severity

Your Environment

• Version used: UK staging
• Browser name and version: Chrome Version 79.0.3945.117 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Desktop Apple 10.14.6

[Matt-Yorkley]

I'm looking at this now. It seems like the most sensible solution is to remove the tabs from the cart and checkout pages. I've made a very quick PR, but it'll need some product input / feedback.

[yukoosawa]

@daniellemoorhead As per production today, Edit Cart should not belong to any tab. All shop header tabs are 'off' and can be selected to move the user back to shopfront section.

If we're planning to remove the shop header/tabs from the cart and checkout flows (these flows were out-of-scope for mobile ux 2018) then please make sure there's an easy way to go back to the current shop.

[luisramos0]

This is a really interesting UX problem.
First I thought this was totally wrong because we need to keep the user in the context and keep the tabs there.
But then I thought a lot of the commercial ecommerce websites will remove exactly this context so that the user has less opportunity to get out of the funnel, basically, all the seller wants is the user to click on the golden "checkout" button :-)

EDITED: I think I'd still want to keep the tabs and find another solution for this issue.

[Matt-Yorkley]

I've made a placeholder issue for discussing and iterating on these UX changes: #4711