[Quick order form] Add sticky header #3132

andrewetchen · 2023-11-29T19:32:53Z

PR Summary

This PR adds a sticky header option to the quick order form.

Why are these changes introduced?

The sticky header will be active on both desktop and mobile.

This quick order form sticky header should adjust accordingly with the different main sticky header settings in the header section (None, On scroll-up default, Always, and Always, reduce logo size).

Other considerations

Translations

To save time, I manually added all translations for the "Enable sticky header" section setting so we don't have to request them. I got the translations from: 8aac1e5 when the main header section only had one setting: enable_sticky_header, before the 4 above settings were added. I marked translations as async.

Important notes ⚠️ 👀

The main focus for this PR is to add the sticky header functionality to the quick order form so that each and every product (screenshot) 'sticks' as you scroll down and up on the quick order form.

Header z-index adjustment

Since we're introducing an additional sticky header feature to the quick order form, it should play nicely with the existing, main sticky header. I increased the z-index of shopify-section-group-header-group to 4. This correctly addresses the volume pricing popover issue we previously encountered (screenshot), along with the issue where when you reach the bottom of the form and scroll back up (noted by Melissa).

Testing steps/scenarios

Since the team is still ironing out implementation decisions, I currently have it set up to display the first 10 products from the shop-all collection.

Make sure Enable sticky header is enabled.

Ensure the product title, product image, and product link are updated to the next product when it's at the top of the viewport
Test all 4 main sticky header settings (screenshot)
Test with and without Show variant images
Test with and without Show SKUs
Ensure the volume pricing popover displays correctly
Update the quantities of variants to ensure the sticky header remains
Test desktop and mobile

Demo links

Editor

Notes

This was built from the exploration work done here:

Quick order sticky table header rows #3065

sofiamatulis

Looking at the demo store first then will look at the code :)

sections/quick-order-form.liquid

assets/quick-order-form.css

eugenekasimov · 2023-11-29T21:15:53Z

Did the first pass for design and performance. I noticed one more thing apart the one Sofia mentioned above.

The current sticky element covers the upcoming product title and it has a bit of a wrong effect in my opinion. Here is a short video with explanation. https://screenshot.click/29-11-9z70t-9hpnm.mp4

cc: @melissaperreault @sofiamatulis

melissaperreault · 2023-12-01T02:56:06Z

Thank you Andrew for the well detailed PR! 🙌 🙌

The current sticky element covers the upcoming product title and it has a bit of a wrong effect in my opinion.

I agree, but I think this can be easily solvable with some transitions and momentum. I can see whether we fade out/slide the sticky header once we hit the last variant, and fade in/slide.

Observations

Sticky headers are not supporting gradients yet.
Probably need a max-width for the product name in the table so that it doesn't mess with the table title wrapping sometimes, meaning that it remains the same regardless if the product is short or long. (Video reference for the next 2 points)
- [Edit from Andrew]: I added a quick fix to address the mobile alignment.
~~The form' sticky header is in front of the store' sticky header when you reach the bottom of the form and scroll back up. Happens for all sticky options and for both Desktop and Mobile.~~
- [Edit from Andrew]: This has been addressed here b11989e (video).
I can't replicate every time but there is a glitch with the media when you scroll down. (Video)

assets/quick-order-form.css

assets/quick-order-list.js

eugenekasimov · 2023-12-06T20:44:09Z

assets/quick-order-form.css

+  position: sticky;
+  top: 0;
+  z-index: 3; /* Prevent volume pricing popover overlap */
+  background-color: rgb(var(--color-background));


Hey Andrew. It seems you permanently change the background-color of the thead. The background-color of the thead is already declared here and I think we want to keep this color until the sticky header is triggered. When it's triggered we need to change it to the color you declare here, then as we scroll up back we need to return the original color.

I see your point. I can add a class to the thead when the sticky header is activated and remove it when scrolling back up. However, due to the way we trigger the sticky header change, we might experience a momentary transparent effect before it updates (video).

To your point earlier (here), this could be a good reason to adjust when the sticky header is activated.

@melissaperreault just sharing / for context. I'll be exploring activating the sticky header sooner.

sofiamatulis · 2023-12-07T13:55:11Z

assets/base.css

