question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hierarchical Menu including `?page` data when in the route state

See original GitHub issue

Bug 🐞

What is the current behavior?

<ais-hierarchical-menu /> is including the ?page=X data when it’s in the route state. I’ve had issues where Google is crawling through this ?page=X data through all the categories because of this. It doesn’t make sense if you go from ?page=5 to another category, that it stays on page 5.

Maybe I have set something up wrong? I have recreated (roughly) a demo sandbox below.

I understand the entire app all uses the createURL method, however I couldn’t find a way to basically disable the inclusion of the page parameter for the sidebar <ais-hierarchical-menu />.

I noticed on my live site, when clicked, it does remove the ?page=X param, but if I open it in a new tab (as Google would crawl it), it stays in it. Really strange.

I have noticed other demo’s also have this behaviour (set to page 3, then hover over sidebar categories to see that all URLs now include page 3 which you cannot assume since one category might have 1 page, also logically it makes no sense to be on page 3 on other categories): https://v2--vue-instantsearch.netlify.app/examples/ecommerce/index.html?page=3

If you test the behaviour in Algolia UI in the Browse screen in the index, it responds correctly and this case doesn’t happen. If you’re on page 3, and you set a category, it resets back to page 1 which is correct behaviour.

Any help appreciated!

Make a sandbox with the current behavior

Click on the link below, click Page 3 down the bottom, and then you see the sidebar categories now all include ?page=3.

https://codesandbox.io/s/vue-instantsearch-broken-page-query-param-forked-nwh3u?file=/src/App.vue

What is the expected behavior?

Hierarchical Menu URL does not include ?page=X as part of the URL when created.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jonathan-birdcommented, Mar 17, 2021

Looks to work @Haroenv!

Here’s a tweaked rough code sandbox showing it in action with routing & hierarchical menu: https://codesandbox.io/s/instantsearchjs-forked-pgrci?file=/src/app.js

1reaction
Haroenvcommented, Mar 16, 2021

Hey @jonathan-bird, you’re right, this is indeed a bug. I’m investigating to find on which level it should be fixed. Thanks for reporting!

Read more comments on GitHub >

github_iconTop Results From Across the Web

hierarchicalMenu | InstantSearch.js - Algolia
An InstantSearch.js widget to create a navigation menu based on a hierarchy of facets. It's used for categories with subcategories.
Read more >
hierarchical facets added to state several times when using ...
Upon page load, using the browser's network activity inspector, the request to Algolia servers shows that categories has been added to facets ...
Read more >
Website Navigation Design: Everything You Need to Know
Hierarchical website navigation means that navigation menus change depending on the context of each page. Sometimes, hierarchical website ...
Read more >
4. Types of Navigation - Designing Web Navigation [Book]
Connects one page to another based on the hierarchy of the site; on any page you'd expect to be able to move to...
Read more >
Angular Router: A Complete Guide
To implement our navigation menu we are going to be using the ... the router-outlet directive: this means the main content of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found