API Reference / Vue InstantSearch Widgets / ais-query-rule-custom-data

ais-query-rule-custom-data

Widget signature
<ais-query-rule-custom-data
  // Optional parameters
  :transform-items="function"
/>

About this widget

The ais-query-rule-custom-data widget displays custom data from Rules.

You may want to use this widget to display banners or recommendations returned by Rules, and that match search parameters.

Examples

1
2
3
4
5
6
7
8
9
10
11
<ais-query-rule-custom-data>
  <template v-slot:item="{ item }">
    <h2>{{ item.title }}</h2>
    <a :href="item.link">
      <img
        :src="item.banner"
        :alt="item.title"
      />
    </a>
  </template>
</ais-query-rule-custom-data>

Props

transform-items
type: function
Optional

Transforms the items to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <ais-query-rule-custom-data :transform-items="transformItems" />
</template>

<script>
export default {
  methods: {
    transformItems(items) {
      return items.filter(item => Boolean(item.banner));
    },
  },
};
</script>

Customize the UI

default

The slot to override the complete DOM output of the widget.

The following example assumes a Query Rule returned this custom data.

1
2
3
4
5
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}

Scope

  • items: object[]: the items returned by the Rules.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ais-query-rule-custom-data>
  <template v-slot="{ items }">
    <ol>
      <li v-for="item in items" :key="item.title">
        <h2>{{ item.title }}</h2>
        <a :href="item.link">
          <img
            :src="item.banner"
            :alt="item.title"
          />
        </a>
      </li>
    </ol>
  </template>
</ais-query-rule-custom-data>
item

The slot to override the DOM output of the item returned by the Rules.

The following example assumes a Query Rule returned this custom data.

1
2
3
4
5
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}

Scope

  • item: object: the item returned by the Rules.
1
2
3
4
5
6
7
8
9
10
11
<ais-query-rule-custom-data>
  <template v-slot:item="{ item }">
    <h2>{{ item.title }}</h2>
    <a :href="item.link">
      <img
        :src="item.banner"
        :alt="item.title"
      />
    </a>
  </template>
</ais-query-rule-custom-data>

HTML output

1
<div class="ais-QueryRuleCustomData"></div>

Did you find this page helpful?