@@ -2326,7 +2326,7 @@ product-info .loading__spinner:not(.hidden) ~ *,

 /* section-header */
 .section-header.shopify-section-group-header-group {
-  z-index: 3;
+  z-index: 4;


Have we tested the entire theme to ensure this doesnt break anything? 👀

I looked at all "z-index" css changes in the code and couldn't find any that should conflict with this change. I know you have context on the header section group changes that were made in the past, would you know what I could test/check for the header section group to ensure nothing is broken?

I dont have any specific scenarios. I would test it with cart notification, search popup etc to ensure it doesn't break that experience. Since this changes the header globally we want to ensure it doesnt affect any existing features

sofiamatulis

I noticed that when you scroll slowly, this happens: https://screenshot.click/07-00-kafue-59xri.mp4

[Edit by Andrew]: This is fixed.

sofiamatulis · 2023-12-07T15:03:30Z

assets/quick-order-form.css

+  top: 0;
+  z-index: 3; /* Prevent volume pricing popover overlap */
+  background-color: rgb(var(--color-background));
+  transition: top .15s ease-out;


For the duration, can we use one of our already defined lengths?

--duration-short: 100ms; --duration-default: 200ms; --duration-announcement-bar: 250ms; --duration-medium: 300ms; --duration-long: 500ms; --duration-extra-long: 600ms; --duration-extended: 3s;

cc @melissaperreault

For context, I used what we currently have for .section-header.animate:

dawn/assets/base.css

Lines 2345 to 2347 in 2c84724

.section-header.animate {

transition: top 0.15s ease-out;

}

But I'm curious if it's better to go with your suggested approach 🤔

Makes sense. Yeah, I wonder if we can use an existing one for it, given its standardized. Let's see what @melissaperreault says

Looking into this today!

assets/quick-order-list.js

sofiamatulis

Im not seeing the subtotal bar 👀
https://screenshot.click/11-00-xwq2k-ydi01.png

[Edit from Andrew]: Fixed here: 5678872 (screenshot)

andrewetchen · 2023-12-12T16:15:50Z

The current sticky element covers the upcoming product title and it has a bit of a wrong effect in my opinion. Here is a short video with explanation. https://screenshot.click/29-11-9z70t-9hpnm.mp4

@eugenekasimov regarding your point here of when the ideal change should occur.

@melissaperreault should the product change happen sooner? I'm also good with addressing this in a follow-up/polish task.

andrewetchen · 2023-12-12T17:31:30Z

Im not seeing the subtotal bar 👀 https://screenshot.click/11-00-xwq2k-ydi01.png

Thanks Sofia! I've noted this as it was something @eugenekasimov and I noticed the other week 👍

Fixed here: 5678872 (screenshot)

sofiamatulis

On mobile, when the main header sticky is set to none, this happens: https://screenshot.click/12-56-6seyh-j4uts.mp4

sofiamatulis · 2023-12-12T20:58:22Z

locales/en.default.schema.json

@@ -2745,6 +2745,9 @@
    "quick-order-form": {
      "name": "Quick order form",
      "settings": {
+        "enable_sticky_header": {


When items are added to cart, there is some jumping: https://screenshot.click/12-57-nfqnp-9n0sg.mp4

Applying a set height on thead or thead tr fixes this (video):

.quick-order-form .quick-order-list__table--sticky thead tr { height: 7.2rem; }

But then we have the issue of the thead being this height when the sticky header isn't active (screenshot). I tried applying a sticky-active class to the thead when the sticky header is active and only apply the height this way but it still shifts up:

.quick-order-form .quick-order-list__table--sticky thead.sticky-active tr { height: 7.2rem; }

I applied a set height here: 1274c92 temporarily to solve the upward shift but wondering if there's a better solution 🤔

@eugenekasimov what are your thoughts in applying a fixed/set height to prevent the upward shift after adding an item to the cart?

locales/en.default.schema.json

assets/quick-order-form.css

sofiamatulis

The text is overlaying on top of the row: https://screenshot.click/08-13-8zf11-yis0j.mp4 👀

eugenekasimov

Oops, I approved this accidentally 😅. Please, ignore my approval.

I approved it accidentally.

andrewetchen · 2024-02-08T03:18:34Z

Remaining tasks

z-index: The change in z-index for the .section-header.shopify-section-group-header-group needs to be thoroughly tested across the entire theme to ensure it doesn't break any existing functionality, such as cart notification, search popup, etc. This had already been done but will need to be retested.
Mobile issues: Address issues with the sticky header on mobile, such as when the main sticky header is set to none.
Sticky header activation timing: Consider adjusting the time when the sticky header is activated/triggered. There was a suggestion to make the product change happen sooner to hopefully prevent any confusion. Currently, the product will have to appear fully in the background before it changes.
Product title coverage: The current sticky element covers the upcoming product title, which might need a design adjustment.
Product name width: Potentially add a max-width for the product name in the table header to ensure consistent table title wrapping, regardless of the length of the product name.
Upward shift on cart update: An upward shift occurs after adding an item to the cart. I added a fix for this by setting a temporary fixed height, but a more permanent solution should be explored.
Sticky header gradient support: The sticky headers do not currently support gradients. This functionality needs to be added since we support gradients.
Text overlay issue: Address the issue where text overlays on top of the row in certain scenarios.

sofiamatulis requested review from eugenekasimov, sofiamatulis and melissaperreault November 29, 2023 19:56

sofiamatulis reviewed Nov 29, 2023

View reviewed changes

sections/quick-order-form.liquid Show resolved Hide resolved

assets/quick-order-form.css Outdated Show resolved Hide resolved

dan-menard reviewed Dec 1, 2023

View reviewed changes

assets/quick-order-form.css Outdated Show resolved Hide resolved

assets/quick-order-list.js Outdated Show resolved Hide resolved

Andrew Etchen added 2 commits December 1, 2023 13:10

Manually add translations for "Enable sticky header"

7aeae3e

Add quick order form sticky header

38b09d8

andrewetchen force-pushed the quick-order-sticky-header branch from e4f532e to 38b09d8 Compare December 1, 2023 18:14

Andrew Etchen added 9 commits December 1, 2023 14:44

Increase to show 10 products instead of 5

3bec6c8

Add initial css changes

b35c982

Update function name

3257d17

Add comment for z-index

bb4e32a

Clean up JS vars, functions, and fix duplicate product header

be431ac

CSS adjustments for product header

cc9861e

Add this.productHeader to replaceHeader to update correct element

4a53939

Fix on scroll-up: add MutationObserver for main header, add check

9f0d50f

Update z-index for shopify-section-group-header-group

b11989e

eugenekasimov reviewed Dec 6, 2023

View reviewed changes

sofiamatulis reviewed Dec 7, 2023

View reviewed changes

eugenekasimov reviewed Dec 7, 2023

View reviewed changes

assets/quick-order-list.js Outdated Show resolved Hide resolved

assets/quick-order-list.js Outdated Show resolved Hide resolved

assets/quick-order-list.js Outdated Show resolved Hide resolved

Andrew Etchen added 3 commits December 8, 2023 17:22

Update replaceHeader and add return

a39a6ee

Add return to restoreHeader

2044c86

Update isAtTop to check productHeader

82e621f

sofiamatulis reviewed Dec 11, 2023

View reviewed changes

Update temporary loop for displayed products and variants

5678872

Footer: fix volume pricing popover overlap

f210a5a

sofiamatulis reviewed Dec 12, 2023

View reviewed changes

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

sofiamatulis reviewed Dec 12, 2023

View reviewed changes

assets/quick-order-form.css Show resolved Hide resolved

Andrew Etchen added 5 commits December 12, 2023 17:27

Add conditional product check for sticky header

4913557

Refactor onCartUpdate to selectively replace specific elements

1a073d1

Temp: Toggle sticky-active class to thead

6eb67ef

Temp: Apply fixed height to thead tr

1274c92

Temp: Remove transition for sticky header

812dcce

andrewetchen mentioned this pull request Dec 20, 2023

[Quick-Order-Form] UX Refinements #3142

Merged

11 tasks

sofiamatulis reviewed Jan 8, 2024

View reviewed changes

eugenekasimov previously approved these changes Jan 8, 2024

View reviewed changes

tyleralsbury added the Next Release Candidate label Feb 22, 2024

andrewetchen mentioned this pull request Feb 26, 2024

Quick order sticky table header rows #3065

Closed

sofiamatulis removed the Next Release Candidate label Mar 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Quick order form] Add sticky header #3132

[Quick order form] Add sticky header #3132

andrewetchen commented Nov 29, 2023 •

edited

Loading

sofiamatulis left a comment

eugenekasimov commented Nov 29, 2023

melissaperreault commented Dec 1, 2023 •

edited by andrewetchen

Loading

eugenekasimov Dec 6, 2023

andrewetchen Dec 12, 2023

andrewetchen Dec 12, 2023

andrewetchen Dec 13, 2023

sofiamatulis Dec 7, 2023

andrewetchen Dec 12, 2023

sofiamatulis Jan 8, 2024

sofiamatulis left a comment •

edited by andrewetchen

Loading

sofiamatulis Dec 7, 2023

andrewetchen Dec 8, 2023

sofiamatulis Dec 11, 2023

melissaperreault Dec 13, 2023

sofiamatulis left a comment •

edited by andrewetchen

Loading

andrewetchen commented Dec 12, 2023 •

edited

Loading

andrewetchen commented Dec 12, 2023

sofiamatulis left a comment

sofiamatulis Dec 12, 2023

andrewetchen Dec 18, 2023

andrewetchen Dec 20, 2023

sofiamatulis left a comment

eugenekasimov left a comment •

edited

Loading

andrewetchen commented Feb 8, 2024

[Quick order form] Add sticky header #3132

Are you sure you want to change the base?

[Quick order form] Add sticky header #3132

Conversation

andrewetchen commented Nov 29, 2023 • edited Loading

PR Summary

Why are these changes introduced?

Other considerations

Translations

Important notes ⚠️ 👀

Header z-index adjustment

Testing steps/scenarios

Demo links

Notes

sofiamatulis left a comment

Choose a reason for hiding this comment

eugenekasimov commented Nov 29, 2023

melissaperreault commented Dec 1, 2023 • edited by andrewetchen Loading

Observations

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment • edited by andrewetchen Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment • edited by andrewetchen Loading

Choose a reason for hiding this comment

andrewetchen commented Dec 12, 2023 • edited Loading

andrewetchen commented Dec 12, 2023

sofiamatulis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

eugenekasimov left a comment • edited Loading

Choose a reason for hiding this comment

andrewetchen commented Feb 8, 2024

Remaining tasks

andrewetchen commented Nov 29, 2023 •

edited

Loading

melissaperreault commented Dec 1, 2023 •

edited by andrewetchen

Loading

sofiamatulis left a comment •

edited by andrewetchen

Loading

sofiamatulis left a comment •

edited by andrewetchen

Loading

andrewetchen commented Dec 12, 2023 •

edited

Loading

eugenekasimov left a comment •

edited

Loading