ais-query-rule-custom-data

Shows custom data from applied index rules.

Signature

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

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

About this widget

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

You can use this widget to display banners or recommendations returned by rules when they match search parameters.

Examples

HTML

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

Vue

<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

default

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

The following example assumes a rule returned this custom data.

JSON

{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}

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.

Vue

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

JSON

{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}

Scope

• item: object. The item returned by the Rules.

Vue

<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

HTML

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