Cart drawer

[tyleralsbury]

PR Summary:

In this PR we're adding a setting to set the type of cart (drawer, page - tackled separately, pop up notification) as well as the option to add a collection to the empty state of cart drawer only.

Those new options along with some of the old settings (show vendor and enable cart note) are being moved in the general settings instead of the cart template.

The cart type page will be tackled separately 👍

Why are these changes introduced?

Fixes #877

What approach did you take?

New JS file with cart-drawer.js
Some updates to cart.js and product-form.js so that it applies to both the drawer and cart page.

Other considerations

Things to check/discuss/look into:

• test when using reduced motion to see if everything is working as well (transitionend)
• is the error coming up when removing all items from the cart normal ? cartStrings errors There was an error while updating your cart. Please try again.
• color scheme setting should be added in its own PR as it's supposed to impact other drawers
• do I need a tabindex="-1" on cart-item__link ? 🤔 (I do to preserve current styling of focus outline on cart images)
• in the theme editor, the dynamic checkout/quick buy button doesn't come up on the product page when the drawer is enable but it's fine on the live version: screenshot
• if you manage to get to the cart page (by clicking on the page selector in the theme editor or manually inputing the cart page url) you will be able to see the cart drawer and cart page at the same time. When updating/tweaking the cart items on one it won't update the other: video. This does seem like an edge case though.
• remove the setting for dynamic checkout buttons and leave them on by default
• Add table roles like it's done in Add accessible table roles to cart table #1486 once approved

Testing steps/scenarios

