Collection filtering UX polish #356

KaichenWang · 2021-08-10T14:19:10Z

Why are these changes introduced?

Fixes #100

What approach did you take?

Visually decouple product count from product grid
Spacing and layout adjustments for filters in CSS

Other considerations

n/a

Demo links

Store
Editor

Checklist

…on styling

…ction-filtering-ux

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

…ction-filtering-ux

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

…ction-filtering-ux # Conflicts: # locales/cs.schema.json # locales/da.schema.json # locales/de.schema.json # locales/en.default.schema.json # locales/es.schema.json # locales/fi.schema.json # locales/fr.schema.json # locales/it.schema.json # locales/ja.schema.json # locales/ko.schema.json # locales/nb.schema.json # locales/nl.schema.json # locales/pl.schema.json # locales/pt-BR.schema.json # locales/pt-PT.schema.json # locales/sv.schema.json # locales/th.schema.json # locales/tr.schema.json # locales/vi.schema.json # locales/zh-CN.schema.json # locales/zh-TW.schema.json

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

…Shopify/dawn into fix-collection-filtering-polish

…olish" This reverts commit f59d06d.

KaichenWang · 2021-08-11T19:46:51Z

sections/main-collection-product-grid.liquid

@@ -182,7 +182,7 @@
                {% endif %}


Best to view this diff with Hide whitespace changes enabled

KaichenWang · 2021-08-11T19:48:09Z

@Oliviammarcello Thanks for the review. Updates have been made and are ready for another review.

Not sure if this is happening because of the filters, but the spacing below the collection banner image has disappeared. It can be seen in the screenshot above. If this isn't related to filters, I can make a new issue for it.

Padding has been restored

Oliviammarcello · 2021-08-11T20:02:05Z

One last note about the spacing and then this is good to ship!

On mobile can we reduce the space between the collection title and filters from 5rem to 3rem. Screenshot
On desktop can we remove 3rem from the space. Screenshot

Note: this doesn't apply to the collection page when an image is added and the grey box appears. The current screens are perfect. Example.

Thanks so much!

tauthomas01

Looks good on my end. Works in no js as well!

tauthomas01 · 2021-08-11T20:40:57Z

sections/main-collection-product-grid.liquid

+                          <facet-remove class="mobile-facets__clear-wrapper">
+                            <a href="{{ collection.url }}" class="mobile-facets__clear underlined-link">{{ 'sections.collection_template.clear' | t }}</a>
+                          </facet-remove>
+                          <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'sections.collection_template.apply' | t }}</button>


This is the first time I see a more "elaborated" inline JS code so I'm wondering if it's okay to leave it in Liquid?

Other instances throughout the theme use a more straightforward approach such as onclick="this.select();" or onclick="window.print();" which I understand because it's not affecting other components.

Good point. I'm okay to leave this as-is for now, because this isn't actually part of the design polish and does not conflict with our dev principles. I do think this approach should be revisited to ensure:

Adequate error handling

Maintainability (if the target element markup is updated in the future)

ludoboludo

Looks good and works well 👍

Left just a couple comments.

assets/collection-filters-form.js

ludoboludo · 2021-08-11T21:45:17Z

assets/template-collection.css

