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"
/>
See code examples
See Live example

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

Copy 
1
2
3
4
5
6
7
8
9
10
11

<ais-query-rule-custom-data>
  <template slot="item" slot-scope="{ 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.
Copy 
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.

Copy 
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.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

<ais-query-rule-custom-data>
  <ol slot-scope="{ items }">
    <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>
</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.

Copy 
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.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<ais-query-rule-custom-data>
  <template slot="item" slot-scope="{ 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

Copy 
1

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

Did you find this page helpful?

Vue InstantSearch v3