• Test different cart styles and make sure both work with quick add, add to cart (from product page, feat. product) and on mobile and desktop.
• Try changing the quantity and make sure things are updated properly
• Are discount coming up as expected (discount on items and on the total cart)
• Are errors coming up as expected (when you can't add more to the cart)

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Notified the help.shopify.com team about updates to theme settings (current contact: Kimli)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[nicklepine]

Note: Let's also tackle this #732 option to go straight to cart page as part of the cart drawer scope:
So the setting dropdown would be something like:

Cart behaviour:

• Cart notification
• Straight to Cart
• Cart Drawer

[bredowmax]

@nicklepine can you please also consider the opposite of #732: a setting to prevent shoppers to bypass the cart page. I wrote more about this in #1609

[Oliviammarcello]

This is looking great!

I have a some notes:

• The Cart type Page setting isn't working. When I add something to the cart, nothing happens
• Update the space between the separator line and the first product from 4rem to 3.5rem. Screenshot
• Update the space between the products from 3.5rem to 3rem
• Add 3.5rem to the last product in the dropdown. Screenshot
• Can we add the same animations used for the menu item drop downs to cart notes. Video
• Can we flip the arrow for the cart notes when it is open (the same as how we do it in the menu)
• If I add text to the cart note then close the dropdown, I get this...Video
• When scrolling on mobile, text appears behind the drawer header. Video
• On mobile, products with no image are not aligned to the grid with the rest of the products. Video
• Do we have control over the roundness of the dynamic checkout buttons, they are inconsistent? Screenshot
• On mobile, dynamic checkout buttons aren't aligned horizontally. Screenshot. Also on tablet, a button is missing or the alignment is broken. Screenshot

General question: How do I test for multiple dynamic checkout buttons? I can only see 3 right now.

[andrewetchen]

Everything is looking great!

I will keep testing a things but I wanted to ask some questions on the following CSS / drawer:

[LucasLacerdaUX]

✅ Cart Drawer looks good. Tested on multiple devices and product types. Everything seems to be working as expected.
⚠️ Cart Type: Page is broken. Product Forms no longer work after you enable this setting.

[andrewetchen]

I was doing some mobile testing and found a small issue with scrolling. I wouldn't mark this as a blocker but it could be a quick fix 🤔

This is happening on my iPhone and iPad:

• Add a few items to your cart.
• Add a cart note or edit an existing note.
• Collapse the cart note and scroll.

Video

cart-drawer-_-iPhone-scrolling.mov

---

Just another small nitpick, do we want add top padding to the product and total here?

[LucasLacerdaUX]

Looks good to me. Tested on mobile, desktop and tablet and in multiple browsers.

I left one question related to the Continue shopping button for discussion.

[LucasLacerdaUX]

So, currently, this button redirects the user to collections/all. But let's say I'm browsing a product, I open the cart drawer and it's empty. Should this button:

1. Redirect me to the collections/all page, like in the Cart Page OR
2. Simply close the drawer, like in the Cart Popup?

I think Option 1 makes sense in the context of the cart page, where you don't usually have anything to shop on that page. But in a cart drawer that opens as an overlay, I'm not fully convinced of this. I think Option 2 kinda feels more natural to me - just acting as an additional close button without interrupting the user's shopping flow.

This is not really a suggestion as I'm not fully convinced of the best UX. But I just wanted to share this to get more context behind this decision and hear thoughts from others.

Cart Drawer

03-02-6iir3-evdpp.mp4

Popup notification (skip to 0:14)

03-03-9g5ga-805v7.1.mp4

[LucasLacerdaUX]

Just to add: I remember that during one of our accessibility testing, the user told us that they couldn't easily tell the difference between Close and Continue shopping buttons in the cart popup and that it was not immediately obvious that they performed the same action.

So I'm not sure replicating that behaviour here is a good solution either. But just wanted to bring this to discussion, as we currently have different behaviours for the same label in these two different cart types.

[ludoboludo]

Maybe something we can discuss with @Oliviammarcello when she is back along with @svinkle to see in terms of user experience if one makes more sense than the other 🤔
And then address as a follow up if needed.

[andrewetchen]

1. Redirect me to the collections/all page, like in the Cart Page OR
2. Simply close the drawer, like in the Cart Popup?

I think Option 1 makes sense in the context of the cart page, where you don't usually have anything to shop on that page. But in a cart drawer that opens as an overlay, I'm not fully convinced of this. I think Option 2 kinda feels more natural to me - just acting as an additional close button without interrupting the user's shopping flow.

Thanks for bringing this up, Lucas. Here's my take on the empty state "Continue shopping" button:

I agree that the "Continue shopping" button should simply close the drawer as it does feel more natural to me as well. There could be instances where users are browsing products (on the 5th or 6th collection page for example) and in the current state, if they click Continue shopping, they'd be redirected to the another collection of the same collection but on the first page. They could just hit the back button but that's probably not ideal and also leads to my next point.

Having worked on the other side of the fence (theme support), one customization request we often got was adding a setting to allow merchants to use their own/custom link for the continue shopping button. The same setting could then be added to the page and popup cart types since they also include "Continue shopping" - might be something we could add in the future perhaps. And in the case of having the Continue shopping close the drawer when the cart is empty, we could add logic to close when clicked or something along that direction.

[ludoboludo]

I agree with offering the option to the merchant to choose what it should link to as well as what the button should say. If the label is left empty, then hide the button.
Since we have two ways to close the drawer already (close button and clicking outside of the drawer), I don't think keeping the button to make it close the drawer makes that much sense.

[ludoboludo]

I created this issue to follow up and talk with designers about it: #1661

[LucasLacerdaUX]

Definitely not a blocker and can be a follow-up improvement, either as a setting or as simply changing it to close the drawer by default if we think that improves the UX.

Since we have two ways to close the drawer already (close button and clicking outside of the drawer), I don't think keeping the button to make it close the drawer makes that much sense.

I agree that it's redundant, but that's not necessarily a bad thing, especially because touch targets for the outside area is pretty small on mobile devices and the X is located at the top - not the most convenient placement to reach with your thumb.

Also, currently, the Popup Notification can be closed in three different ways: the X button, clicking outside and the Continue shopping.

[LucasLacerdaUX]

Just noticed a bug with focus management.

When using quick-add modals, focus does not return to Choose options when closing the drawer. On products with single variants, the focus returns to the Add to Cart button as expected.

Video 1 : Cart Popup (expected)

04-06-4sh77-6czdc.mp4

Video 2 : Cart Drawer (bug)

04-07-orz7p-37ize.mp4

Possible Solution

Go to quick-add.js, line 9, and replace:

      const cartNotification = document.querySelector('cart-notification');

with

      const cartNotification = document.querySelector('cart-notification') || document.querySelector('cart-drawer');

I believe that should fix it.

[andrewetchen]

Everything is looking and working great!

We could probably improve the mobile table header row spacing:

• Desktop 👍🏼
• Mobile 🤔

Might have to do with:

dawn/assets/component-cart-items.css

Lines 216 to 221 in a8ded52

	.cart-items thead tr {
	display: flex;
	justify-content: space-between;
	border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
	margin-bottom: 4rem;
	}

[andrewetchen]

Thanks for fixing the mobile table rows. The cart drawer is looking good 🎉

[LucasLacerdaUX]

Both Cart Drawer and Cart Page are working as expected! :DD

[baldurh]

@tyleralsbury was there a reason these were not implemented with the media="print" trick?