+
+  span.active-facets__button-inner {
+    padding-bottom: 0.4rem;
+    padding-top: 0.2rem;


on iOS it looks not properly centered vertically:

Updated efaffd3

ludoboludo · 2021-08-11T21:59:44Z

Oh and also I noticed a bit of a flash happening when closing the filter drawer on mobile: video but not sure what's happening.

KaichenWang · 2021-08-16T19:50:14Z

@ludoboludo

Oh and also I noticed a bit of a flash happening when closing the filter drawer on mobile: video but not sure what's happening.

Updated 319b77a

KaichenWang · 2021-08-16T20:19:25Z

@Oliviammarcello

One last note about the spacing and then this is good to ship!

On mobile can we reduce the space between the collection title and filters from 5rem to 3rem. Screenshot

On mobile, I've adjusted the top margin to 3rem (instead of 5rem)

On desktop can we remove 3rem from the space. Screenshot

On desktop, the 3rem top margin must be preserved to ensure there is adequate spacing between the filters and other sections that the merchant may add above

Note: this doesn't apply to the collection page when an image is added and the grey box appears. The current screens are perfect. Example.

The filters isn't aware if the collection banner above it includes an image or not. Therefore the top margin above filters is now also 3rem in this case

ludoboludo

LGTM.

The one thing I notice on iOS is this focus style getting applied on the summary but not sure if it should be fixed here or in a follow up:

iosFocusFilter.MP4

KaichenWang · 2021-08-17T14:21:03Z

@ludoboludo

The one thing I notice on iOS is this focus style getting applied on the summary but not sure if it should be fixed here or in a follow up

Good catch, I think it would be better to apply focus-inset styling on those <summary> elements. I can add that in a separate PR.

Added fix here: defab2e

* 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 * Add design polish to UX elements * Add design polish to UX elements * Add design polish to UX elements * Add design polish to UX elements * Add design polish to UX elements * Adjust position of loading spinner on collections page * Add design polish to UX elements * Revert dbe6059 * Revert 93eb5c9 * Fix json spacing * Change price filter input inputmode * Fix mobile filters for no-js * Address design feedback * Address design feedback * Update from Shopify for theme dawn/fix-collection-filtering-polish * Remove alignment CSS * Revert "Update from Shopify for theme dawn/fix-collection-filtering-polish" This reverts commit f59d06d. * Adjust padding of active filter * Fix filter drawer closing animation * Adjust section margins for collection banner and grid Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <35075727+translation-platform@users.noreply.github.com>

KaichenWang and others added 30 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

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

dbe6059

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

adfd047

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

448e7c3

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

ebd55fe

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

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

Update locales

a1dd53a

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

561c858

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

Update locales/cs.schema.json

8062e64

Update locales/da.schema.json

50c7a29

Update locales/de.schema.json

7b0515a

Update locales/es.schema.json

7c3fa8b

Update locales/fi.schema.json

62d1774

Update locales/fr.schema.json

e415666

Update locales/it.schema.json

1a90c93

Update locales/ja.schema.json

9b6a215

Update locales/ko.schema.json

f7ce79b

KaichenWang and others added 6 commits August 11, 2021 15:28

Address design feedback

dc053bd

Address design feedback

084d901

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

f59d06d

Remove alignment CSS

f85aff4

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

1f9cac9

…Shopify/dawn into fix-collection-filtering-polish

Revert "Update from Shopify for theme dawn/fix-collection-filtering-p…

330a2eb

…olish" This reverts commit f59d06d.

KaichenWang commented Aug 11, 2021

View reviewed changes

tauthomas01 self-assigned this Aug 11, 2021

ludoboludo self-requested a review August 11, 2021 20:13

tauthomas01 reviewed Aug 11, 2021

View reviewed changes

ludoboludo reviewed Aug 11, 2021

View reviewed changes

KaichenWang added 2 commits August 16, 2021 14:42

Adjust padding of active filter

efaffd3

Fix filter drawer closing animation

319b77a

Adjust section margins for collection banner and grid

01f509b

KaichenWang requested review from tauthomas01 and ludoboludo August 16, 2021 20:20

Oliviammarcello approved these changes Aug 16, 2021

View reviewed changes

ludoboludo approved these changes Aug 16, 2021

View reviewed changes

tauthomas01 approved these changes Aug 17, 2021

View reviewed changes

KaichenWang merged commit a5a4840 into main Aug 17, 2021

KaichenWang deleted the fix-collection-filtering-polish branch August 17, 2021 14:21

ludoboludo mentioned this pull request Aug 17, 2021

Filter & sort flicker when slide panel is opened #345

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Collection filtering UX polish #356

Collection filtering UX polish #356

KaichenWang commented Aug 10, 2021

KaichenWang Aug 11, 2021

KaichenWang commented Aug 11, 2021

Oliviammarcello commented Aug 11, 2021

tauthomas01 left a comment

tauthomas01 Aug 11, 2021

KaichenWang Aug 16, 2021

ludoboludo left a comment

ludoboludo Aug 11, 2021

KaichenWang Aug 16, 2021 •

edited

Loading

ludoboludo commented Aug 11, 2021

KaichenWang commented Aug 16, 2021 •

edited

Loading

KaichenWang commented Aug 16, 2021 •

edited

Loading

ludoboludo left a comment

KaichenWang commented Aug 17, 2021 •

edited

Loading

Collection filtering UX polish #356

Collection filtering UX polish #356

Conversation

KaichenWang commented Aug 10, 2021

KaichenWang Aug 11, 2021

Choose a reason for hiding this comment

KaichenWang commented Aug 11, 2021

Oliviammarcello commented Aug 11, 2021

tauthomas01 left a comment

Choose a reason for hiding this comment

tauthomas01 Aug 11, 2021

Choose a reason for hiding this comment

KaichenWang Aug 16, 2021

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo Aug 11, 2021

Choose a reason for hiding this comment

KaichenWang Aug 16, 2021 • edited Loading

Choose a reason for hiding this comment

ludoboludo commented Aug 11, 2021

KaichenWang commented Aug 16, 2021 • edited Loading

KaichenWang commented Aug 16, 2021 • edited Loading

ludoboludo left a comment

Choose a reason for hiding this comment

KaichenWang commented Aug 17, 2021 • edited Loading

KaichenWang Aug 16, 2021 •

edited

Loading

KaichenWang commented Aug 16, 2021 •

edited

Loading

KaichenWang commented Aug 16, 2021 •

edited

Loading

KaichenWang commented Aug 17, 2021 •

edited

Loading