Quick Add

[LucasLacerdaUX]

Why are these changes introduced?
Adds Quick Add to featured collections and collection pages.
Fixes #882 and #1307.

What approach did you take?

• Added a new show_quick_buy option to card-product.liquid. Because this card is used in multiple parts of the theme, it allows us to quickly add this functionality to any section.
• Products with no variants will show an Add to Cart button, while products with variants will display a Choose options that will load a modal once clicked.
• Modal Content: to load the modal content, we'll fetch the product page and query the MainProduct-* section. There are some pros and cons to this approach.
  • Pro: The content on the modal will follow the same order and customization from the product page. From the merchant perspective, this feels right.
  • Con: Because the modal content is supposed to be a leaner version of the product page, we must hide a lot of elements using CSS and disable some JS functionality (like URL updating).
• A new state has been added to the Add to Cart button indicating a success: Added to Cart. In this state, an aria-disabled attribute will be applied to the button so the focus is not lost (like disabled would do). This success message will stay visible for two seconds. This applies to both quick add buttons & product page buttons.
• If the /cart/add request results in an error on a Quick Buy Add to Cart (products with no variants), the button will be updated to display a Sold Out message and receive the aria-disabled attribute.

Testing steps/scenarios

• Product Cards
  • Product types
    • Product with no variants
    • Sold out product
    • Product with variants
  • Viewports
    • Mobile
    • Tablet
    • Desktop
  • Pages
    • Collection Page
    • Featured Collection section
• QuickBuy Modal
  • Test with different product page settings:
    • Desktop layout - should not change the look of the modal
    • Desktop media size - should not change the look of the modal
    • Mobile layout - should not change the look of the modal
  • Product types
    • Product with no media
    • Product with rich media as first image
    • Product with variant images + Hide other variants’ media after selecting a variant setting
  • Viewports
    • Mobile
    • Tablet
    • Desktop

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[LucasLacerdaUX]

Nothing changed on this file. Just moved it from featured-product and main-product.

[LucasLacerdaUX]

I'll do a follow up PR to combine modal styles in a single component.

Decided to skip this here to maintain the scope smaller.

[LucasLacerdaUX]

Reminder: turn on Hide whitespace when reviewing. It'll make your life a lot easier when reviewing main-product.liquid changes :)

[katycobb]

Settings look good to me!

One consideration: we've renamed the setting to reflect this being an add to cart action, not a straight-to-checkout action (which "quick buy" might suggest). So now there's a bit of a discrepancy with how it's reflected in the code vs. how it's displayed to the merchant. Maybe not a big deal? But if we were to add more of a true "quick buy/buy it now" feature in the future, we might need to revisit.

[LucasLacerdaUX]

Thats a good point, @katycobb! Thanks for bringing this up, I fully agree that it's better to refer internally to it as Quick Add instead of Quick Buy to avoid any confusion. I'll change every reference to the old name here in GitHub as well.

I'll rename everything to quick-add, including the filenames, settings, keys and component naming. However, I'll wait until the translation-plaform pushes all the remaining translations to avoid any issues with locale keys.

[bredowmax]

This is looking good functionally, but one issue design-wise: Depending on title length, this ATC can end up higher or lower, which ends up looking messy. I wish they would always be at the same height, even if that means a bit more white space for those product cards where the title was shorter

[svinkle]

@LucasLacerdaUX nice work! A couple notes:

1. When you click "Add to cart" then Esc out of the cart drawer, focus returns to the launcher as expected. After clicking "Choose options", adding to the cart, then Esc out of the cart drawer, focus is lost. I'd expect it to return to the "Choose options" control.
2. The ul/li in the gallery viewer portion seems unnecessary as it only displays one image at a time.
3. When I test with VO and open the "Choose options" model, focus does not shift to the modal the first time. It does work on subsequent test. Not sure if it's a VO/JS/perf issue?

[LucasLacerdaUX]

Thanks for the review, @svinkle. Demo links have been updated - waiting for your confirmation if role="presentation" would be a good solution before pushing it, though :)

1. When you click "Add to cart" then Esc out of the cart drawer, focus returns to the launcher as expected. After clicking "Choose options", adding to the cart, then Esc out of the cart drawer, focus is lost. I'd expect it to return to the "Choose options" control.

Great catch! Just updated the demo store to fix that.

2. The ul/li in the gallery viewer portion seems unnecessary as it only displays one image at a time.

This happens because I'm re-using the product page layout inside the modal. In order to avoid complex HTML manipulations with JS or having to add repeated elements to the page to match the expected structure, would it be a good solution to apply role="presentation" to the <ul> list and its <li> items?

