Algolia DevCon
Oct. 2–3 2024, virtual.
UI libraries / Vue InstantSearch / Widgets

ais-rating-menu

Signature 
<ais-rating-menu
  attribute="string"
  // Optional parameters
  :max="number"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

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

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

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples
See live example

About this widget

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.

The attribute values must be integers, not strings nor floats. If your dataset includes float values, the widget returns only exact numerical matches. For example, if a user selects “4 [stars] & Up”, we only return records with values such as 4 or 5, not records with values like 4.5 or 4.7. If your attribute is a float, we recommend indexing a new attribute with the rounded integer value to use in this widget.

Examples

Copy 
1

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

Props

attribute
type: string
Required

The name of the attribute in the record.
Copy 
1

<ais-rating-menu attribute="rating" />
max
type: number
Optional

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

<ais-rating-menu
  [...]
  :max="4"
/>
class-names
type: object
default: {}
Optional

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.
Copy 
1
2
3
4
5
6
7
8

<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.

Note that 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 insights 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
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<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>
Did you find this page helpful?
Vue InstantSearch v4