How do I listen for new results?

I’m trying to work out how I can add a listener in vue when the results change.

For example - If the user clicks an menu option in the Hierarchical Menu how can I pick up that the results have now changed?

(FYI: The use case here is that I’m trying to show subcategories in the results hits as well as the hierarchical menu)

I saw this thread but it talks about watching for a change on a scoped slot and I’m at a loss for how to actually implement that.

Hi @rob.cooper,
Welcome to the forum!

I believe I understand what you’re trying to achieve as a whole (show subcategories in hits as well as in a hierarchical menu) and I guess I’m a little confused as to why this wouldn’t work out of the box without having to listen for new results.

If you’re using the component, it should already be set to update whenever you make changes to the query, including selecting facets in a Hierarchical Menu. I’ve created an example in a codesandbox here.

The hits components show one of the hierarchical attributes, and you can see hits updating as you select different facet values on the left.

Have I misunderstood what you’re trying to achieve? If, so would you mind describing it, or maybe forking that sandbox to show what you’re trying to do but that’s not working?

Thanks in advance!
M

Hey Maria,

I didn’t explain properly.

Using the codesandbox example, what I’m trying to do is have subcategories from the Hierarchical Menu also available (as clickable cards) above the search results.

Hopefully the screen grab shows what I’m mean?

Hi @rob.cooper this should be doable with slots only. It’s the usual way for customizing the UI of a widget
Have you tried that?

I have Youcef yes.

That’s how I’m getting the data into the hits component.

The problem I’ve got is working out how to ‘read’ the data of what subcategories there are and picking up when there are new subcategories available.

Maybe within the hits component I can read all the data that the Hierarchical menu gets?

Sorry for the noob questions

Hey @Youcef and @maria.schreiber did you have any thoughts on this. I’m still very stuck :frowning:

You sound like you’ve used the hierarchical menu inside hits.
What I had in mind is something like this:

<ais-search-box />
<ais-hierarchical-menu>  /* use slots here to show only the second level */ </ais-hierarchical-menu>
<ais-hits>
   ....
</ais-hits>

Can you show us how you did it?

Here is a boilerplate you can start off

Thanks Youcef.

I’m not looking to change the hierarchical menu. I didn’t explain well.

What I’m looking for is this:

I’d like the menu to open as shown here.

I’m also looking get a list of those subcategories and display them as cards just above the hits.

I feel like there should be a really obvious way to access the data that is fetched as part of the request from algolia within my vue app?

Apologies again for being dumb

I still don’t feel like you understand what I mean, so I made an example:

Is this what you want?

1 Like

Hey Youcef,

Thank you for your help - that’s really helpful :slight_smile: