widgets ratingMenu

Description

Rating menu is used for displaying grade like filters. The values are normalized within boundaries.

The maximum value can be set (with max), the minimum is always 0.

Requirements

The attribute passed to attribute must be declared as an attribute for faceting in your Algolia settings.

The values inside this attribute must be JavaScript numbers (not strings).

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.ratingMenu({ 
  container: string|HTMLElement, 
  attribute: string, 
  max: [number], 
  templates: [RatingMenuWidgetTemplates], 
  cssClasses: [RatingMenuWidgetCssClasses], 
}: RatingMenuWidgetOptions);

search.addWidget(widget);

Options

RatingMenuWidgetOptions

• containerstring|HTMLElement

  Place where to insert the widget in your webpage.

• attributestring

  Name of the attribute in your records that contains the ratings.

• max[number]
  Default value: 5

  The maximum rating value.

• templates[RatingMenuWidgetTemplates]

  Templates to use for the widget.

• cssClasses[RatingMenuWidgetCssClasses]

  CSS classes to add.

RatingMenuWidgetTemplates

• item[string|function]

  Item template, provided with name, count, isRefined, url data properties.

RatingMenuWidgetCssClasses

• root[string|Array<string>]

  CSS class to add to the root element.

• noRefinementRoot[string|Array<string>]

  CSS class to add to the root element when there’s no refinements.

• list[string|Array<string>]

  CSS class to add to the list element.

• item[string|Array<string>]

  CSS class to add to each item element.

• selectedItem[string|Array<string>]

  CSS class to add the selected item element.

• disabledItem[string|Array<string>]

  CSS class to add a disabled item element.

• link[string|Array<string>]

  CSS class to add to each link element.

• starIcon[string|Array<string>]

  CSS class to add to each star element (when using the default template).

• fullStarIcon[string|Array<string>]

  CSS class to add to each full star element (when using the default template).

• emptyStarIcon[string|Array<string>]

  CSS class to add to each empty star element (when using the default template).

• label[string|Array<string>]

  CSS class to add to each label.

• count[string|Array<string>]

  CSS class to add to each counter.

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.ratingMenu({
    container: '#stars',
    attribute: 'rating',
    max: 5,
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.