Add search facet filtering by KaichenWang · Pull Request #566 · Shopify/dawn

KaichenWang · 2021-09-03T18:21:20Z

Why are these changes introduced?

Fixes #46
Fixes #538

What approach did you take?

Modularize facets:
- Move facets markup into snippets/facets.liquid
- Move CSS into assets/component-facets.css
- Rename JS to assets/facets.js
- Rename variables to disassociate with collection
- Move locales strings from section.collection_template to products.facets
- Update references
Render facets snippet in main-collection-product-grid.liquid and main-search.liquid
Add facet section settings in main-search and pass to snippet
Add additional Liquid logic to handle empty search results (differentiate scenarios that can lead to no search results - see "Other considerations" for more info)

Other considerations

Notes on differentiating 2 different empty states to present the buyer with context-aware messaging/UI:

Scenarios

No results due to no term matches - i.e. the search term is misspelled (example: “shooes”)
No results due to filtering specificity - i.e. the search term is correct and there are 5 matches (example: “shoes”), but a price filter is out of range for all 5 matches

Liquid

If no results and filters is an empty drop: there were no results for the query
If no results and filters is NOT an empty drop, it means the filters led to no results

Demo links

Store
Editor

Checklist

Additional

Regression test filtering/sorting on Collection pages

…arch

KaichenWang · 2021-09-03T18:33:34Z

sections/main-search.liquid

@@ -1,25 +1,29 @@
+{{ 'template-collection.css' | asset_url | stylesheet_tag }}
 {{ 'component-card.css' | asset_url | stylesheet_tag }}


Diff best viewed with Hide whitespace changes enabled

KaichenWang · 2021-09-03T18:38:43Z

@tyleralsbury requested review from you because you have the most context on facet filtering on themes side.

@carolineschnapp requested review from you because you have context on how to best leverage search.filters Liquid object; in particular for scenarios where no results are returned. The logic is implemented in sections/main-search.liquid.

Thank you

tyleralsbury · 2021-09-03T19:04:39Z

Super, Kai. Thanks for creating this. I'll probably get a chance to take a look at it next week. I'll carve out some time in my calendar to take a good look. Very exciting to get this into Search! 🚀

ghost · 2021-09-06T09:07:10Z

When changing sort on search page the number of results increases. Ex: https://os2-demo.myshopify.com/search?q=art

…h-facet-filtering # Conflicts: # locales/zh-CN.json

KaichenWang · 2021-09-07T13:24:55Z

@grumpyoldflo

When changing sort on search page the number of results increases. Ex: https://os2-demo.myshopify.com/search?q=art

Hi, the increase in result count here isn't actually due to sorting. On Dawn, we set search prefix option value to last (more info here). So if you conduct a search using the search box, the url will typically look something like this /search?q=art&options%5Bprefix%5D=last, but if you manually input a url without the &options%5Bprefix%5D=last part (which sorting will automatically append), the results count will differ.

ludoboludo

Working well, didn't run into any issues.

A few things I noted:

when clicking on the Skip to main content link, it messes with the loading state of the page/filters. But doesn't seem to do it on the collection page. video
a few accessibility things. We don't announce the details being open when using voice over and pressing Enter. Seem to work with the spacebar. Also the link from the bubbles to remove the filter aren't being announced as something to remove the filter in question. But those aren't related to this PR. (video)

assets/component-facets.css

sections/main-collection-product-grid.liquid

sections/main-search.liquid

snippets/facets.liquid

KaichenWang · 2021-09-07T21:01:45Z

@ludoboludo Thanks for reviewing.

when clicking on the Skip to main content link, it messes with the loading state of the page/filters. But doesn't seem to do it on the collection page.

Good catch. This also brought to my attention that the function which runs on window history change onHistoryChange runs twice, because the custom HTML element <facet-filters-form> is defined twice on the page (mobile and desktop). This needs to be addressed. I will therefore close the PR for now and work on fixing this first.

This reverts commit 3793c14.

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

Reopening the PR after updating some facets.js methods to static. The fetching, caching and rendering of the product grid is functionality that is now handled by the FacetFiltersForm class itself and doesn't need to be replicated across instances of FacetFiltersForm. This also resolves the issue with onHistoryChange event being triggered twice, since the event listener is now being defined in a static method.

ludoboludo · 2021-09-09T14:27:18Z

assets/facets.js

Ah shoot I think we can't use this yet as it's not supported on previous version of Safari when we're supposed to support the last 2 versions:

I didn't re test the rest of the functionality as I think we won't be able to use that approach 🙁

