Can you use multiple widgets that all use the same attribute?

In a project, we are using the AisRefinementList widget to allow users to filter results based on brand so the attribute for that widget is brand`:

<AisRefinementList attribute="brand" />

We want to use the AisMenu to display a list of related searches which are displayed based on the brand attribute as well. Essentially, for each brand that has at least 5 items we display a link to a page that only displays items for that brand within the overall category.

I’ll use a more concrete example:

Let’s say we have a category of “Microphones” and we have the following brands:

  • Shure
  • AKG
  • Blue
  • Audio Technica
  • plus many more, this is simplified for the example

And for each brand we have:

  • 20 Shure microphones
  • 13 AKG
  • 5 Blue
  • 3 Audio Technica.

For the page, we have a brand refinement list where the user can filter each brand to see, for example, only AKG and Blue microphones.

Further down the page, we have a “Related Searches” section which displays links to specific category pages for each brand that has at least 5 items (Shure, AKG, and Blue in this example). The logic is tied to the brand attribute so I want to use the AisMenu widget like so:

<AisMenu attribute="brand">
  <ul slot-scope={items}>
    <li v-for="item in filteredItems(items)" :key="item.value">
        <a href="/{category-page-for-current-item}">{{item.value}} Microphones</a>

filteredItems would contain the logic to filter out brands that don’t have enough items to show in the Related Searches section and the “Microphones” part of the link text would actually be determined by the category (Microphones in this example).

All of this to say, it appears that you can’t have multiple widgets on the page use the same attribute. If both of the widgets are on the page, then it seems that items is an empty collection. But if I remove one of the widgets then I get the expected result.

Is this expected behavior?

Hi @jack_kinsey,

This isn’t possible, because there is only one set of results to read facets from. A refinement list will need disjunctive results (OR), while a menu doesn’t, which means that the facet count would need to be different for the same facet.

Also you get to the complicated situation as:

  • RefinementList -> user refines 2 items
  • Menu -> what should be displayed here? Two selected items is against the contract of menu

Therefore it’s best if you use RefinementList in both. In the menu you could use the refine function from a wrapping ClearRefinements for example before refining the refinementList

But it’s indeed impossible (and maybe not sufficiently documented) that both widgets can’t live on the same page with the same attribute.

Hope that makes sense!

1 Like

Awesome, thanks for the response! I had a kind of “eureka” moment when I finally realized that I was really trying to use AisMenu for something it wasn’t meant to do. It is great to have a full explanation as to WHY this doesn’t work though!

1 Like