3. I liked the other demo which included the auto close of the initial "Choose option" modal, sending focus to the cat drawer. Will this be implemented? I'd like to send this specifically for usability testing.

Just updated that! The demo links should now be matching that behaviour :)

The Added to Cart success message is still visible on the product page, for the time being. Waiting on UX decision if we should also remove it from there.

[svinkle]

@LucasLacerdaUX Still testing, more notes:

1. "Add to cart" and "Choose options" control labels are not unique. (When navigating via button you hear "Add to cart", "Add to cart", "Add to cart") Suggest adding a unique id to the button and h3 title. Add the aria-labelledby attribute on the button, setting the value to the id of the button then the h3. This'll include the product title in the "Add to cart" button label.
2. Check the touch target of the "Choose options" close control. Seems like there's something covering the bottom portion, right below the x icon.

[svinkle]

@LucasLacerdaUX

would it be a good solution to apply role="presentation" to the <ul> list and its <li> items?

I believe this would do the trick, good thinking. Let me know when this is available to test.

Another issue: on add to cart, I see focus moving from the "Choose options" modal, to the "Choose options" button, then to the cart drawer. Ideally focus would move from modal to modal. When the cart drawer is dismissed, then shift focus to the "Choose options" button.

[svinkle]

@LucasLacerdaUX The "Choose options" modal has an empty aria-label resulting in the screen reader announcing all content within. I'd suggest providing a label such as "Choose options for {product.title}".

[LucasLacerdaUX]

@svinkle Demo link has now been updated to fix the following issues:

• When auto-closing the modal, the focus will no longer shift to the Choose options button before moving to the cart popup.
• The gallery list and its items now have a role="presentation" attribute.
• Touch target for Choose options modal is no longer cut off by other elements.
• The Choose options modal dialog now has a aria-label with Choose options for {{ product.title }}
• Add to Cart and Choose options buttons are now receiving an aria-label with unique descriptions:
  • Add to cart now displays Add {{ product.title }} to cart
  • Choose options now displays Choose options for {{ product.title }}

For this last item, I opted for an aria-label instead of the aria-labelledby solution you suggested because:

1. We're already adding a Choose options for {{ product.title }} translation for the modal dialog, so I thought it would make sense to re-use it there.
2. In products with no media, the card title h3 is hidden by display: none which resulted in the aria-labelledby not being announced (Chrome + VO)
3. I assumed that this would result in better translations.

However, while Add {{ product.title }} to cart is more grammatically correct, does it result in a worse experience for assistive technology users? Let me know if I should revert to aria-labelledby and try to fix problem number 2.

[duygukalaycioglu]

Overall looking great! The interaction works perfectly.

Couple quick questions:

1. On mobile the add to cart is wrapping into 2 lines, this is happening on 380px width. It is probably normal for screen sizes below <320px but is there a way to not wrap them until they reach iPhone SE or at least <360px = Android? Can we increase the button width a tiny bit?

3. When I test on my phone, I don't see the loading icon. Is this expected?

4. Spacing updates for modal on mobile:

• Let's decrease the spacing above to 32px. I believe it is around 50px right now, it will help push the content in the modal above. The buyer has the "X" to close the modal.
• Let's add some spacing below "view full details link" - on mobile device, it will help creating more space for the buyer to easily click to the link, it is a little bit squished right now. 40px should be good, let's also make sure the top of the image is set to 40 px as well.

4. When I was scrolling in the modal, the scroll of the page behind is still active. (double scrolling) Is this expected or a bug?

[duygukalaycioglu]

This is looking good functionally, but one issue design-wise: Depending on title length, this ATC can end up higher or lower, which ends up looking messy. I wish they would always be at the same height, even if that means a bit more white space for those product cards where the title was shorter

Thanks for your feedback bredowmax we really appreciate it! Locking elements in specific positions on cards is not scalable for cards with large amount of metadata. i.e. When one card with less metadata is positioned next to a card with more metadata, the white space could become a very large gap which also wouldn't be an ideal experience for mobile. This is also problematic with longer product names. That said, when we visit product cards in the future, we'll definitely take your note into consideration.
We encourage you to open a new issue if you would like to share your thoughts further. 🙏

[svinkle]

@LucasLacerdaUX Looking good!

Add to cart now displays Add {{ product.title }} to cart

This violates 2.5.3: Label in Name which includes this SC failure:

• "Accessible name contains the visible label text, but the words of the visible label are not in the same order as they are in the visible label text"

This means adjusting the label Add to cart {{ product.title }}.

In products with no media, the card title h3 is hidden by display: none

Curious why this is? This means if there are no photos or anything the product title text is not displayed?