Ah good point. I will look into an alternative

In my testing, it appears static methods work fine even on iOS 13, but static class properties were causing a JS error. I've therefore moved the properties out of the class. 88b35d1

…h-facet-filtering # Conflicts: # locales/de.json

…h-facet-filtering # Conflicts: # sections/main-search.liquid

ludoboludo

Left some small comments but overall didn't encounter any issues, seem to work well 👌

assets/component-facets.css

snippets/facets.liquid

sections/main-search.liquid

ludoboludo

Looks good to me 👍

ludoboludo · 2021-09-13T17:41:39Z

snippets/facets.liquid

+                    <span class="active-facets__button-inner button button--tertiary">
+                      {{ value.label | escape }}
+                      {% render 'icon-close-small' %}
+                      <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>


Is it easier to put it at the end so it doesn't disrupt the selectors to style label before it ? I feel like it sounds better when hearing: Clear filter Buttermilk. Rather than Buttermilk Clear filter.
But I don't have strong feelings, this is much better already.

I deemed the value.label to be the most pertinent information and that it should be read first by the screenreader. Otherwise, quickly tabbing through the list of filters, the screenreader will repeatedly announce "Clear filter" and the user must pause and wait for each value.label to be read.

tyleralsbury

This is looking really great overall. I focused on looking at the changes to the JS and the use of the Snippet. I think this is a good case for Snippet use and you used it in a really smart way. Though we are trying to avoid using snippets, this is a pretty large piece of complex code that would be a pain to maintain if it were duplicated between two different files, so I do agree with the snippet use here.

Aside from that, I like the efficient data sharing between instances of the classes. I think it's really a smart way to handle that and is something we should consider when building out these types of components.

I tested on desktop and mobile on Chrome and Firefox and it all worked well. I played around with it for about 10 - 15 minutes and didn't run into any issues. I also tried using keyboard navigation and using my mouse and both worked well, too. Overall, I think it's looking good.

Code and Testing both look good to me 👍 Nothing to flag in particular.

Also great collaboration between yourself and Ludo in the comments. I was able to follow along with everything you two discussed and get all the context I needed. Very helpful!

…h-facet-filtering # Conflicts: # assets/template-collection.css

…fy/dawn into add-search-facet-filtering

ludoboludo

Looks like all translations came back 👌

tyleralsbury

Took a quick look at the translation commits and they look 👍

This reverts commit be5d512.

* Move facet/filtering to snippet, include snippet in collection and search * Update logic for empty states * Update facet variables names * Generalize naming to disassociate elements from collection * Disassociate strings from collection * Update JS naming for facets * Update 19 translation files * Update 10 translation files * Change facet functions to static * Ensure title links inherit parent font-size * Simplify naming to follow BEM conventions * Update container id * Load facet js conditionally when enabled * Update from Shopify for theme dawn/add-search-facet-filtering * Revert "Update from Shopify for theme dawn/add-search-facet-filtering" This reverts commit 3793c14. * Refactor event listener * Move static properties out of class * Address PR feedback * Update 17 translation files * Update 13 translation files * Update from Shopify for theme dawn/add-search-facet-filtering * Revert "Update from Shopify for theme dawn/add-search-facet-filtering" This reverts commit be5d512. Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com>

KaichenWang added 7 commits September 2, 2021 11:26

Move facet/filtering to snippet, include snippet in collection and se…

e936958

…arch

Merge branch 'main' of https://github.com/Shopify/dawn into main

a3fe0bd

Update logic for empty states

e055a00

Update facet variables names

714b8cb

Generalize naming to disassociate elements from collection

53516d7

Disassociate strings from collection

1d0ab63

Update JS naming for facets

a59516a

KaichenWang requested review from carolineschnapp and tyleralsbury September 3, 2021 18:32

KaichenWang commented Sep 3, 2021

View reviewed changes

translation-platform bot and others added 2 commits September 6, 2021 17:10

Update 19 translation files

65af6c9

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

2ca9c7b

…h-facet-filtering # Conflicts: # locales/zh-CN.json

ludoboludo self-requested a review September 7, 2021 15:09

ludoboludo reviewed Sep 7, 2021

View reviewed changes

Update 10 translation files

473fe0f

KaichenWang closed this Sep 7, 2021

KaichenWang and others added 6 commits September 8, 2021 15:24

Change facet functions to static

0c9389e

Ensure title links inherit parent font-size

a4b641e

Simplify naming to follow BEM conventions

7dc2ea5

