Add documentation on how to use routing with hierarchicalMenu

[Spone]

Do you want to request a feature or report a bug?

It's related to documentation

Feature: What is your use case for such a feature?

I'm having trouble implementing stateMapping for a hierarchicalMenu.

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Could you add an example for mapping a hierarchicalMenu state? Maybe on this page? https://community.algolia.com/instantsearch.js/v2/guides/routing.html

What is the version you are using? Always use the latest one before opening a bug issue.

2.7.4

[Spone]

It seems to work with:

stateMapping: {
  stateToRoute: uiState => {
    return {
      // ...
      category: uiState.hierarchicalMenu && uiState.hierarchicalMenu["category.lvl0"] && uiState.hierarchicalMenu["category.lvl0"].join('>')
    };
  },
  routeToState: ({turbolinks, ...routeState}) => {
    return {
      // ...
      hierarchicalMenu: {
        "category.lvl0": routeState.category && routeState.category.split('>')
      }
    };
  }
}

Here is my widget:

this.search.addWidget(
  hierarchicalMenu({
    container: '#filter-category',
    attributes: ['category.lvl0', 'category.lvl1', 'category.lvl2'],
    // ...
  })
);

Is it what I'm supposed to do? I'm confused to only use category.lvl0 in the stateMapping...

[bobylito]

Yes that's the proper way to do it. Where would you search for such information?

[Spone]

Thanks. As I said it would make sense to add it to https://community.algolia.com/instantsearch.js/v2/guides/routing.html and/or maybe to https://community.algolia.com/instantsearch.js/v2/widgets/hierarchicalMenu.html

[Haroenv]

The docs are quite different now, and mention the ui state shape multiple times (https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/), so it should be sufficient to avoid this issue for now. If you have further suggestions, please continue discussing here!

Thanks for bringing this issue up