Make cart more easily collapsible

[sstead]

Update by Myriam 21.05.2018

Description

When a customer clicks on cart dropdown, but then want to do some other action, the cart dropdown doesn't collapse and disturb navigation, until the user undertands that she has to click again on the cart icon and do it.

Expected Behavior

If I click outside the cart dropdown, the cart dropdown collapses.

Actual Behavior

The cart can only be collapsed by clicking on the shopping cart icon, which is annoying.

Steps to Reproduce

1. Add some items in your cart from any shopfront
2. Click on cart icon and see

Animated Gif/Screenshot

On mobile, when a User has created a shopping cart with many items, they're forced to scroll back to the top of the page to close it and continue shopping

Context

Cleaning up and specifying old issues.

Severity

S4. It works as expected but is a pretty annoying UX bug so keeping it as a bug. I suspect it's good first issue but needs some dev to confirm that it's easy.

Your Environment

Desktop + Mobile + Tablet
Aus/French production (retested by Myriam on French production)
Chrome

Possible Fix

If the cart dropdown is expanded from header, it should close if user clicks outside of the dropdown.

[RyanH5]

Hi there! We're first-time contributors and were hoping to help out with this issue. We noticed nobody was assigned to it, but if there’s already a solution in progress we're happy to try helping out elsewhere. Thanks!

[myriamboure]

Hey @RyanH5 and thanks for reaching out! Awesome if you want to contribute. I'm just wondering on that specific issue, @kirstenalarsen with the work Yuko is doing on UX I think it might affect that issue as well no? Maybe we don't need to fix that bug if we remove the cart dropdown and just send users to cart when they click on the trolley? Just want to make sure we don't make you develop something we finally are going to change super soon! But @RyanH5 if you want to contribute I will ping you on one or two other issues to drive you through some easy one that you can start with while we discuss the status of this one ;)

[myriamboure]

@RyanH5 I suggest for you #2414 or #1613 or #2112 or #1361 to start with for instance, so you have choices! You will find info about internationalization and how to submit a great PR on the wiki, please check it our before starting and ask if you have questions ;-) Cheers!

[kirstenalarsen]

This has been moved to project Mobile Ready as it relates to the Epic "OFN Header" and can be dealt with alongside other changes to the Cart.

Design approved cart behaviour for Closing cart:

• In mobile the back button (whether it be a swipe or a press action) should exit the user out of the shopping cart and return them to the page they came from.
• In desktop tapping outside of the cart should also close the cart dropdown - Make cart more easily collapsible #1255

[kirstenalarsen]

nb. new design for cart also includes a Close link and text

see also #2706 and #2707, zeplin: https://zpl.io/bAEMxv8

[myriamboure]

I'm not sure about the hacktoberfest label on this one, @kirstenalarsen can it be done by a newbee to the project?

[sigmundpetersen]

Yeah maybe remove both good first issue and hacktoberfest as it has become more integrated into the new design.

[kirstenalarsen]

Yep i think it's best done alongside the design issues rather than as a standalone. have removed labels

[myriamboure]

I've removed bug label as this is part of mobile ready feature and part of an epic already.