Update container id

13bbaef

Load facet js conditionally when enabled

7043e33

Update from Shopify for theme dawn/add-search-facet-filtering

3793c14

KaichenWang reopened this Sep 8, 2021

Revert "Update from Shopify for theme dawn/add-search-facet-filtering"

6a00729

This reverts commit 3793c14.

ludoboludo reviewed Sep 9, 2021

View reviewed changes

KaichenWang closed this Sep 9, 2021

Move static properties out of class

88b35d1

KaichenWang reopened this Sep 9, 2021

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

4ebc258

…h-facet-filtering # Conflicts: # locales/de.json

KaichenWang requested a review from ludoboludo September 9, 2021 19:20

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

7e2d60e

…h-facet-filtering # Conflicts: # sections/main-search.liquid

ludoboludo reviewed Sep 10, 2021

View reviewed changes

assets/component-facets.css Outdated Show resolved Hide resolved

snippets/facets.liquid Show resolved Hide resolved

sections/main-search.liquid Show resolved Hide resolved

Address PR feedback

c74b765

KaichenWang requested a review from ludoboludo September 13, 2021 15:30

ludoboludo previously approved these changes Sep 13, 2021

View reviewed changes

Update 17 translation files

3192f3c

translation-platform bot dismissed ludoboludo’s stale review via 3192f3c September 14, 2021 17:14

tyleralsbury previously approved these changes Sep 14, 2021

View reviewed changes

KaichenWang added 2 commits September 14, 2021 16:13

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

789cb9a

…h-facet-filtering # Conflicts: # assets/template-collection.css

Merge branch 'add-search-facet-filtering' of https://github.com/Shopi…

1c90365

…fy/dawn into add-search-facet-filtering

KaichenWang dismissed tyleralsbury’s stale review via 1c90365 September 14, 2021 20:15

Update 13 translation files

71ed446

ludoboludo previously approved these changes Sep 15, 2021

View reviewed changes

tyleralsbury previously approved these changes Sep 15, 2021

View reviewed changes

Update from Shopify for theme dawn/add-search-facet-filtering

be5d512

shopify bot dismissed stale reviews from tyleralsbury and ludoboludo via be5d512 September 15, 2021 20:01

Revert "Update from Shopify for theme dawn/add-search-facet-filtering"

6206a37

This reverts commit be5d512.

ludoboludo approved these changes Sep 15, 2021

View reviewed changes

tyleralsbury approved these changes Sep 15, 2021

View reviewed changes

KaichenWang merged commit afbf8c5 into main Sep 15, 2021

KaichenWang deleted the add-search-facet-filtering branch September 15, 2021 21:18

KaichenWang mentioned this pull request Sep 29, 2021

Version bump to 2.2.0 #712

Merged

		@@ -1,25 +1,29 @@
		{{ 'template-collection.css' \| asset_url \| stylesheet_tag }}
		{{ 'component-card.css' \| asset_url \| stylesheet_tag }}

Conversation

KaichenWang commented Sep 3, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scenarios

Liquid

Additional

Uh oh!

KaichenWang Sep 3, 2021

Choose a reason for hiding this comment

Uh oh!

KaichenWang commented Sep 3, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyleralsbury commented Sep 3, 2021

Uh oh!

ghost commented Sep 6, 2021

Uh oh!

KaichenWang commented Sep 7, 2021

Uh oh!

ludoboludo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KaichenWang commented Sep 7, 2021

Uh oh!

KaichenWang commented Sep 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ludoboludo Sep 9, 2021

Choose a reason for hiding this comment

Uh oh!

ludoboludo Sep 9, 2021

Choose a reason for hiding this comment

Uh oh!

KaichenWang Sep 9, 2021

Choose a reason for hiding this comment

Uh oh!

KaichenWang Sep 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ludoboludo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ludoboludo left a comment

Choose a reason for hiding this comment

Uh oh!

ludoboludo Sep 13, 2021

Choose a reason for hiding this comment

Uh oh!

KaichenWang Sep 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tyleralsbury left a comment

Choose a reason for hiding this comment

Uh oh!

ludoboludo left a comment

Choose a reason for hiding this comment

Uh oh!

tyleralsbury left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

KaichenWang commented Sep 3, 2021 •

edited

Loading

KaichenWang commented Sep 3, 2021 •

edited

Loading

KaichenWang commented Sep 8, 2021 •

edited

Loading

KaichenWang Sep 9, 2021 •

edited

Loading

KaichenWang Sep 14, 2021 •

edited

Loading