widgets starRating

Edit this page

Description

Star rating 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 attributeName 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

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

const widget = instantsearch.widgets.starRating({ container: string|HTMLElement, attributeName: string, max: [number], labels: [StarWidgetLabels], templates: [StarWidgetTemplates], transformData: [StarWidgetTransforms], autoHideContainer: [boolean], cssClasses: [StarWidgetCssClasses], collapsible: [boolean|StarWidgetCollapsibleOption], }: StarWidgetOptions);
search.addWidget(widget);

Options

StarWidgetOptions

  • containerstring|HTMLElement

    Place where to insert the widget in your webpage.

  • attributeNamestring

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

  • max[number]
    Default value: 5

    The maximum rating value.

  • labels[StarWidgetLabels]

    Labels used by the default template.

  • templates[StarWidgetTemplates]

    Templates to use for the widget.

  • transformData[StarWidgetTransforms]

    Object that contains the functions to be applied on the data * before being used for templating. Valid keys are body for the body template.

  • autoHideContainer[boolean]
    Default value: true

    Make the widget hides itself when there is no results matching.

  • cssClasses[StarWidgetCssClasses]

    CSS classes to add.

  • collapsible[boolean|StarWidgetCollapsibleOption]
    Default value: false

    If set to true, the widget can be collapsed. This parameter can also be

StarWidgetLabels

  • andUp[string]

    Label used to suffix the ratings.

StarWidgetTemplates

  • header[string|function]

    Header template.

  • item[string|function]

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

StarWidgetTransforms

  • item[function]

    Function to change the object passed to the item template.

StarWidgetCssClasses

  • root[string|Array<string>]

    CSS class to add to the root element.

  • header[string|Array<string>]

    CSS class to add to the header element.

  • body[string|Array<string>]

    CSS class to add to the body element.

  • list[string|Array<string>]

    CSS class to add to the list element.

  • item[string|Array<string>]

    CSS class to add to each item element.

  • count[string|Array<string>]

    CSS class to add to each counters

  • star[string|Array<string>]

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

  • emptyStar[string|Array<string>]

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

  • active[string|Array<string>]

    CSS class to add to each active element.

StarWidgetCollapsibleOption

  • collapsedboolean

    If set to true, the widget will be collapsed at first rendering.

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.starRating({
    container: '#stars',
    attributeName: 'rating',
    max: 5,
    labels: {
      andUp: '& Up'
    }
  })
);

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