2

I can see that there is an defaultRefinement option on the react widget hierarchicalMenu, but I can't find it in the .js docs. Is there an equivalent in .js?

If not, is there a workaround?

instantsearch.widgets.hierarchicalMenu({
        container: '#ais-filterCatMenu',
        defaultRefinement: 'Sofa > Sovesofa',
        attributes: [
            'categories.lvl0',
            'categories.lvl1',
        ],
...
}),
Bendik
  • 38
  • 4
  • https://github.com/algolia/instantsearch.js/blob/61ad247c252a42743efa35d0e32d1802119e53a2/stories/hierarchical-menu.stories.ts#L36 https://instantsearchjs.netlify.app/stories/?path=/story/refinements-hierarchicalmenu--with-default-selected-item – cmgchess Mar 29 '22 at 19:28

1 Answers1

3

With Instantsearch.js you can define an initialUiState when initializing the search client. https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-initialuistate

const search = instantsearch({
  // ...
  initialUiState: {
    indexName: {
      query: 'phone',
      page: 5,
    },
  },
});

I found the source of https://instantsearchjs.netlify.app/stories/?path=/story/refinements-hierarchicalmenu--with-default-selected-item on their github repo here

For example you can do something like this

const search = instantsearch({
  indexName: 'instant_search',
  searchClient,
  initialUiState: {
    instant_search: { //instant_search is index name
      hierarchicalMenu: {
        'hierarchicalCategories.lvl0': [
          'Cell Phones > Cell Phone Accessories > Car Chargers',
        ],
      },
    },
  },
});

search.addWidgets([
  instantsearch.widgets.hierarchicalMenu({
    container: '#hierarchical-menu',
    attributes: [
      'hierarchicalCategories.lvl0',
      'hierarchicalCategories.lvl1',
      'hierarchicalCategories.lvl2',
      'hierarchicalCategories.lvl3',
    ],
  }),
]);

which will end up looking like this. Edit hierarchical menu example (forked)

enter image description here

cmgchess
  • 7,996
  • 37
  • 44
  • 62
  • Is there way to have initially empty search results (or not to execute query)? query='' will still execute empty query and return all matches (whole dataset) – Fuad Efendi Sep 23 '22 at 23:07
  • @FuadEfendi maybe https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/js/#handling-empty-queries – cmgchess Sep 25 '22 at 14:23