The reason why I suggested aria-labelledby is the fact that the text we need is already available in the DOM. It'd be a matter of referencing the ids in the attribute, in the correct order. And when it comes to someone using something like Google Translate, there's a better chance of successful translation due to the text being visible in the DOM.

[LucasLacerdaUX]

@svinkle I've updated to use aria-labelledby. I'm happy that I made this mistake so I could learn about 2.5.3: Label in Name. Thank you! :)

The reason it was announcing empty wasn't because the content was hidden via display: none, but because we had two <h3>s with the same id.

On products with no image + card style set to Standard, the <h3> element is located in another container so it's displayed like a product media (see image below). The other, below the image, is then hidden using CSS.

I've added a check so no duplicated ids are ever in the DOM. Should be working as expected now!

---

@duygukalaycioglu I have addressed most of your comments about mobile layout. Let me know if you have any additional feedback.

I tested on my phone and I couldn't reproduce the issues with loading spinners or the body being scrolled. I'll test on iPhone later today.

[duygukalaycioglu]

@LucasLacerdaUX The updated button widths looks great!
Pasting the additional spacing we talked today here as well.

• Right now it is a little bit challenging to click the view full details on mobile device, adding more spacing (32px) below the modal to provide more space for the buyer to be able to easily click the view full details link. (see the new spacing marked in red)

[ludoboludo]

Just sharing some initial thoughts and will continue reviewing by the end of the week:

• mentioned by Scott already but having a little visual cue on the product card that it's already been added would be great. So we don't have to go to the cart to double check if we've added it already or not.
• would be good to be able to pick a quantity like on Express even for products without variants but that can be follow up work 👍
• I'm not a big fan of doing the sold out button when all items have been added to the cart. I think there must be a better way to approach the situation, like on the product page maybe with an error message. Sold out can be confusing specifically when it's not behaving the same on the product page or if you refresh the page: video
• quick on product recommendation could be a nice follow up
• quick buy isn't coming up on the onboarding states, might not matter much and could be a lower priority follow up
• click outside the modal doesn't close it
• having different layout for the modal could be cool, so that merchants mostly using landscape type of images could show they assets in a better way: screenshot. But if that's something we're doing I'm guessing it will something on its own and for the feat. product section as well.
• the modal height changes based on the asset size, should we be worried about it ? video

I hope it's ok, I'm sharing some feedback that is out of scope for the PR but kinda ties back into it as well.

[ludoboludo]

A few more comments and questions :)

[duygukalaycioglu]

I'm not a big fan of doing the sold out button when all items have been added to the cart. I think there must be a better way to approach the situation, like on the product page maybe with an error message.

I would park further explorations about "sold out" for now, and create a separate ticket to be revisited when we work product card explorations. I agree with the product title should go to the product page, but “sold out” shouldn't. It is using deactivated button style, it would be very confusing to a buyer why it is active and linking to a page.

Re: adding a message that "this is not sold out", I don't think we have enough space to display it on product cards with images, I also think this is an edge case. @LucasLacerdaUX @ludoboludo

The modal height changes based on the asset size.

Good catch, thanks @ludoboludo! @LucasLacerdaUX If we can force the modal height to be consistent no matter the asset size, that would be awesome!

[LucasLacerdaUX]

@Oliviammarcello Addressed your suggestions! :D

For some reason only on the shoe test product, the "Add to cart" button isn't outlined. Screenshot

Oh, my bad, it's wearing the --primary style because I've added it to a selling plan to this product on the admin, but the theme isn't using any subscription app.

I don't think this should be an issue in real products. This is how it was originally implemented and not introduced by this PR (it's also there on the product page) :D

Not super pressing if we will change the 'X' pattern, so feel free to ignore if it isn't an easy fix. But the 'X' is still slightly misaligned. Screenshot.

Just increased the top by 10px so it's aligned. I can't decrease the horizontal margin because of the scrollbar, and at this moment, we can't have it aligned for both scrollbar and non-scrollbar modals in an easy way. Would you be okay if it looked like this for scrollbar and non scrollbar products?

I can explore further options in my fast follow refactor.

[kmeleta]

I'm noticing now that when quick add is first enabled, either on an existing featured collection or when adding a new one, the quick buy modal doesn't work until the page is re-initialized. I trust this isn't a problem in a production store, but it's probably not an ideal experience for merchants. I wonder if we can adjust how we include the quick add js 🤔 This may have been happening before and I dismissed it as a local glitch.

https://screenshot.click/24-12-jsdmd-rkee4.mp4

[kmeleta]

Also found an issue that's noticeable with media shadows on mobile.

[ludoboludo]

Just a few minor comments/nitpicks.

[ludoboludo]

