API Reference / Vue InstantSearch Widgets / ais-rating-menu
Apr. 24, 2019

ais-rating-menu

Widget signature 
<ais-rating-menu
  attribute="string"
  // Optional parameters
  :max="number"
  :class-names="object"
/>
See code examples
See Live example

About this widget #

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

Requirements#

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

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

Scope#

  • items: object[]: the list of available refinements.
  • refine: (value: string) => void: a function to select the next refinement.
  • createURL: (item: object) => void: a function to generate an URL from the refinement.

Where each item is an object containing:

  • count: number: the number of results that match this refinement.
  • isRefined: boolean: whether or not 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

<ais-rating-menu attribute="rating">
  <ul slot-scope="{ items, refine, createURL }">
    <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>
</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 v2