CODEWITHSUNDEEP
vue.jsalgoliainstantsearch.jsvue-instant-search
Adam Hopkinson
Adam Hopkinson

Reputation: 28795

Algolia InstantSearchjs Vue dynamic widgets

We have an implementation of Algolia search using the InstantSearch Vue components.

My understanding is that Algolia can dynamically show facets depending on the items in the search result - for example, showing 'memory' if there are a large proportion of mobile phones in the results, 'size' if there are a large proportion of TVs, etc.

We're trying to accomplish this using the ais-dynamic-widgets component. We've set up the facets and the facet display in the dashboard.

From the name, you'd expect ais-dynamic-widgets to dynamically show widgets - but from our experience and the examples in the docs it appears it's still required to manually list the facet widgets within the component:

<ais-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
  <ais-panel>
    <ais-menu attribute="categories" />
  </ais-panel>
  <ais-hierarchical-menu :attributes="['categories']" />
</ais-dynamic-widgets>

Using Vue Inspector I can see that ais-dynamic-widgets is aware of the defined facets - they appear in data.state.attributesToRender:

Vue Inspector showing defined facets

I would expect to be able to do something like:

<ais-dynamic-widgets>
  <ais-refinement-list v-for="attr in data.state.attributesToRender" :key="attr" :attribute="attr" />
</ais-dynamic-widgets>

But:

  1. I can't find a way to reference this data (likely my lack of Vue skills 😎
  2. If this did work, will it automatically only show applicable facets?

Upvotes: 2

Views: 215

Answers (0)

Related Questions