ais-rating-menu

Signature

<ais-rating-menu
  attribute="string"
  // Optional parameters
  :max="number"
  :class-names="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

View demo

The ais-rating-menu lets users refine search results by clicking on stars. The stars are based on the selected attribute.

Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard or using the attributesForFaceting parameter with the API.

Examples

Vue

<ais-rating-menu attribute="rating" />

Props

attribute

string

required

The name of the attribute in the record.

Vue

<ais-rating-menu attribute="rating" />

max

number

The maximum value for the rating. This value is exclusive, which means the number of stars will be the provided value, minus one.

Vue

<ais-rating-menu [...] :max="4" />

class-names

object

default: {}

The CSS classes you can override:

ais-RatingMenu. The root element of the widget.
ais-RatingMenu-starSymbol. The SVG symbol for a filled star.
ais-RatingMenu-starEmptySymbol. The SVG symbol for an empty star.
ais-RatingMenu-list. The list of ratings.
ais-RatingMenu-item. The item of the ratings list.
ais-RatingMenu-link. The link of each rating item.
ais-RatingMenu-starIcon. The star icon.
ais-RatingMenu-starIcon--full. The filled star icon.
ais-RatingMenu-starIcon--empty. The empty star icon.
ais-RatingMenu-label. The ”& Up” label.
ais-RatingMenu-count. The number of results for the rating.

Vue

<ais-rating-menu
  [...]
  :class-names="{
    'ais-RatingMenu': 'MyCustomRatingMenu',
    'ais-RatingMenu-starSymbol': 'MyCustomRatingMenuStarSymbol',
    // ...
  }"
/>

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 list of available refinements.
canRefine: boolean. Whether a refinement can be applied.
refine: (value: string) => void. A function to select the next refinement.
createURL: (item: string) => string. A function to generate a link from the refinement.
sendEvent: (eventType: 'click', facetValue: string) => void. The function to send click events.
- The view event is automatically sent when the facets are rendered.
- The click event is automatically sent when refine is called.
- You can learn more about the middleware.

Where each item is an object containing:

count: number. The number of results that match this refinement.
isRefined: boolean. Whether the refinement is selected.
name: string. The name corresponding to the number of stars.
value: string. The number of stars with a string form.
stars: boolean[]. The list of stars to generate with:
- true. Represents a filled star
- false. Represents an empty star

Vue

<ais-rating-menu attribute="rating">
  <template v-slot="{ items, refine, createURL, sendEvent }">
    <ul>
      <li v-for="item in items" :key="item.value">
        <a
          :href="createURL(item.value)"
          :style="{ color: item.isRefined ? 'gold' : 'black' }"
          @click.prevent="refine(item.value)"
        >
          <span v-for="(full, index) in item.stars" :key="index">
            {{ full ? '★' : '☆' }}
          </span>
          ({{ item.count }})
        </a>
      </li>
    </ul>
  </template>
</ais-rating-menu>

HTML output

HTML

<div class="ais-RatingMenu">
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <symbol id="ais-RatingMenu-starSymbol" viewBox="0 0 24 24">
      <path
        d="M12 .288l2.833 8.718h9.167l-7.417 5.389 2.833 8.718-7.416-5.388-7.417 5.388 2.833-8.718-7.416-5.389h9.167z"
      />
    </symbol>
    <symbol id="ais-RatingMenu-starEmptySymbol" viewBox="0 0 24 24">
      <path
        d="M12 6.76l1.379 4.246h4.465l-3.612 2.625 1.379 4.246-3.611-2.625-3.612 2.625 1.379-4.246-3.612-2.625h4.465l1.38-4.246zm0-6.472l-2.833 8.718h-9.167l7.416 5.389-2.833 8.718 7.417-5.388 7.416 5.388-2.833-8.718 7.417-5.389h-9.167l-2.833-8.718z"
      />
    </symbol>
  </svg>
  <ul class="ais-RatingMenu-list">
    <li class="ais-RatingMenu-item ais-RatingMenu-item--disabled">
      <div class="ais-RatingMenu-link" aria-label="5 & up" disabled>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <span class="ais-RatingMenu-label" aria-hidden="true">& Up</span>
        <span class="ais-RatingMenu-count">2,300</span>
      </div>
    </li>
    <li class="ais-RatingMenu-item ais-RatingMenu-item--selected">
      <a class="ais-RatingMenu-link" aria-label="4 & up" href="#">
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--empty"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starEmptySymbol"></use>
        </svg>
        <span class="ais-RatingMenu-label" aria-hidden="true">& Up</span>
        <span class="ais-RatingMenu-count">2,300</span>
      </a>
    </li>
    <li class="ais-RatingMenu-item">
      <a class="ais-RatingMenu-link" aria-label="3 & up" href="#">
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--full"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starSymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--empty"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starEmptySymbol"></use>
        </svg>
        <svg
          class="ais-RatingMenu-starIcon ais-RatingMenu-starIcon--empty"
          aria-hidden="true"
          width="24"
          height="24"
        >
          <use xlink:href="#ais-RatingMenu-starEmptySymbol"></use>
        </svg>
        <span class="ais-RatingMenu-label" aria-hidden="true">& Up</span>
        <span class="ais-RatingMenu-count">1,750</span>
      </a>
    </li>
  </ul>
</div>

Vue InstantSearch

ais-rating-menu

Import

About this widget

Requirements

Examples

Props

Customize the UI

HTML output

Vue InstantSearch

​Import

​About this widget

​Requirements

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Requirements

Examples

Props

Customize the UI

HTML output