Pwa-studio: [FEATURE]: Add to Cart - Sticky Footer for CTAs

[awilcoxa]

This issue is for the following packages:

[x ] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-devdocs
[ ] upward-js
[ ] upward-spec

This issue is a:

[ x] Bug
[ ] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

| Question | Answer |
| --------------------------- | :-----------: |
| Magento version | |
| Operating System + version | |
| node.js version (node -v) | |
| npm version (npm -v) | |

Description

The "Add to Cart" workflow from a product details page is currently implemented as a standalone CTA embedded within the page. The primary CTAs on the PDP should be displayed in a sticky footer, as indicated in the current mockups.

Additional items from design are defined below.

Expected result:

1. PDP calls to action ("Add to Cart") display in sticky footer. Currently, the only CTA is "Add to Cart" as "Buy Now" is deferred for later release.
2. Single button ("Add to Cart") should display center aligned.
3. Button style should be as primary (currently implemented as secondary color scheme)
4. Button states should be added based on mockups (ex: "checkmark" when a product is added to cart)
5. On error (ex. configuration not selected) should scroll to configuration options and display error banner (#783)

Possible solutions:

[awilcoxa]

@soumya-ashok can you add screens?

[alexandrosk]

We will need some screens on this one.
As also we need to take into consideration about the configurable products, with sizes or colors. Should the options be available on the sticky footer aswell?

[soumya-ashok]

@alexandrosk - The PD page shows configuration options. If the shopper taps the "Add to Cart" button before selecting product configuration, then the screen scrolls to where the first configuration option begins, with a notification to choose an option.
@awilcoxa I assume the configuration part is out of scope for this issue, since we are just dealing with the sticky footer?

Sticky behavior is demonstrated here - https://magento.invisionapp.com/share/YGOC5FM6EBQ

The add to cart sticky footer and interaction is shown in these screens -

[dmtrkad]

@soumya-ashok, Could you please provide "operation in Progress" design to cover the loading condtition?What's time interval to show "Ticked button"-state in case to proceed with next selection?

@awilcoxa , @ericerway, Do we need to handle errors and unexpected behavior? What kind of screen or alert messages we need to show ?

Estimation:

1. Sticky footer - 1SP
2. "Add to cart" - ? (Need details to measure an effort)

[soumya-ashok]

@dmtrkad The operation in progress would be a button state where the style switches to outline, and there is an indeterminate progress indicator as shown with the 3 dots. I am not sure what you mean by "provide the design". It would not be a static image so I'm not sure what to do here.

The ticked button state would need to remain for 2-3 seconds and then change back to "Add to Cart" - @jimbo does that sound alright to you?

[awilcoxa]

adding needs-ux for review from @soumya-ashok need to determine if closing this design gap is high priority based on input from UX/UI

[soumya-ashok]

There has been a change to button styles since this issue was last discussed, updated mockups -

Interaction details -
When the shopper taps the add to cart button, provided that all required parameters have been selected, the button switches to a short (time TBD) transition state with an indeterminate progress indicator as in mockup.

The button then changes to a checkmark, while the add to cart operation completes in the background. The check mark persists for 5 seconds before changing back to the original "add to cart" state and resets all the selected configuration to their defaults. If the shopper changes the previously selected configuration within 5 seconds, then the button changes back to its original "add to cart" state immediately.

Because add-to-cart is a critical request and also for consistency with similar interactions, it would be good to display a success toast like in the mockup below. However, since it is placed close to the button that also has a state change, I'd like to discuss this before making a decision.

If add to cart fails, the "add to cart" button would convert to an error state, along with a toast that lets the shopper know that the operation has failed (Mockup pending)

[brendanfalkowski]

Just an idea — the latency of adding to cart sometimes makes this interaction feel slow. If you assume adding to cart will succeed 99/100 times (it basically always should when in stock), then it's an opportunity to instantly forward the UI to "added" state. Then finish the actual request invisibly. <1% of the time it fails you need to retread the UI (toast "Oops, the product wasn't added. Try again"), and overall it's a better experience than always forcing the user to wait for confirmation.

[soumya-ashok]

Great recommendation @brendanfalkowski, I'll update the interaction description.

[soumya-ashok]

If this has not yet been worked on, we can keep the CTAs on the page (no sticky footer) but place them right under the configuration parameters. This is based on observations during a recent research study. We need some more time to validate if the sticky footer approach is suitable.

Except for that detail, all other feedback on interaction etc. is still valid.

[zetlen]

This ticket is currently unassigned and @soumya-ashok has helpfully suggested it for Munich Contribution Day 2019. If you want to take this ticket at Munich Contribution day, bear these things in mind:

• This is a major change to the product page UI, so it would be a larger contribution.
• Venia is both an example app, a starter template, and a component library, so its code needs to be clear and consistent. Use existing components where available, and create generic reusable components where possible.
• The "optimistic update" feature described by @brendanfalkowski would be a _huge win_ with a guaranteed Community Engineering award badge! However, this kind of code is hard to write without accidentally repeating yourself a lot throughout the codebase. So make sure that if you write an optimistic update routine, that it's general-purpose enough that it would work for other things besides add to cart (such as updating order or account data, for instance).

[awilcoxa]

Closing issue as updated designs no longer call for sticky footer.