ais-query-rule-custom-data

Signature

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

Import

Component
Plugin

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
  },
  // ...
};

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

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

function

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

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

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>

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>

​Import

​About this widget

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Examples

Props

Customize the UI

HTML output