API Reference / Vue InstantSearch Widgets / ais-query-rule-custom-data
Apr. 24, 2019

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 Query Rules.

You may want to use this widget to display banners or recommendations returned by Query 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 Query 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 Query 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 Query 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 v2