search

reactioncommerce / example-storefront

Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
https://www.mailchimp.com/developer/open-commerce
Apache License 2.0
606 stars 288 forks source link

Removing last item from cart in checkout page causes visual bug #238

Closed mikemurray closed 6 years ago

mikemurray commented 6 years ago

Issue

Items can be removed at checkout which causes the checkout summary to collapse its width.

reaction___checkout

Solution

mikemurray commented 6 years ago

Comments from slack

Cassy [Yesterday at 2:39 PM] @mike I agree with you re: the Checkout demo today that the current experience of removing the last item from your cart, during checkout, is super weird! I have some ideas for how to fix it so it’s less awkward (while keeping the ability to edit item quantities in checkout, which was our goal UX-wise) – should I file a bug in the Starterkit repo for that, or is there another way we should work that out? :thinking_face: (cc @spencer maybe?)

14 replies Cassy [20 hours ago] there are also a few more UX/UI bugs unrelated to that I’ve been keeping track of for the starterkit - let me know the best way to file those

spencer [20 hours ago] I feel like we’ve changed this several times at this point and we should just stick with what we’ve decided for now and figure out how to make it a reasonable experience.

If a user removes the last item from their cart in checkout, can we just show them the empty cart message?

spencer [20 hours ago] As a customer, if I remove the last item from my cart, I should expect that I won’t stay in checkout correct?

Cassy [20 hours ago] yeah - we should at least kick them out of checkout, back to the empty cart or maybe the homepage?

spencer [20 hours ago] I’d vote back to the empty cart

Cassy [20 hours ago] I was thinking adding a “are you sure you want to remove this item?” modal would also make sense here…

spencer [20 hours ago] That’s a great idea.

Showing the empty cart doesn’t necessarily even need to be forced navigation, just if we have an empty cart when you’re in the checkout, we’ll show you the empty component

Cassy [19 hours ago] ok cool! so I think at minimum when the cart becomes empty during checkout, let’s redirect back to the empty cart so that the user understands what’s happening… (‘i just deleted all of my items and now my cart is empty, so i can’t check out.’)

Adding a modal as a failsafe for each item the user removes in checkout (either via the remove button, or by 0-ing the quantity) would also be ideal here.

Eric Dobbertin [19 hours ago] @Cassy Makes sense. Can you make two separate issues in starter kit repo?

Eric Dobbertin [19 hours ago] I’d say you can make an issue for each of the other UI/UX bugs, too. Even if we close them, it’s a place for public discussion of them

Cassy [19 hours ago] @Eric Dobbertin ok! will do.

mike [19 hours ago] @Cassy @Eric Dobbertin I added an issue here right after the retro: https://github.com/reactioncommerce/reaction-next-starterkit/issues/238

mike [19 hours ago] feel free to add your own, or modify that one if needed

Cassy [19 hours ago] @mike ahh cool! I’ll just comment on that one. thanks!