ais-infinite-hits

Signature

<ais-infinite-hits
  // Optional parameters
  :show-banner="boolean"
  :escapeHTML="boolean"
  :show-previous="boolean"
  :class-names="object"
  :transform-items="function"
  :cache="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

View demo

The ais-infinite-hits widget displays a list of results with a “Show more” button at the bottom of the list. As an alternative to this approach, the infinite scroll guide describes how to create an automatically scrolling infinite hits experience. To configure the number of hits to show, use the ais-hits-per-page or the ais-configure widget. See also: Searches without results.

Examples

Vue

<ais-infinite-hits />

Props

show-banner

boolean

default:true

Whether to display a top banner when banner data is included within the renderingContent property from the Algolia API response.

Vue

<ais-infinite-hits :show-banner="true" />

escapeHTML

boolean

default:true

Whether to escape the raw HTML in the hits.

Vue

<ais-infinite-hits :escapeHTML="false" />

show-previous

boolean

default:false

Enable the button to load previous results. The button is only displayed if the routing option is enabled in ais-instant-search and users aren’t on the first page. Override this behavior with slots.

Vue

<ais-infinite-hits :show-previous="true" />

class-names

object

default:"{}"

The CSS classes you can override:

ais-InfiniteHits. The root element of the widget.
ais-InfiniteHits-list. The list of results.
ais-InfiniteHits-item. The list items.
ais-InfiniteHits-banner. The optional banner’s root.
ais-InfiniteHits-banner-image. The image element of the optional banner.
ais-InfiniteHits-banner-link. The optional anchor element of the optional banner.
ais-InfiniteHits-loadPrevious. The button to display previous results.
ais-InfiniteHits-loadMore. The button to display more results.
ais-InfiniteHits-loadPrevious--disabled. The disabled button to display previous results.
ais-InfiniteHits-loadMore--disabled. The disabled button to display more results.

Vue

<ais-infinite-hits
  :class-names="{
    'ais-InfiniteHits': 'MyCustomInfiniteHits',
    'ais-InfiniteHits-list': 'MyCustomInfiniteHitsList',
    // ...
  }"
/>

transform-items

function

default:"items => items"

Receives the items and is called before displaying them. It returns a new array with the same “shape” as the original. This is helpful when transforming, removing, or reordering items.The complete results data is also available, including all regular response parameters and helper parameters (for example, disjunctiveFacetsRefinements).If you’re transforming an attribute with the ais-highlight widget, you must transform item._highlightResult[attribute].value.

To prevent creating infinite loops, avoid passing arrays, objects, or functions directly in the template. These values aren’t referentially equal on each render, which causes the widget to re-register every time. Instead, define them in your component’s data option and reference them in the template.

Vue

<template>
  <!-- ... -->
  <ais-infinite-hits :transform-items="transformItems" />
</template>

