[Product Grid: Filtering] Vertical filter

[duygukalaycioglu]

No description provided.

[duygukalaycioglu]

📖 Brief
Introduce vertical filters in addition to horizontal filter layout as an additional option.

✏️ Tasks:
1. Settings

• Remove collapse on desktop from product grid/filtering and sorting settings
• Add "desktop filter layout" dropdown with 3 filter layout options and sub-copy.

2. Design
a. Horizontal filter layout: No change.

• b. Drawer filter layout: Drawer is an existing interaction, the only change is adding this as a filter layout option in the new dropdown under settings. Sort won't be grouped with filters on desktop for any filter layout option.
  📌 The filter experience always defaults to drawer on mobile, and this is the only instance sort and filter will be grouped together. (for more info: visit Figma file, approved by: ✅ @danielvan)

• c. Vertical filter layout: This is a new filter layout.

• Vertical filter/ Default state: Open the first filter group by default when the desktop filter layout is set to vertical by the merchant.

• Vertical filter/ Filters selected from 1 filter group:
  When the buyer selects filters;

• display pills on top and “clear all”

• update the filter group name with the number of filters the buyer selected

Filters selected from multiple filter groups:
The pills keep stacking at the top.

• Vertical filter/ Clear all:
  When a buyer clicks to “clear all”;
• clear all pills
• remove “clear all”
• remove the numbers from the filter group names
• uncheck all selected filters

📌 Arrows: Buyer can manually open or close the filters by clicking the filter group name or arrow. When buyer opens a filter group, the arrows turns up (following the same interaction on mega menu)

• Vertical filter/ Show more x less:
  Display “show more” when the total number of filters is >10. Hide if the total number of filters is <10. Clicking “show more” should display the rest of the filters and turn the text into “show less”. Text style for both links: underlined.

📌 @sofiamatulis as we discussed during the design hand-off meeting, let's keep an eye on when this update is being merged: Boolean filters. I can update the designs when needed. (approved by: ✅ @nicklepine) cc: @tyleralsbury

[bredowmax]

Starting to look really good! One thing I noticed when testing: With a number of boolean metafields:

1. The chips would need to identify the metafield
2. The dropdown mechanism needs a lot of space & clicks.

I would prefer a chip or a checkbox that I can click to activate/deactivate rather than the current implementation. See Amazon:

[bredowmax]

Update: after latest code changes, the chips now do provide more information - great. One issue that remains, however, is that these drop-downs are incredibly slow to use. In case of booleans, I'd much prefer a simple checkbox, not hidden behind a dropdown (see my screenshot above from Amazon)

FYI @duygukalaycioglu

[duygukalaycioglu]

Thank you for the feedback @bredowmax! Boolean filters are not part of vertical filter project's scope. I recommend you to create a separate ticket for boolean filter related feedback and cc: @carolineschnapp.

[duygukalaycioglu]

I'd much prefer a simple checkbox, not hidden behind a dropdown (see my screenshot above from Amazon)

Thanks for sharing your thoughts! @breadowmax Using drawers for vertical filters was a design decision we made after our benchmarking and explorations. The drawers enable the merchants to collect their filters under specific filter groups and for buyers it is easier to grasp the amount of filter groupings quickly rather than scrolling through a very long list of exposed filters.

[danielvan]

Is the plan for us to keep all boolean filters in drawers too? It seems a strange experience to have a drawer for a single checkbox. Or was this done because right now we can't really identify when something under a category is a boolean and then surface it?