Hide irrelevant filters when they barely return products - #1355
Hide irrelevant filters when they barely return products#1355indykoning wants to merge 5 commits into
Conversation
| ({ instantSearchInstance }) => { | ||
| this.instantSearchInstance = instantSearchInstance | ||
| return { | ||
| onStateChange: () => {}, | ||
| subscribe: () => {}, | ||
| unsubscribe: () => {}, | ||
| } | ||
| }, |
There was a problem hiding this comment.
Adding a middleware to the instantsearch initialization gives us easy access to the instantsearchInstance.
Hacks we've used in the past were
export default {
inject: {
instantSearchInstance: {
from: '$_ais_instantSearchInstance',
},
},
...Alternatively custom widgets could be used: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/vue
That would mean every filter would need another Vue component wrapping it.
This current method gives us access to the instantSearchInstance within any Listing component.
|
Looking good to me, let's wait for a review from @Jade-GG + successful Playwright tests |
Jade-GG
left a comment
Jade-GG
left a comment
There was a problem hiding this comment.
Mostly LGTM, but hung up on some small details that I think are important when making this a default functionality.
| minProductPercentage = window.config.searchkit.min_filter_product_percentage ?? 10 | ||
| } | ||
|
|
||
| const resultCount = filterItems.reduce((sum, item) => item.count + sum, 0) |
There was a problem hiding this comment.
This doesn't appear to take into account range-based filters (as also shown by this change not being present in the range slider filter). This means you will get a ton of range filters and not many of the other filters, which is a specific thing I had to fix in one of our projects.
There was a problem hiding this comment.
I've added a function for range filters
|
|
||
| const resultCount = filterItems.reduce((sum, item) => item.count + sum, 0) | ||
|
|
||
| return resultCount / totalHits > minProductPercentage / 100 |
There was a problem hiding this comment.
Something else to be aware of is that it may be worthwhile to have a threshold after which a filter is always shown, regardless of percentage. For example, say you have a category with 5000 products. If 400 of those products have a common filter, it will be excluded from that category, but there's a good likelihood that that filter is actually useful depending on the project.
I think it may be worthwhile to either add this as a default functionality, or make an easy to overwrite comparison function that's used at the end here so you can program this yourself without having to overwrite the whole function.
There was a problem hiding this comment.
I reckon the filter relevancy rules would be especially useful for pages with 5000 products.
If there's enough filters that a filter would only match 400 of those 5000 you've got a good chance the filters exceed the list of products in height.
But for making it easy to overwrite is exactly why the function is structured the way it it.
For individual filters (say there is a filter you always want to show) you can overwrite the minProductPercentage in the function call to isRelevantFilter and set it to 0
If you would like to overwrite it for the entire catalog page you could overwrite
window.config.searchkit.min_filter_product_percentage and set the percentage higher or lower
|
Any issue ref? :) |
|
I've added the ref 🙂 |
3 participants
This PR attempts to hide irrelevant filters from listings.
As some examples:
A Category page with many different types of products could have a filter dedicated to a small subset of those products:
a filter with 4 options, one returning 19 products, one 13, one 2 and one 1.
We're on a category page with 622 products. This means on a page where we have 622 products we show a filter that would only ever be able to display a maximum of 35 products.
That's not a very relevant filter, however when we start filtering. Getting to 100 products that filter is relevant again. Calculating it to a percentage would be:
((19 + 13 + 2 + 1) / 622 * 100)= 5.6%Filtering it a little to 176 products:
((19 + 13 + 2 + 1) / 176 * 100)= 19.8%By calculating a percentage between total possible products in filter, and all current products we ensure only relevant filters that filter enough products are shown. But pages with only few products don't get impacted.
Ref: FW-2487