ais-related-products

Signature

<ais-related-products
  :objectIDs="string[]"
  // Optional parameters
  :limit="number"
  :threshold="number"
  :query-parameters="object"
  :fallback-parameters="object"
  :escapeHTML="boolean"
  :transform-items="function"
  layout="list | carousel"
  :class-names="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

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

Use the ais-related-products widget to display a list of related products and related content. See also: Set up Algolia Recommend

Examples

Vue

<ais-related-products :objectIDs="['5723537']">
  <template v-slot:item="{ item }">
    {{ item.name }}
  </template>
</ais-related-products>

With carousel layout

To display the recommendations as a scrollable carousel, set the layout prop to carousel.

Vue

<ais-related-products :objectIDs="['5723537']" layout="carousel">
  <template v-slot:item="{ item }">
    {{ item.name }}
  </template>
</ais-related-products>

Props

string[]

required

The list of object IDs to get recommendations for. If you specify several object IDs, you’ll get a single set of aggregated results from the requests, ordered by their score.

Each objectID counts as one Recommend request, even when you pass multiple IDs in one array. For example, ["A", "B", "C"] counts as three requests and can affect your quota.

Vue

<ais-related-products :objectIDs="['5723537']" />

number

The number of recommendations to retrieve. Depending on the available recommendations and the other request parameters, the actual number of items may be lower than that. If you omit limit or set it to 0, the widget returns all matching recommendations.

Vue

<ais-related-products
  // ...
  :limit="4"
/>

number

The threshold for the recommendations confidence score (between 0 and 100). The widget only returns recommendations with a greater score.

Vue

<ais-related-products
  // ...
  :threshold="80"
/>

Omit<SearchParameters, hitsPerPage | length | offset | page>

Search parameters to apply to the recommendation request.

Vue

<ais-related-products
  // ...
  :query-parameters="{ filters: 'category:Book' }"
/>

Omit<SearchParameters, hitsPerPage | length | offset | page>

List of search parameters to send as an extra set when there aren’t enough recommendations.

Vue

<ais-related-products
  // ...
  :fallback-parameters="{ filters: 'category:Book' }"
/>

boolean

default:true

Whether to escape HTML tags from recommendations string values.

Vue

<ais-related-products
  // ...
  :escapeHTML="false"
/>

function

default:"items => items"

A function to transform or reorder recommendations before the widget displays them. It returns an array of items with the same structure.

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-related-products
    :objectIDs="['5723537']"
    :transform-items="transformItems"
  />
</template>

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

'list' | 'carousel'

default:"'list'"

How to display the recommendations:

list. A list of items.
carousel. A horizontally scrollable carousel with “Previous” and “Next” navigation buttons.

The item slot applies to both layouts.

Vue

<ais-related-products
  // ...
  layout="carousel"
/>

object

default:"{}"

The CSS classes you can override:

ais-RelatedProducts. The widget’s root element.
ais-RelatedProducts--empty. The root element without results.
ais-RelatedProducts-title. The widget’s title element.
ais-RelatedProducts-container. The container of the list element.
ais-RelatedProducts-list. The list of recommendations.
ais-RelatedProducts-item. The list item.

With the carousel layout, the ais-RelatedProducts-list and ais-RelatedProducts-item classes apply to the carousel’s list and items.

Vue

<ais-related-products
  // ...
  :class-names="{
    'ais-RelatedProducts': 'MyCustomRelatedProducts',
    'ais-RelatedProducts-list': 'MyCustomRelatedProductsList',
    // ...
  }"
/>

Customize the UI

The slot to override the complete DOM output of the widget. The widget only uses this slot if you don’t provide any other slot.Scope

items: object[]. The recommendations.
sendEvent: (eventType, hit, eventName) => void. The function to send click or conversion events.

Vue

<ais-related-products :objectIDs="['5723537']">
  <template v-slot="{ items, sendEvent }">
    <ul>
      <li v-for="item in items" :key="item.objectID">
        <a
          :href="item.url"
          @click="sendEvent('click', item, 'Product Clicked')"
        >
          {{ item.name }}
        </a>
      </li>
    </ul>
  </template>
</ais-related-products>

The slot to override the DOM output of each recommendation. If you don’t provide it, the widget displays the recommendation as a JSON string.Scope

item: object. A single recommendation with all its attributes.
sendEvent: (eventType, hit, eventName) => void. The function to send click or conversion events.

Vue

<ais-related-products :objectIDs="['5723537']">
  <template v-slot:item="{ item, sendEvent }">
    <a :href="item.url" @click="sendEvent('click', item, 'Product Clicked')">
      {{ item.name }}
    </a>
  </template>
</ais-related-products>

The slot to override the DOM output of the title header. The widget doesn’t render the header when there are no recommendations. If you don’t provide it, the widget displays “Related products” as the title.Scope

items: object[]. The recommendations.
translations: object. The widget’s translations, such as title.
classNames: object. The widget’s CSS classes, such as title.

Vue

<ais-related-products :objectIDs="['5723537']">
  <template v-slot:header="{ items, classNames }">
    <h2 :class="classNames.title">Recommendations ({{ items.length }})</h2>
  </template>
</ais-related-products>

The slot to override the DOM output when there are no recommendations. If you don’t provide it, the widget displays “No results”.

Vue

<ais-related-products :objectIDs="['5723537']">
  <template v-slot:empty>
    <p>No recommendations.</p>
  </template>
</ais-related-products>

HTML output

HTML

<section class="ais-RelatedProducts">
  <h3 class="ais-RelatedProducts-title">Related products</h3>
  <div class="ais-RelatedProducts-container">
    <ol class="ais-RelatedProducts-list">
      <li class="ais-RelatedProducts-item">...</li>
      <li class="ais-RelatedProducts-item">...</li>
      <li class="ais-RelatedProducts-item">...</li>
    </ol>
  </div>
</section>

​Import

​About this widget

​Examples

​With carousel layout

​Props

​Customize the UI

​HTML output

Import

About this widget

Examples

With carousel layout

Props

Customize the UI

HTML output