Sidebar: add 'view cart' link to sidebar

[rickybanister]

If a customer has a plan in their cart, but they haven't checked out, we display a global notice to them on page load. I believe this fades away after a short time.

In addition to that we should add a pervasive link to the sidebar inviting them to view cart:

That was a quick inspector hack and it could use design, but this would be a nice improvement.

[davemart-in]

@lcollette I think this is a good idea. Once y'all are happy with the direction of the design, if you need engineering help to implement this, please re-add it to the Manage Group Backlog project. Thanks!

[lcollette]

Roger that, @davemart-in!

[LauraSWP]

I really like this idea!

[fditrapani]

I just wanted to highlight an alternative solution we've implemented on the domain screen and that I shared with Rick as well. The idea would be to show a cart button in the page header if there's something in the cart and would save us from adding another link to the sidebar:

[rickybanister]

I'm not sure the page header feels appropriately 'global' to the site. That's why I chose the sidebar, there felt like some amount of context or relationship by putting it next to the Plan tab. Almost like a red dot, but actionable and labeled.

I think it would make sense to have other indications that you've left something in your cart on related screens (like if there's a domain in cart and you're thinking about domains, that makes sense), but I'd like for us to think through the overall anatomy of our screens and header area before committing to this. We aren't consistently using that area for primary actions yet, for instance.

Let's keep thinking it through. cc @lcollette

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[michaeldcain]

@olaolusoga @saygunnyc: It'd be great to get some design consensus on this. Adding a semi-persistent cart icon would be a much better UX than the current approaches (popover icon when cart has items on /domains, persistent icon on /plans, and essentially no access anywhere else in Calypso), would allow us to clean up a bunch of code, and close some issues related to the popover cart. Now that we've done a good bit of work on the Shopping Cart infrastructure, this would be a much easier task to tackle.

The two questions I have would be:

• is a text button the right approach? might not play well in different languages
• what happens when you click it? we could open a popover cart (like the icon on the domains page), or we could take you to Checkout with the cart step in “edit” mode

This is what Checkout look like with the cart step in "edit" mode:

[ccwalburn]

I noticed this issue is no longer stale so I wanted to provide an example in support of the importance of this request. This is an instance where a site, plan, and domain were all deleted in an attempt to empty the cart because the user could not find it: 3979625-zen

[sirbrillig]

If merged, https://github.com/Automattic/wp-calypso/pull/52890 will fix this.

[jjchrisdiehl]

Payton's PR #52890 has been merged, this can be considered 'fixed' for now. If adding a secondary notice to the sidebar is desired then please reopen.