ais-trending-facets

Signature

<ais-trending-facets
  facet-name="string"
  // Optional parameters
  :limit="number"
  :threshold="number"
  :fallback-parameters="object"
  :escapeHTML="boolean"
  :transform-items="function"
  :class-names="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

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 ais-trending-facets to display facet values identified by the trending facet values model, such as brands whose products are gaining popularity. See also: Set up Algolia Recommend

Examples

Vue

<ais-trending-facets facet-name="brand">
  <template v-slot:item="{ item }">
    {{ item.facetValue }}
  </template>
</ais-trending-facets>

Props

string

required

The attribute for which to retrieve trending values, such as brand. The attribute must be included in the trending facet values model.

Vue

<ais-trending-facets facet-name="brand" />

number

The maximum number of trending facet values to retrieve. The widget may return fewer values, depending on the available recommendations and request parameters. If you omit limit or set it to 0, the widget returns all available trending facet values.

Vue

<ais-trending-facets
  // ...
  :limit="4"
/>

number

The recommendation score threshold (0 to 100). The widget only returns facet values with a score greater than this threshold.

Vue

<ais-trending-facets
  // ...
  :threshold="80"
/>

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

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

Vue

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

boolean

default:true

Whether to escape HTML tags from recommendations string values.

Vue

<ais-trending-facets
  // ...
  :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-trending-facets
    facet-name="brand"
    :transform-items="transformItems"
  />
</template>

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

object

default:"{}"

The CSS classes you can override:

ais-TrendingFacets. The widget’s root element.
ais-TrendingFacets--empty. The root element without results.
ais-TrendingFacets-title. The widget’s title element.
ais-TrendingFacets-container. The container of the list element.
ais-TrendingFacets-list. The list of trending facet values.
ais-TrendingFacets-item. The list item.

Vue

<ais-trending-facets
  // ...
  :class-names="{
    'ais-TrendingFacets': 'MyCustomTrendingFacets',
    'ais-TrendingFacets-list': 'MyCustomTrendingFacetsList',
    // ...
  }"
/>

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 trending facet values. Each item has facetName, facetValue, and _score properties.

Vue

<ais-trending-facets facet-name="brand">
  <template v-slot="{ items }">
    <ul>
      <li
        v-for="item in items"
        :key="`${item.facetName}:${item.facetValue}`"
      >
        {{ item.facetValue }}
      </li>
    </ul>
  </template>
</ais-trending-facets>

The slot to override the DOM output of each trending facet value. If you don’t provide it, the widget displays the facetValue as plain text.Scope

item: object. A single trending facet value with facetName, facetValue, and _score properties.

Vue

<ais-trending-facets facet-name="brand">
  <template v-slot:item="{ item }">
    <strong>{{ item.facetValue }}</strong>
  </template>
</ais-trending-facets>

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 “Trending” as the title.Scope

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

Vue

<ais-trending-facets facet-name="brand">
  <template v-slot:header="{ items, classNames }">
    <h2 :class="classNames.title">Trending brands ({{ items.length }})</h2>
  </template>
</ais-trending-facets>

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

Vue

<ais-trending-facets facet-name="brand">
  <template v-slot:empty>
    <p>No trending brands.</p>
  </template>
</ais-trending-facets>

HTML output

HTML

<section class="ais-TrendingFacets">
  <h3 class="ais-TrendingFacets-title">Trending</h3>
  <div class="ais-TrendingFacets-container">
    <ol class="ais-TrendingFacets-list">
      <li class="ais-TrendingFacets-item">...</li>
      <li class="ais-TrendingFacets-item">...</li>
      <li class="ais-TrendingFacets-item">...</li>
    </ol>
  </div>
</section>

​Import

​About this widget

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Examples

Props

Customize the UI

HTML output