Added add to cart behavior global setting #744

tyleralsbury · 2021-10-06T15:06:42Z

Why are these changes introduced?

What approach did you take?

Added a new category of global settings for cart and included a setting in there. I used a dropdown to allow for future expansion of options such as a minicart or cart drawer.

Note that I included it as a global setting rather than in each section so that the merchant can configure it broadly throughout their theme. We may want to add an overriding setting in each section that allows them more granular control if we see the need.

Demo links

Store
Editor

Checklist

tyleralsbury · 2021-10-06T15:07:58Z

cc @melissaperreault for alignment on the phrasing. I'm not sure if what I put is ideal.

melissaperreault

Thank you Tyler! I added my first impression but would like to take the time to reflect on it before accepting any of my suggestions. I'll keep you posted very soon!

bakura10 · 2021-10-07T04:46:13Z

Nice !

regarding the naming I think the convention in all themes until now was to call the setting « Cart type » and the values being « Page » and « Drawer ».

It may be nice to keep the same to ensure compatibility with previous documentation.

ludoboludo

Noticed an issue with error messaging. Not sure if it's related to the PR.

ludoboludo · 2021-10-07T17:32:00Z

assets/product-form.js

@@ -10,9 +10,11 @@ if (!customElements.get('product-form')) {
    }

    onSubmitHandler(evt) {
+      if (this.dataset.addToCartBehavior == 'go_to_cart') return;


I think we could move this right after the this.handleErrorMessage(); so we still notify the user on the product page if there isn't more of this product ?
Here is some errors I noticed on the cart while testing it: video. But Let me know in case it was just local issues.

There seem to be an issue coming from dynamic checkout buttons 🤔 on the cart page: screenshot.

For the first issue with the cart error, I'm thinking it might be a local environment issue (or a bug that came from elsewhere) since I didn't change any of the actual cart JS.

For the second issue, I'm wondering if we should do anything to change that... my thought is, the merchant is looking to effectively take the user right to the cart page and if we were to show an error on the product page, then that would mean we're still making an AJAX call and then sending them there only if there's a success. This will slow things down a lot compared to what I'm doing right now which is effectively just submitting the form (basically the no-js flow).

I do find it interesting that the cart can't auto-adjust though, but I wonder if that's a limitation of the Liquid API. Like when you go to the cart page, it would make sense for the Liquid to have an awareness that the total quantity is higher than the available quantity. Because again, if the Liquid doesn't have that available, it's another situation where we'd need to make the check on the cart page when the page load via AJAX and then make adjustments. This also goes against one of our theme development principles of "don't do DOM adjustments prior to user input".

Yeah it's kind of an odd situation. I think that if I can't add the product to the cart because there is none left/I've added them all already, then don't take me to the cart. Let me know on the spot rather than make me wait and load a new page to tell me that 🤔

It's kind of like a frustrating flow there was with recaptcha where sometimes you'd need to go through captcha verification to just be told the email was already registered or something. Ideally if something is wrong or can't be done, don't make me wait and tell me right away.

My 🪙 🪙 🙂

Yeah, the problem is just that it would cause a delay in all of the cases where the action is valid since we'd need to do a round-trip AJAX call and then redirect to the cart anyway. Since the checkout itself can correct this, I think it makes sense for us to leave this behaviour in because the alternative is too clunky.

I think we need to add more logic in here then.
So that if this.dataset.addToCartBehavior == 'go_to_cart' is true we run a check on the product quantity available before going to the cart page with a fetch 🤔

melissaperreault · 2021-10-12T19:17:19Z

regarding the naming I think the convention in all themes until now was to call the setting

Thank you @bakura10 for the shared context and contribution! Seems like a very common practice that I observed in other themes as well. 👍

@tyleralsbury Let's follow the current pattern, I'll make the most recent suggestion to follow this hierarchy and removed the previous ones to avoid confusion:

Cart type:
- Page
- Popup notification (default)

Why Popup notification? Because it is not only a simple popup, the information displayed on the component are not adding up, it only displays the latest item added to cart in a form of a notification that can be dismissed.

locales/en.default.schema.json

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

melissaperreault · 2021-10-25T14:28:19Z

config/settings_schema.json

+        "options": [
+          {
+            "value": "cart_notification",
+            "label": "t:settings_schema.cart.settings.add_to_cart_behavior.cart_notification.label"
+          },
+          {
+            "value": "go_to_cart",
+            "label": "t:settings_schema.cart.settings.add_to_cart_behavior.go_to_cart.label"
+          }
+        ],


Suggested change

"options": [

{

"value": "cart_notification",

"label": "t:settings_schema.cart.settings.add_to_cart_behavior.cart_notification.label"

},

{

"value": "go_to_cart",

"label": "t:settings_schema.cart.settings.add_to_cart_behavior.go_to_cart.label"

}

],

"options": [

{

"value": "go_to_cart",

"label": "t:settings_schema.cart.settings.add_to_cart_behavior.go_to_cart.label"

},

{

"value": "cart_notification",

"label": "t:settings_schema.cart.settings.add_to_cart_behavior.cart_notification.label"

}

],

I would like to order the options alphabetically please! 🙏

melissaperreault

Thank you Tyler! I just revised the behaviour for both and here is my additional feedback.

When cart type is set to Page, is it possible to keep the loading spinner to give buyers the success feedback something is going on until the cart page load? We currently lost it and I got anxious clicking add to cart didn't succeed without it until the page finally loads. (Screen recording of what I mean)

melissaperreault · 2021-11-16T21:47:25Z

UX note

To consider the language update for the Cart type setting from this work effort #877

ludoboludo · 2022-04-25T20:24:00Z

Closing this as I opened a new PR to tackle it 👍 #1638

Added go to cart when adding

5ccd564

tyleralsbury changed the title ~~Added go to cart when adding~~ Added add to cart behavior global setting Oct 6, 2021

melissaperreault reviewed Oct 7, 2021

View reviewed changes

ludoboludo self-requested a review October 7, 2021 16:42

ludoboludo reviewed Oct 7, 2021

View reviewed changes

melissaperreault reviewed Oct 12, 2021

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

melissaperreault reviewed Oct 12, 2021

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

ludoboludo mentioned this pull request Oct 12, 2021

=Add a enable/disable notification for cart, like in Debut #754

Closed

4 tasks

tyleralsbury and others added 2 commits October 19, 2021 12:18

Update locales/en.default.schema.json

d95ef70

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

Update locales/en.default.schema.json

f2f35c3

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

tyleralsbury requested review from melissaperreault and ludoboludo October 21, 2021 18:21

tyleralsbury added this to In review in Dawn: Iterations Roadmap Oct 21, 2021

Update 14 translation files

2750186

melissaperreault reviewed Oct 25, 2021

View reviewed changes

Update 6 translation files

3a96ff1

tyleralsbury mentioned this pull request Apr 1, 2022

Option to go straight to cart upon add to cart. #732

Closed

ludoboludo mentioned this pull request Apr 25, 2022

Cart type = page #1638

Merged

12 tasks

ludoboludo closed this Apr 25, 2022

andrewetchen deleted the add-to-cart-behaviours branch February 3, 2023 02:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added add to cart behavior global setting #744

Added add to cart behavior global setting #744

tyleralsbury commented Oct 6, 2021 •

edited by ludoboludo

tyleralsbury commented Oct 6, 2021

melissaperreault left a comment

bakura10 commented Oct 7, 2021

ludoboludo left a comment

ludoboludo Oct 7, 2021

tyleralsbury Oct 7, 2021 •

edited

ludoboludo Oct 15, 2021

tyleralsbury Oct 19, 2021

ludoboludo Oct 21, 2021

melissaperreault commented Oct 12, 2021 •

edited

melissaperreault Oct 25, 2021

melissaperreault left a comment

melissaperreault commented Nov 16, 2021

ludoboludo commented Apr 25, 2022

Added add to cart behavior global setting #744

Added add to cart behavior global setting #744

Conversation

tyleralsbury commented Oct 6, 2021 • edited by ludoboludo

tyleralsbury commented Oct 6, 2021

melissaperreault left a comment

Choose a reason for hiding this comment

bakura10 commented Oct 7, 2021

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo Oct 7, 2021

Choose a reason for hiding this comment

tyleralsbury Oct 7, 2021 • edited

Choose a reason for hiding this comment

ludoboludo Oct 15, 2021

Choose a reason for hiding this comment

tyleralsbury Oct 19, 2021

Choose a reason for hiding this comment

ludoboludo Oct 21, 2021

Choose a reason for hiding this comment

melissaperreault commented Oct 12, 2021 • edited

melissaperreault Oct 25, 2021

Choose a reason for hiding this comment

melissaperreault left a comment

Choose a reason for hiding this comment

melissaperreault commented Nov 16, 2021

UX note

ludoboludo commented Apr 25, 2022

tyleralsbury commented Oct 6, 2021 •

edited by ludoboludo

tyleralsbury Oct 7, 2021 •

edited

melissaperreault commented Oct 12, 2021 •

edited