UI libraries / Vue InstantSearch / Widgets

ais-query-rule-custom-data

Signature 
<ais-query-rule-custom-data
  // Optional parameters
  :transform-items="function"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisQueryRuleCustomData } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisQueryRuleCustomData
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

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 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

Parameter Description
transform-items
type: function
Optional

Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items.

In addition, the full results data is available, which includes all regular response parameters, as well as parameters from the helper (for example disjunctiveFacetsRefinements).
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <ais-query-rule-custom-data :transform-items="transformItems" />
</template>

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

    /* or, combined with results */
    transformItems(items, { results }) {
      return items.map(item => ({
        ...item,
        visible: results.page === 0,
      }));
    },
  },
};
</script>

Customize the UI

Parameter Description
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/"
}

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scope

  • items: object[]: the items returned by the Rules.
Copy 
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.

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 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

Copy 
1

<div class="ais-QueryRuleCustomData"></div>
Did you find this page helpful?
Vue InstantSearch v4