Fix collection filtering UX #268

KaichenWang · 2021-07-26T20:43:56Z

Why are these changes introduced?

Fixes #198

What approach did you take?

Update Liquid logic
Update styles
Update JS to ensure product count (now separate from product grid) is updated properly

Other considerations

Some edge cases still need to be tweaked/perfected
~~TODO:~~ Adjust no-JS implementation

Demo links

Store
Editor

Checklist

…on styling

tyleralsbury

Just leaving reminders for the auto-pushed setting updates.

tyleralsbury · 2021-07-27T15:46:27Z

templates/collection.json

@@ -1,10 +1,24 @@
 {


Reminder that we'll need to revert the changes in here

tyleralsbury · 2021-07-27T15:46:58Z

config/settings_data.json

@@ -1 +1,86 @@
-{}


Reminder that we'll need to revert the changes in here

Oliviammarcello · 2021-07-28T13:52:14Z

…ction-filtering-ux

KaichenWang · 2021-07-29T19:59:23Z

@Oliviammarcello Thanks for the review. I've addressed most issues in the list . For issues not yet addressed, I've documented them here. Here's some more details:

Reduce total space to 5rem between collection title and filters or collection banner and filters

This was not a change introduced in this PR. To limit the scope of this PR, could we update in separate PR?

The filter and sort button disappears when the drawer comes out

Still looking into this. @tyleralsbury any particular reason the "Filter and sort" button is hidden in CSS when the drawer is opened?

details[open] .mobile-facets__open {
    visibility: hidden;
}

The filter icon is slightly misaligned

On my end, I don't see the same misalignment, but will continue testing with different fonts

Can you add additional padding to the left and right side of the sort by active state. It should match this spacing

Still exploring a way to do this without adding too much code

When the filter options are revealed, the same animation used for the navigation dropdown should be applied

To limit the scope of this PR, could we update in separate PR?

KaichenWang · 2021-08-02T14:06:33Z

sections/main-collection-product-grid.liquid

@@ -17,214 +17,224 @@
 <div class="page-width collection-filters" id="main-collection-filters" data-id="{{ section.id }}">


Best to view this diff with Hide whitespace changes enabled

Oliviammarcello · 2021-08-02T18:08:08Z

…ify/dawn into fix-collection-filtering-ux

…ction-filtering-ux

…ction-filtering-ux # Conflicts: # sections/main-collection-product-grid.liquid

tauthomas01

Tested on all browsers, looks good.

tauthomas01 · 2021-08-04T14:00:05Z

assets/collection-filters-form.js

+    if (containerDesktop) {
+      containerDesktop.innerHTML = count;
+    }


Small nitpick: does it work if we use optional chaining?

document.getElementById('CollectionProductCountDesktop')?.innerHTML = count;

It's actually an interesting case - you can't use optional chaining for the left side of an assignment.

You can see the discussion on the proposal here:

tc39/proposal-optional-chaining#18

tauthomas01 · 2021-08-04T14:26:23Z

assets/template-collection.css

+  .active-facets-mobile + .collection-product-count {
+    grid-column-start: 2;
+    grid-row-start: 2;
+    text-align: right;
+  }


Is this needed? It's hidden when we're on desktop

The .large-up-hide is added conditionally in Liquid. Depending on the collapse_on_larger_devices setting, the "mobile" product count may also visible on desktop:

{% unless section.settings.collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}

tyleralsbury

Looks great! I tested on desktop and mobile with collapse enabled and disabled.

I noticed one thing, in the collapsible version the price still has a bubble indicating that it's being filtered. Not sure if that was intended or not, given the removal of all of the other bubbles. That was the only issue I found.

Code looks good, too. JS looks like it wasn't huge in terms of changes, and the CSS is looking nice. We might still be able to improve some of the naming for the CSS but it was already very "first draft" naming before this PR so it's a refactor we can consider later.

KaichenWang · 2021-08-04T16:39:19Z

I noticed one thing, in the collapsible version the price still has a bubble indicating that it's being filtered. Not sure if that was intended or not, given the removal of all of the other bubbles. That was the only issue I found.

I missed that one. Now removed

gregjotau · 2021-08-04T22:32:03Z

translation missing: nb.sections.collection_template.product_count_simple

Only in the english translation files, which not everyone uses by default. Not sure if that is intended.

gregjotau · 2021-08-04T22:37:56Z

IMO, in production: english should just override the default language. Please implement that since english is understood universally in all "important" markets for most merchants.

* Add setting to enable filtering drawer on larger devices. Adjust button styling * Update styling. Tighten spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update styles and spacing for filters * Adjust font sizes for filters * Adjust alignment and spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update link style for clear * Update from Shopify for theme dawn/fix-collection-filtering-ux * Address design feedback * Update locales * Update locales/cs.schema.json * Update locales/da.schema.json * Update locales/de.schema.json * Update locales/es.schema.json * Update locales/fi.schema.json * Update locales/fr.schema.json * Update locales/it.schema.json * Update locales/ja.schema.json * Update locales/ko.schema.json * Update locales/nb.schema.json * Update locales/nl.schema.json * Update locales/pl.schema.json * Update locales/pt-BR.schema.json * Update locales/pt-PT.schema.json * Update locales/sv.schema.json * Update locales/th.schema.json * Update locales/tr.schema.json * Update locales/vi.schema.json * Update locales/zh-CN.schema.json * Update locales/zh-TW.schema.json * Remove bubble for price filtering Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <[email protected]>

KaichenWang · 2021-08-05T14:34:15Z

@gregjotau

translation missing: nb.sections.collection_template.product_count_simple

Only in the english translation files, which not everyone uses by default. Not sure if that is intended.

Occasionally, translation strings for languages other than English may be added in a separate PR. We are working to avoid this in the future and ensure translations for all languages are included in the same PR.

IMO, in production: english should just override the default language. Please implement that since english is understood universally in all "important" markets for most merchants.

This is a good suggestion. Will forward this internally to the appropriate team.

* main: (23 commits) Cart content update (Shopify#370) Footer spacing and alignment adjustments (Shopify#369) Product Template UI polish updates (Shopify#219) footer ui updates (Shopify#318) Fix cart improvements empty state (Shopify#319) [Announcement] Adjust block id for displaying dynamic names (Shopify#327) Update translations: buyer (Shopify#329) Revert editor setting changes (Shopify#328) Update translations (Shopify#294) Fix collection filtering UX (Shopify#268) Added page width setting and fixed image quality (Shopify#292) Add top border on cart notification when "show separator line" setting is deactivated (Shopify#306) movebadge code into base.css (Shopify#313) Collage UI bug fixes (Shopify#308) Customer account UI polish (Shopify#177) Added custom liquid block to product page (Shopify#269) Fix disclosure icon (Shopify#310) Fix facet price filter label spacing (Shopify#300) Fix duplicate search icon when header logo is set to "Top center" (Shopify#252) Add card outline setting (Shopify#239) ...

* Add setting to enable filtering drawer on larger devices. Adjust button styling * Update styling. Tighten spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update styles and spacing for filters * Adjust font sizes for filters * Adjust alignment and spacing * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update from Shopify for theme dawn/fix-collection-filtering-ux * Update link style for clear * Update from Shopify for theme dawn/fix-collection-filtering-ux * Address design feedback * Update locales * Update locales/cs.schema.json * Update locales/da.schema.json * Update locales/de.schema.json * Update locales/es.schema.json * Update locales/fi.schema.json * Update locales/fr.schema.json * Update locales/it.schema.json * Update locales/ja.schema.json * Update locales/ko.schema.json * Update locales/nb.schema.json * Update locales/nl.schema.json * Update locales/pl.schema.json * Update locales/pt-BR.schema.json * Update locales/pt-PT.schema.json * Update locales/sv.schema.json * Update locales/th.schema.json * Update locales/tr.schema.json * Update locales/vi.schema.json * Update locales/zh-CN.schema.json * Update locales/zh-TW.schema.json * Remove bubble for price filtering Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <[email protected]>

KaichenWang added 2 commits July 22, 2021 16:36

Add setting to enable filtering drawer on larger devices. Adjust butt…

a53694c

…on styling

Update styling. Tighten spacing

530342f

KaichenWang requested a review from Oliviammarcello July 26, 2021 20:44

Update from Shopify for theme dawn/fix-collection-filtering-ux

dbe6059

ghost added the cla-needed label Jul 26, 2021

tyleralsbury self-requested a review July 27, 2021 14:10

Update from Shopify for theme dawn/fix-collection-filtering-ux

adfd047

tyleralsbury reviewed Jul 27, 2021

View reviewed changes

shopify bot added 2 commits July 27, 2021 18:11

Update from Shopify for theme dawn/fix-collection-filtering-ux

448e7c3

Update from Shopify for theme dawn/fix-collection-filtering-ux

ebd55fe

KaichenWang and others added 7 commits July 28, 2021 14:31

Merge branch 'main' of https://github.com/Shopify/dawn into fix-colle…

5a9907b

…ction-filtering-ux

Update styles and spacing for filters

162eaf3

Adjust font sizes for filters

3dcf91c

Adjust alignment and spacing

22f6306

Update from Shopify for theme dawn/fix-collection-filtering-ux

93eb5c9

Update from Shopify for theme dawn/fix-collection-filtering-ux

7915432

Update link style for clear

be307cd

This was referenced Aug 2, 2021

Revisit UI for Filters & Behavior #198

Closed

[Filtering] Fast Follow Fixes + UI Polish #100

Closed

KaichenWang commented Aug 2, 2021

View reviewed changes

KaichenWang marked this pull request as ready for review August 2, 2021 14:07

KaichenWang requested a review from tyleralsbury August 2, 2021 14:07

shopify bot and others added 5 commits August 2, 2021 18:39

Update from Shopify for theme dawn/fix-collection-filtering-ux

76d7b51

Merge branch 'fix-collection-filtering-ux' of https://github.com/Shop…

2c9be9c

…ify/dawn into fix-collection-filtering-ux

Merge branch 'main' of https://github.com/Shopify/dawn into fix-colle…

d788172

…ction-filtering-ux

Address design feedback

dc88f7b

Merge branch 'main' of https://github.com/Shopify/dawn into fix-colle…

160e2b0

…ction-filtering-ux # Conflicts: # sections/main-collection-product-grid.liquid

translation-platform added 10 commits August 4, 2021 12:44

Update locales/nl.schema.json

d5b31e4

Update locales/pl.schema.json

dac1ee9

Update locales/pt-BR.schema.json

63bc3aa

Update locales/pt-PT.schema.json

3f796ea

Update locales/sv.schema.json

c08219e

Update locales/th.schema.json

6f46969

Update locales/tr.schema.json

28a3682

Update locales/vi.schema.json

8779bfb

Update locales/zh-CN.schema.json

c422df0

Update locales/zh-TW.schema.json

212e99a

Oliviammarcello previously approved these changes Aug 4, 2021

View reviewed changes

tauthomas01 reviewed Aug 4, 2021

View reviewed changes

tyleralsbury previously approved these changes Aug 4, 2021

View reviewed changes

Remove bubble for price filtering

efd9d52

KaichenWang dismissed stale reviews from tyleralsbury and Oliviammarcello via efd9d52 August 4, 2021 16:37

KaichenWang requested review from tauthomas01 and tyleralsbury August 4, 2021 16:39

tyleralsbury approved these changes Aug 4, 2021

View reviewed changes

tauthomas01 approved these changes Aug 4, 2021

View reviewed changes

KaichenWang merged commit dff1060 into main Aug 4, 2021

KaichenWang deleted the fix-collection-filtering-ux branch August 4, 2021 20:47

KaichenWang mentioned this pull request Aug 5, 2021

Revert editor setting changes #328

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix collection filtering UX #268

Fix collection filtering UX #268

KaichenWang commented Jul 26, 2021 •

edited

Loading

tyleralsbury left a comment

tyleralsbury Jul 27, 2021

tyleralsbury Jul 27, 2021

Oliviammarcello commented Jul 28, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Jul 29, 2021 •

edited

Loading

KaichenWang Aug 2, 2021

Oliviammarcello commented Aug 2, 2021 •

edited by KaichenWang

Loading

tauthomas01 left a comment

tauthomas01 Aug 4, 2021

tyleralsbury Aug 4, 2021

tauthomas01 Aug 4, 2021

KaichenWang Aug 4, 2021

tyleralsbury left a comment

KaichenWang commented Aug 4, 2021

gregjotau commented Aug 4, 2021

gregjotau commented Aug 4, 2021

KaichenWang commented Aug 5, 2021 •

edited

Loading

		@@ -17,214 +17,224 @@
		<div class="page-width collection-filters" id="main-collection-filters" data-id="{{ section.id }}">

Fix collection filtering UX #268

Fix collection filtering UX #268

Conversation

KaichenWang commented Jul 26, 2021 • edited Loading

tyleralsbury left a comment

Choose a reason for hiding this comment

tyleralsbury Jul 27, 2021

Choose a reason for hiding this comment

tyleralsbury Jul 27, 2021

Choose a reason for hiding this comment

Oliviammarcello commented Jul 28, 2021 • edited by KaichenWang Loading

KaichenWang commented Jul 29, 2021 • edited Loading

KaichenWang Aug 2, 2021

Choose a reason for hiding this comment

Oliviammarcello commented Aug 2, 2021 • edited by KaichenWang Loading

tauthomas01 left a comment

Choose a reason for hiding this comment

tauthomas01 Aug 4, 2021

Choose a reason for hiding this comment

tyleralsbury Aug 4, 2021

Choose a reason for hiding this comment

tauthomas01 Aug 4, 2021

Choose a reason for hiding this comment

KaichenWang Aug 4, 2021

Choose a reason for hiding this comment

tyleralsbury left a comment

Choose a reason for hiding this comment

KaichenWang commented Aug 4, 2021

gregjotau commented Aug 4, 2021

gregjotau commented Aug 4, 2021

KaichenWang commented Aug 5, 2021 • edited Loading

KaichenWang commented Jul 26, 2021 •

edited

Loading

Oliviammarcello commented Jul 28, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Jul 29, 2021 •

edited

Loading

Oliviammarcello commented Aug 2, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Aug 5, 2021 •

edited

Loading