API Reference / Vue InstantSearch Widgets / ais-dynamic-widgets
Widget signature
<ais-experimental-dynamic-widgets
  // optional parameters
  transform-items="function"
>
  children
</ais-experimental-dynamic-widgets>

About this widget

ais-experimental-dynamic-widgets is a widget that displays matching widgets, based on by the corresponding settings of the index and may be altered by a query rule. You can configure the facet merchandising through the corresponding index setting.

Requirements

Examples

1
2
3
4
5
6
7
<ais-experimental-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
  <ais-panel>
    <ais-menu attribute="categories" />
  </ais-panel>
  <ais-hierarchical-menu :attributes="['categories']" />
</ais-experimental-dynamic-widgets>

Options

children
type: Widget[]
Required

The children of this component will be displayed dynamically based on the result of facetOrdering. This means that any child needs to have either the “attribute” or “attributes” prop.

1
2
3
<ais-experimental-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
</ais-experimental-dynamic-widgets>
transform-items
type: function
Optional

A function to transform the attributes to render, or using a different source to determine the attributes to render.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <ais-experimental-dynamic-widgets
    :transform-items="transformItems"
  >
    <!-- ... -->
  <ais-experimental-dynamic-widgets>
</template>

<script>
export default {
  methods: {
    transformItems(items, { results }) {
      return items;
    }
  }
}
</script>

Did you find this page helpful?