Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve product search when filtering by facets #1078

Closed
skid opened this issue Sep 10, 2021 · 1 comment
Closed

Improve product search when filtering by facets #1078

skid opened this issue Sep 10, 2021 · 1 comment

Comments

@skid
Copy link
Contributor

skid commented Sep 10, 2021

Managing a large catalog can be a bit painful in the admin UI. Since facets are the main way of catalog organization, having more power when filtering by facets can be really useful.

In my specific situation, I have many facets, and few of them have A LOT of values (like 150). Right now the product search bar allows me to filter by facets, but selecting the right facets is difficult when you have many. The only way to filter by facet is to select the facet from the autocomplete which only does a startsWith() match.

Adding the following behaviour would make it much easier:

  1. Instead of matching the start of the search string, match any part. E.G. typing "fish" would match a facet named "Grilled Fish"
  2. Allow facet filtering by the facet name. E.G. typing "color:" would show only facet values of the "color" facet, and typing "color:re" would further limit the set to the color facets "REd" and "gREen".

P.S. I would appreciate a pointer to the component that does this filtering - as it's done entirely on the frontend. I might have a go at it, although I have zero angular experience.

@michaelbromley
Copy link
Member

This is a good suggestion, I agree.

Here's the function responsible for filtering facets:

filterFacetResults = (term: string, item: SearchProducts.FacetValues | { label: string }) => {
if (!this.isFacetValueItem(item)) {
return false;
}
return (
item.facetValue.name.toLowerCase().startsWith(term.toLowerCase()) ||
item.facetValue.facet.name.toLowerCase().startsWith(term.toLowerCase())
);
};

If you want to have a go at making this fix, you are very welcome! Just leave a note here. Maybe this will be the gateway drug to you taking up Angular 😆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants