Vertical filter

[sofiamatulis]

PR Summary:

We are now adding a new filter type: Vertical filter. We are also removing the checkbox for collapsing on desktop. Instead we are now making it a filter type: Drawer

https://screenshot.click/16-12-zy4ti-tlsoz.png
https://screenshot.click/16-12-6pk6c-x8mcw.png

Why are these changes introduced?

Fixes #1501 .

Figma: https://www.figma.com/file/uTOxNz8OOWbc8Ry5Z5p7xK/Vertical-Filter-1.0-%5BMVP%5D?node-id=452%3A665

What is new?

• First dropdown is open when the user first gets to the page
• Pills are on top
• Reset per filter doesn't exist on vertical filter
• Number of products are right next to sort: https://screenshot.click/16-16-n5wev-3ntdx.png
• We have a show more/show less when there are more than 10. https://screenshot.click/16-17-qsnd0-3yjuv.png (by clicking show more it shows the remaining filters)
• Number of filters in brackets next to the label: https://screenshot.click/16-18-jeliv-smbxm.png'
• Different spacing on vertical filters
• When drawer is selected, sort is not a part of it (but mobile stays the same)
• Available on product grid (collection page) and search template

Testing steps/scenarios

• Test all of the filters on mobile and desktop
• JS and no JS (for the no JS experience filter and sort are grouped together because they need to be in the same form)

Demo links

• Editor

Checklist

• Added PR summary for release notes
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[katycobb]

Hi Sofia, thanks for sharing. A couple of content tweaks needed:

• Update Desktop filter type to Desktop filter layout
• Dropdown options should appear in this order:
  • Horizontal
  • Vertical
  • Drawer

[sofiamatulis]

Hi Sofia, thanks for sharing. A couple of content tweaks needed:

@katycobb Thanks Katy! The content has been updated. If it looks good, I will request translations 🙏

[katycobb]

Hi Sofia, thanks for sharing. A couple of content tweaks needed:

@katycobb Thanks Katy! The content has been updated. If it looks good, I will request translations 🙏

Looks good, thanks!

[duygukalaycioglu]

Hey Sofia, thanks for sharing!

Couple of quick things:

• Price content is getting outside of the filters.

• clear all link should be aligned with filter at the top right, let's also make sure the top padding above the pills is consistent with below.

• I believe you are working on show more and less, they should be underlined by default.

• On drawer filter layout, filter and sort shouldn't be grouped.

I'll continue to review the PR this afternoon.

[sofiamatulis]

• Price content is getting outside of the filters.

@duygukalaycioglu This has been fixed :) But to allow the price to fit I had to increase the width of the vertical filter

[duygukalaycioglu]

@sofiamatulis thanks Sofia!

I agree,I think the filter becomes extremely wide which is not ideal.

Leaving fill in the ranges action to the buyer instead of the merchant is an interesting concept, would love to revisit this on a separate ticket. Is it possible to remove this range and replace it with checkboxes for vertical filters? Like below?

[duygukalaycioglu]

I'll continue looking at spacings and text sizes next week, here are quick updates:

• - change "clear all" to "remove all" as discussed with Scott
• - "remove all" link text size = increase to 14px
• - arrows should rotate once the filter tabs are opened
• - let's make the spacings within the tabs consistent (see below)
• – let's also make some adjustments for the price filter elements (see below) - if possible remove line below this is the highest price copy, left align, apply new spacing

global spacing

price filter adjustments

[translation-platform]

We have received a translation request but there is a question blocking translation work. Your help is needed.

Click the following links to answer the questions

⚠️ Replying directly to this comment in GitHub will not work! 🙅‍♀️

• Hi, Could you be more specific what 'filter' indicates here? We have quite different translation for this term. Thanks!

https://github.com/Shopify/dawn/blob/db557f928ba4640f23b1893ff10f841e7246148c/locales/en.default.schema.json#L

---

Not your issue?

Forward the issue to someone with more context; please don't leave this pending. 🙏

Questions?

Hop in the #help-i18n-and-translation Slack channel.

[sofiamatulis]

[x] - "remove all" link text size = increase to 14px

@duygukalaycioglu I also updated the sizing of the pills to 14px since I believe this was mentioned as well. Let me know your thoughts :)

[sofiamatulis]

@sofiamatulis thanks Sofia!

I agree,I think the filter becomes extremely wide which is not ideal.

Leaving fill in the ranges action to the buyer instead of the merchant is an interesting concept, would love to revisit this on a separate ticket. Is it possible to remove this range and replace it with checkboxes for vertical filters? Like below?

For context and visibility sharing why we aren't doing this:

we would have to hardcode them ourselves if we want these designs. That is because it doesn't come from the merchant/product so we would have to create it ourselves and decide the values ourselves. (otherwise youd end up with pills with specific prices like 19.99 etc, but not ranges. The workaround was to have them be inputs and let the buyers select it themselves

Because of that we are just decreasing the size of the inputs

[sofiamatulis]

• - let's make the spacings within the tabs consistent (see below)
• – let's also make some adjustments for the price filter elements (see below) - if possible remove line below this is the highest price copy, left align, apply new spacing

@duygukalaycioglu For the spacing this is the current spacing for horizontal filter. Would you like me to update that one as well or just for vertical?

[bacounts]

Because of that, we are just decreasing the size of the inputs

Could the inputs stack at an earlier or 1-time breakpoint? Reducing the input size might be visually problematic for longer-priced products (i.e., $100,000.00).

The ideal solution would be to create a responsive range slider with smaller input fields below, but this would likely be tacked in a separate PR. See example from ticket: #255 (comment)

There is quite a bit of discussion around the price input fields in this ticket: #255

[duygukalaycioglu]

@duygukalaycioglu For the spacing this is the current spacing for horizontal filter. Would you like me to update that one as well or just for vertical?

just for vertical, thank you! @sofiamatulis

[duygukalaycioglu]

Thanks for sharing your thoughts @bacounts I think a merchant having >8 figure price is an edge case, but I agree the character limits for horizontal and vertical should be the same.

@sofiamatulis for vertical filters, can we remove the 2nd "$" and left align them with the rest of the copy to save space and lengthen the boxes for price to accommodate higher prices? I know the design will slightly differ from horizontal filter, but it is better than increasing the width of the filters. Any updates related to horizontal filters can be a follow up. cc: @nicklepine

[sofiamatulis]

Any bugs should be added here: #1558 to avoid duplicates

[svinkle]

Just noticed the aria-labelledby doesn't point to anything when set to Drawer, or mobile. I'd suggest simplifying to use aria-label with a string value.

Suggested change

	<aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
	<aside aria-label="Filter" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">

[sofiamatulis]

Does it make sense to create a hidden h2 for Drawer and mobile instead?

[svinkle]

Good idea, directly above the details element.

[sofiamatulis]

Created an issue here: #1561

[bredowmax]

One thing I noticed while testing this:

"products per page" isn't always a multiple of "numbers of columns on desktop".

If a page for example has 8 products per page but 3 columns on desktop, then the last slot in the last row would ALWAYS appear empty. Which could make the shopper think that there are not any more products