How to narrow down facets based on selected options?

I want to be able to dynamically apply facets so that they narrow down the available options across attributes. Is there a way to do this without InstantSearch?

Hello,
I’ve been using Algolia without InstantSearch, and I have been having a similar problem to this other user. When I select an option within a facetable attribute, I lose the ability to select other similar facets, ie if I select “Color: Red”, I cannot select “Color: Blue”.
https://discourse.algolia.com/t/show-facets-without-hits/16433

I want to be able to do a union of facets within a certain attribute category, such as color, but also be able to narrow down those facets when other attribute facets are selected.

DESIRED BEHAVIOR
The desired behavior is the same as how it is done in the Algolia dashboard, but I am having a lot of trouble recreating.
When I select "Men’s, the other facet categories are narrowed down, but I am still able to select “Youth” within the gender category.

When I select “Hoodies”, the counts go down within youth. If it were to go below zero, it would not be displayed.

CURRENT BEHAVIOR

image
When a filter is unselected, all facet options that are available are displayed
image
When applying the filter, the option to select youth is gone (which makes sense given the query I am providing).

I want to be able to dynamically apply facets so that they narrow down the available options across attributes. Is there a way to do this without InstantSearch?

@dspooner welcome to the community!

Just to make sure I can provide the right information since you are not using InstantSearch, how are you currently interacting with Algolia? Are you using the API or one of our API Clients (if so, which one)?

Thanks!

1 Like

@michael.king I am using the Javascript API

SOLUTION:
I found a solution on my own, and I figured it may be helpful to others to post here.
I discovered this by investigating how the Algolia dashboard does its network requests. If you have three facets applied, such as “color”, “brand”, and “size”, you will get the correct facet values to display for a specific attribute by making a query with the other two.
IE:

  • To get the facets to display for color: make a query with your ‘brand’ and ‘size’ facets applied. Select the resulting facets[‘color’] (or appropriate data structure) and store that somewhere.
mergedFacets = yourCustomMergeFunction(mergedFacets, facets['color'])
  • To get the facets to display for brand: make a query with your ‘color’ and ‘size’ facets applied.Select the resulting facets[‘brand’] (or appropriate data structure) and store that somewhere.
mergedFacets = yourCustomMergeFunction(mergedFacets, facets['brand'])
  • …etc, repeat as many times as you have active facet attribute categories. If you have multiple values selected in ‘color’, for example, the process does not change.

Then when you want to retrieve the facets for the rest of the categories where there isn’t a facet actively applied (ie "Departments), you’ll get the facets from the request with all the facets applied.

Bear in mind, this is rough pseudocode and will likely not work exactly in your scenario.

//activeFacets [ 'brand', 'color', 'size']
//facetsReturned - facets returned by the query with all facets enabled
activeFacets.map((facet)=>{
delete facetsReturned[facet as keyof typeof facetsReturned]
})
merged = yourCustomMergeFunction(merged, facetsReturned)

You’ll have to implement some more complex logic depending on the structure of your data to merge these values together based upon the specific query. It’s important to note, you can do this with minimal requests by using MultipleQueries (API documentation here).