Hello Community.
I have a client who is looking into changing the behavior of the vertical navigation when results are diplayed in more pages.
Right now you are taken to Page 2.
They would like to have the option to click “view more” and expand the navigation vertically, so that all results are displayed in the same page.
Please let me know.
Thank you.
Hello Community.
Similar to the above request, my client is building their Answers experience UI leveraging our live API.
They would like to change the behavior of the vertical pages navigation.
Once in the vertical navigation, they would like to be able to not go to a second page BUT to expand the results vertically, how should they structure the live API call?
Thank you.
Lucas B.
Hi Lucas,
If you’re using the API directly, you’ll need a listener for when the user hits the bottom of the page. Once that occurs, you’ll fire off an additional /vertical search request using the offset parameter to get the next set of results. You’ll append the new results the end of the page, and continue until you reach the resultsCount number of results. I’d recommend consulting articles likes this one for examples implementations.
If you’re using Answers Headless React, you’ll need to write a VerticalResults component that manages its own results state (instead of relying on useAnswersState()). This component will need that scroll event listener (either a manual one using document.addEventListener , something like useGlobalListener from @restart/hooks - npm) that makes a /vertical search and appends the new results to the component’s state.
Hope this helps!
Thanks,
Rose
Hi again Lucas,
One other thing to note around the parameters: In either case (Answers Headless React or the API directly), you’ll need to pass the current queryId with each additional request, so that scrolling does not generate a new one (since they are inherently part of the same query). You can see this behavior on our own Answers experience on yext.com while paginating:
If you’re using Headless, the queryId can be found in the queryState.
Thanks!
Rose
