Custom Widget and Algolia Helper.js functions

I’m creating a custom widget to pre-check items on load:

this.search.addWidget({
            init(options) {
                // clear previous facets if set with query string or will cause error
                options.helper.clearRefinements(facetProperty);
                // use options.helper (https://github.com/algolia/algoliasearch-helper-js) to initialize the search with custom filters & parameters
                options.helper.addHierarchicalFacetRefinement(facetProperty, facetPath);
            }
        });

I’m running into an issue around the correct formatting for items that go into the addHierarchicalFacetRefinement.

This works:
options.helper.addHierarchicalFacetRefinement('ProgramCategorySearchHierarchyEnglish.lvl0', 'Arts & Culture');

This doesn’t work:
options.helper.addHierarchicalFacetRefinement('ProgramCategorySearchHierarchyEnglish.lvl1', 'Arts & Culture|Acting');

What is the correct formatting to be able to filter down to further levels?

My data is structured in my index like so:

ProgramCategorySearchHierarchyEnglish:{
   lvl0: ["Arts & Culture"],
   lvl1: ["Arts & Culture|Acting"]
}

Hi there,

Thank you for reaching out!
Could you tell us more about your use case (why do you need to perform pre-checks?)

In any case, the reason why you cannot access the further levels is because the default separator is >.
If you want to change it, you can take a look at the documentation (go to the “specifying another separator” section).

You can also see how it works on a very simple example here.

I hope this helps!

Hello Marie,

Thank you for the example! :slight_smile: Ok, so I need to specify a different default separator. How do I go about doing that in the context of a custom widget using instantsearch.js?

@marie-laure.sin just a note that I am already setting the separator on the hierarchical widget:

search.addWidget(
			instantsearch.widgets.hierarchicalMenu({
				container: "#refine-area-hierarchical",
				attributes: [
					"ProgramCategorySearchHierarchyEnglish.lvl0",
					"ProgramCategorySearchHierarchyEnglish.lvl1"
				],
				separator: '|'
			})
		); 

Not sure if that gets passed along.

@marie-laure.sin I also wonder if the separator has anything to do with it when I get this as an error:

ProgramCategorySearchHierarchyEnglish.lvl1 is not defined in the hierarchicalFacets attribute of the helper configuration

But lvl0 is defined?

@mattucci Could you try to reproduce the errors you are seeing by creating a JSFiddle (you can use this template)? It’ll be easier for us to help you!

Sure! I’ll develop one shortly. Now in regards to your example it didn’t illustrate how to “pre select” a hierarchical facet filter using the addHierarchicalFacetRefinement method, which is what my aim is.

@marie-laure.sin heya Marie, here is an example of what is happening:

Here I am presetting the lvl0 hierarchical facet with a custom widget that is working: https://jsfiddle.net/gmattucc/ath47xz5/

Here is an update of that fiddle where I try to filter by lvl1 and I get an error:
https://jsfiddle.net/gmattucc/ath47xz5/9/

By the way, thank you so much for your assistance :slight_smile:

@marie-laure.sin so referenced how query string parameter filters are added to a URL as you use instant search, and I guess I was getting confused with what level of hierarchical facet I should use.

I’ve got it working here: https://jsfiddle.net/gmattucc/ath47xz5/10/
How I was supposed to reference it:

options.helper.addHierarchicalFacetRefinement(
      "ProgramCategorySearchHierarchyEnglish.lvl0",
      "Arts & Culture|Acting"
    );

I was trying to use ProgramCategorySearchHierarchyEnglish.lvl1.

That’s great news! Thanks for sharing your progress with us!

Just to add to this conversation, something I noticed, it seems that the searchParamters > filters property that I use through instantsearch.js works differently. In the case of filters my initial assumption is the correct way to filter there:

    searchParameters: {
        // works
        filters: 'PropertyHierarchy.lvl1:"Property One|Property Two"'        
    }

Given a data structure like this:

PropertyHierarchy:{
   lvl0: ["PropertyOne"],
   lvl1: ["PropertyOne|PropertyTwo"]
}
1 Like