<script>
export default {
  methods: {
    transformItems(items) {
      return items.map((item) => ({
        ...item,
        name: item.name.toUpperCase(),
      }));
    },

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

cache

object

default:"in-memory cache object"

The widget caches all loaded hits. By default, it uses its own internal in-memory cache implementation. Alternatively, use sessionStorage to retain the cache even if users reload the page.You can also implement your own cache object with read and write methods. This can be handy if you need to persist the data across sessions or if you expect the cached data to grow larger than the browser’s 5 MB allowed storage.

<template>
  <ais-infinite-hits :cache="cache" />
</template>

<script>
import { createInfiniteHitsSessionStorageCache } from "instantsearch.js/es/lib/infiniteHitsCache";

export default {
  data() {
    return {
      cache: createInfiniteHitsSessionStorageCache(),
    };
  },
};
</script>

Customize the UI

default

The slot to override the complete DOM output of the widget.When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.Scope

items: object[]. The records that matched the search. Each element of items has the following read-only properties:
- __queryID. The query ID (only if clickAnalytics is true).
- __position. The absolute position of the item.
banner: object. The banner data returned within the renderingContent property from the Algolia API response.
refinePrevious: () => void. The function to load previous results.
refineNext: () => void. The function to load more results.
isLastPage: boolean. Whether it’s the last page.
sendEvent: (eventType, hit, eventName) => void. The function to send click or conversion events. The view event is automatically sent when this connector renders hits. To learn more, see the insights middleware.
- eventType: 'click' | 'conversion'
- hit: Hit | Hit[]
- eventName: string
insights: (method: string, payload: object) => void: (Deprecated) Sends Insights events.
- method: string. The Insights method to be called. Only search-related methods are supported: 'clickedObjectIDsAfterSearch', 'convertedObjectIDsAfterSearch'.
- payload: object. The payload to be sent.
  - eventName: string. The name of the event.
  - objectIDs: string[]. A list of objectIDs.
  - index?: string. The name of the index related to the click.
  - queryID?: string. The Algolia queryID found in the search response when clickAnalytics: true.
  - userToken?: string. A user identifier.
  - positions?: number[]. The position of the click in the list of Algolia search results. When not provided, index, queryID, and positions are inferred by the InstantSearch context and the passed object IDs:
    - index by default is the name of index that returned the passed object IDs.
    - queryID by default is the ID of the query that returned the passed object IDs.
    - positions by default is the absolute positions of the passed object IDs.
  For more details about the payload property, see the Insights client documentation.

<ais-infinite-hits>
  <template v-slot="{
    items,
    banner,
    refinePrevious,
    refineNext,
    isLastPage,
    sendEvent,
  }">
    <img :src="banner.image.urls[0].url" alt="banner alt text" />
    <ul>
      <li>
        <button @click="refinePrevious">
          Show previous results
        </button>
      </li>
      <li v-for="item in items" :key="item.objectID">
        <h1>{{ item.name }}</h1>
        <button
          type="button"
          @click="sendEvent('click', item, 'Item Added')"
        >
          Add to cart
        </button>
      </li>
      <li v-if="!isLastPage">
        <button @click="refineNext">
          Show more results
        </button>
      </li>
    </ul>
  </template>
</ais-infinite-hits>

loadPrevious

The slot to override the DOM output of the “Show previous” button.Scope

page: number: the value of the current page.
isFirstPage: boolean: whether it’s the first page.
refinePrevious: () => void: the function to load the previous page.

Vue

<ais-infinite-hits :show-previous="true">
  <template v-slot:loadPrevious="{ page, isFirstPage, refinePrevious }">
    <button
      :disabled="isFirstPage"
      @click="refinePrevious"
    >
      Show previous results (page: {{ page + 1 }})
    </button>
  </template>
</ais-infinite-hits>

banner

The slot to override the DOM output of the banner.Scope

banner: object. The banner data returned within the renderingContent property from the Algolia API response.

Vue

<ais-infinite-hits>
  <template v-slot:banner="{ banner }">
    <img :src="banner.image.urls[0].url" alt="banner alt text" />
  </template>
</ais-infinite-hits>

item

The slot to override the DOM output of the item.Scope

items: object. A single hit with all its attributes. Each element of items has the following read-only properties:
- __queryID. The query ID (only if clickAnalytics is true).
- __position. The absolute position of the item.
index: number. The relative position of the hit in the list.
insights: (method: string, payload: object) => void. (Deprecated) sends Insights events.
- method: string. The Insights method to be called. Only search-related methods are supported: 'clickedObjectIDsAfterSearch', 'convertedObjectIDsAfterSearch'.
- payload: object. The payload to be sent.
  - eventName: string. The name of the event.
  - objectIDs: string[]. A list of object IDs.
  - index?: string. The name of the index related to the click.
  - queryID?: string. The Algolia queryID found in the search response when clickAnalytics: true.
  - userToken?: string. A user identifier.
  - positions?: number[]. The position of the click in the list of Algolia search results. When not provided, index, queryID, and positions are inferred by the InstantSearch context and the passed objectIDs:
    - index by default is the name of index that returned the passed objectIDs.
    - queryID by default is the ID of the query that returned the passed objectIDs.
    - positions by default is the absolute positions of the passed objectIDs.
For more details about the payload property, see the Insights client documentation.

Vue

<ais-infinite-hits>
  <template v-slot:item="{ item, index, insights }">
    {{ index }} - {{ item.name }}
  </template>
</ais-infinite-hits>

loadMore

The slot to override the DOM output of the “Show more” button.Scope

page: number. The value of the current page.
isLastPage: boolean. Whether it’s the last page.
refineNext: () => void. The function to load the next page.

Vue

<ais-infinite-hits>
  <template v-slot:loadMore="{ page, isLastPage, refineNext }">
    <button
      :disabled="isLastPage"
      @click="refineNext"
    >
      Show more results (page: {{ page + 1 }})
    </button>
  </template>
</ais-infinite-hits>

HTML output

HTML

<div class="ais-InfiniteHits">
  <button class="ais-InfiniteHits-loadPrevious">Show previous results</button>
  <aside class="ais-Hits-banner">
    <a class="ais-Hits-banner-link">
      <img class="ais-Hits-banner-image" />
    </a>
  </aside>
  <ol class="ais-InfiniteHits-list">
    <li class="ais-InfiniteHits-item">...</li>
    <li class="ais-InfiniteHits-item">...</li>
    <li class="ais-InfiniteHits-item">...</li>
  </ol>
  <button class="ais-InfiniteHits-loadMore">Show more results</button>
</div>

Click and conversion events

If the insights option is true, the ais-infinite-hits widget automatically sends a click event with the following “shape” to the Insights API when a user clicks on a hit.

JSON

{
  "eventType": "click",
  "insightsMethod": "clickedObjectIDsAfterSearch",
  "payload": {
    "eventName": "Hit Clicked"
    // …
  },
  "widgetType": "ais.infiniteHits"
}

To customize this event, use the sendEvent function in your item slot and send a custom click event.

Vue

<ais-infinite-hits>
  <template v-slot:item="{ item, sendEvent }">
    <div @click="sendEvent('click', item, 'Product Clicked')">
      <h2>
        <ais-highlight attribute="name" :hit="item" />
      </h2>
      <p>{{ item.description }}</p>
    </div>
  </template>
</ais-infinite-hits>

The sendEvent function also accepts an object as a fourth argument to send directly to the Insights API. You can use it, for example, to send special conversion events with a subtype.

Vue

<ais-infinite-hits>
  <template v-slot:item="{ item, sendEvent }">
    <div>
      <h2>
        <ais-highlight attribute="name" :hit="item" />
      </h2>
      <p>{{ item.description }}</p>
      <button
        @click="sendEvent('conversion', hit, 'Added To Cart', {
          // Special subtype
          eventSubtype: 'addToCart',
          // An array of objects representing each item added to the cart
          objectData: [
            {
              // The discount value for this item, if applicable
              discount: item.discount || 0,
              // The price value for this item (minus the discount)
              price: item.price,
              // How many of this item were added
              quantity: 2,
            },
          ],
          // The total value of all items
          value: item.price * 2,
          // The currency code
          currency: 'USD',
        })"
      >
        Add to cart
      </button>
    </div>
  </template>
</ais-hits>

Use strings to represent monetary values in major currency units (for example, ‘5.45’). This avoids floating-point rounding issues, especially when performing calculations.

Vue InstantSearch

ais-infinite-hits

Import

About this widget

Examples

Props

Customize the UI

HTML output

Click and conversion events

Vue InstantSearch

​Import

​About this widget

​Examples

​Props

​Customize the UI

​HTML output

​Click and conversion events

Import

About this widget

Examples

Props

Customize the UI

HTML output

Click and conversion events