One thing I realize might not be optimized the best way is the media sizes 🤔 Since it will most likely download an image size bigger than necessary as it's based on the logic of the product page. But probably not so big of an issue 👍 Just not the most optimized thing

[ludoboludo]

Im not sure it's something we should address here 🤔 We could be replacing the content of the size attribute with a new logic, only added through JS based on the max-width the modal is getting.
But happy to have it as a follow up/thing to look into later so that we can settle on the what we currently have.

[LucasLacerdaUX]

I've been thinking about a solution for this over the last hour and yeah, we can either use JS or duplicate the image. One would receive quick-add-hidden and the other one a quick-add-visible.

Do I want to do this in this PR? Not sure haha.

1. I think this is a smaller issue than if it was displaying these images on page load, for instance.
2. I'm not yet sure how big of an improvement this optimization would bring.

Anyway, if not part of this PR, we can include this in the follow up. I'm currently keeping a list of everything (A LOT!) we've decided to descope and I'll create individual issues once we merge this.

[kmeleta]

fwiw I think this is fine to do as a follow up because these aren't displaying on page load or anything. This PR has enough going on and optimizations aren't crucial to the functionality here.

[LucasLacerdaUX]

@kmeleta

I'm noticing now that when quick add is first enabled, either on an existing featured collection or when adding a new one, the quick buy modal doesn't work until the page is re-initialized

I wonder if that's on us to fix, though. I'm using the <script> tag in the same way as every other <script> tag on the theme. The <link> just above it loads just fine, and both <script> tags are added to the DOM - they're just never requested (confirmed via the Network tab).

The same issue happens on the Search page. If you enable filtering and sorting for the first time, they won't work in the admin until you save and wait for the page to refresh:

24-30-3bq0n-mdwxx.mp4

This sounds like a Theme Editor issue.

[kmeleta]

This sounds like a Theme Editor issue.

Sounds good 👍 Haven't noticed that issue before

[ludoboludo]

I think those are my last few comments/concerns but otherwise working very well as I would expect.
Just being nitpicky to question the last view things I'm seeing.

[ludoboludo]

I'm wondering if some spacing should be added to not cut the media shadow when set to a high vertical offset value (negative or not).

[LucasLacerdaUX]

Related to this comment by Olivia:

• Could we reduce the space between the bottom of the image and the first line of text on mobile by 1.5rem? It is a bit large. Screenshot.

Would probably be better to fix them both at once in a separate PR. It doesn't really look that broken and requires design input, so I'll add this to the list of things to fix in a follow up :D

[kmeleta]

I feel like product media list already was adding padding on the right/bottom for shadow offsets? I personally wouldn't expect additional spacing to be added to keep a shadow above the fold or anything, but probably a UX call regardless.

[ludoboludo]

One thing noticed on the cart page, here are the steps to replicate:

• have a feat. collection with quick add on the cart page
• add an item to the cart from that collection
• then go back up and change the quantity of an existing item you have in your cart

It will show the new product you just added but won't update the quantity from the item you're playing with: video

But I think that could be part of the exploration regarding updating the cart items dynamically. Just wanted to bring it up.

[ludoboludo]

It's looking good to me 🤔 👍 🚀

[LucasLacerdaUX]

Just reverted our decision to hide dynamic payment buttons on the cart page.

The button works if there is a featured product in that page, but it doesn't if there isn't:
https://user-images.githubusercontent.com/37168033/160188526-2197ad3a-7e1d-47bf-b329-dad69d7caf74.mp4

So, if we hide the payment buttons (previous):

• No Dynamic Checkout, regardless of Featured Product section being in the cart or not
• No whitespace

If we DON'T hide the payment buttons (current):

• Dynamic Checkout works when there's a Featured Product
• Whitespace if there isn't

I believe it's a better approach to keep the whitespace when not supported and to allow it to work when supported. When this issue gets fixed on the payment script side, all merchants will be able to use dynamic checkout buttons in that page without having to update their theme.

[kmeleta]

LGTM 🎉

[Oliviammarcello]

• The add to cart button for the shoe product still isn't outlined

Otherwise I think its good to go! :)

[LucasLacerdaUX]

@Oliviammarcello

The add to cart button for the shoe product still isn't outlined

This is because that product is set up as a subscription in the platform but no subscription app is installed in the theme we're previewing. It was actually introduced by a PR from June 2021 that added variant pickers, so I don't have the full context on why we made this decision.

Ludo created an issue so we can revisit this separately (#1540).

[Oliviammarcello]

LGTM!

Just as an FYI I am creating an issue to add pickup availability to the modal. This is something that came up in the product review for us to explore.

Approved by Olivia.