HierarchicalMenu only show one level

Hello,

I have some trouble to show more than one child of my hierchicalmenu with the react component . I don’t know what i’m doing wrong (i do the same thing than the storybook but it doesnt seems to work).

SO my pretty simple code look like this:

      <InstantSearch appId={ALGOLIA_APP_ID} apiKey={ALGOLIA_API_KEY} indexName={ALGOLIA_INDEX_MATERIAL}>
        <Configure hitsPerPage={10} />
        <Hits />
        <HierarchicalMenu
          attributes={['hierarchicalHierarchy.lvl0', 'hierarchicalHierarchy.lvl1', 'hierarchicalHierarchy.lvl2']}
        />
      </InstantSearch>

I have setup the hierarchicalHierarchy.lvl0 for facetings like this

And the menu show good but when i click on a lvl1 menu, the lvl 2 doesn’tt appear. For example when i click on Revetements > Revetements sols, there are 4 sub category like show in algolia dashboard :

But with the HierchicalMenu nothing appears, i click on Revetement sols here : 29

I try with a Custom hierchicalMenu (with this code Custom Hierarchi Menu), and the items appears empty when i click on Revetements sols.

Any idea what i’m doing wrong?

Thanks

Hi @Thibault92,

Welcome to the Algolia Community!

Would it be possible to create a codesandbox demonstrating this problem?

We have a starter template for React.

Post us a link here when you have it ready!

Thanks!

Here a exemple with a test account. I have hierarchy lvl 2 and i want to show but when i click it does’nt appear.

I want “Parquet” appear in the list when i click on menu Revetement > Revetement sol

Problem solved, i have a double space between the “>” character. My bad.

And for information, i was fooled by the view of dashboard doesnt show this space. Exemple:
When i see this, i see it’s ok.

But the edit view 17

Hi @Thibault92,

I’m glad you got this solved!

And thanks for putting your solution here in the Community so that others can find the answer should they have the same problem!

We appreciate your contribution!

Hi,

I was working on hierarchicalMenu widget with instantSearch.js since last 2 days. I followed the document as here hierarchicalMenu | InstantSearch.js | Algolia
everything done as explained but was getting error then I found this post at where Thibault92 luckily shared his screenshot of his data entered. I corrected my index data as per that and it worked!!

I think Algolia have to update the document. Currently document says to have data in this format for Hierarchicalmenu.

[
{
“objectID”: “321432”,
“name”: “lemon”,
“categories.lvl0”: “products”,
“categories.lvl1”: “products > fruits”
},
{
“objectID”: “8976987”,
“name”: “orange”,
“categories.lvl0”: “products”,
“categories.lvl1”: “products > fruits”
}
]

but it has to be in this format:

[
{
“objectID”: “321432”,
“name”: “lemon”,
“hierarchicalHierarchy”: {
“lvl0”: “products”,
“lvl1”: “products > fruits”
}
},
{
“objectID”: “8976987”,
“name”: “orange”,
“hierarchicalHierarchy”: {
“lvl0”: “products”,
“lvl1”: “products > fruits”
}
}
]

Hope someone like me will get help :slight_smile:

Thanks,
Krishna Kataria

Hi @designcuts,

Thank you for the message. I’ve tested with the flatten structure and it worked as expected. It shouldn’t have an impact on the behavior of the HierarchicalMenu. You can find the records I’ve used for the test below. You can find the live example on CodeSandbox.

[
  {
    name: "orange",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits",
    objectID: "8976987",
  },
  {
    name: "lemon",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits",
    objectID: "321432",
  },
  {
    name: "Slack",
    "categories.lvl0": "products",
    "categories.lvl1": "products > software",
    objectID: "2643100000",
  },
  {
    name: "Harry Potter",
    "hierarchicalCategories.lvl0": "products",
    "hierarchicalCategories.lvl1": "products > books",
    objectID: "2643099000",
  },
]

Hope that helps!

1 Like

Interesting and useful topic for me, thanks! :handshake: