widgets priceRanges

Edit this page

Description

Price ranges widget lets the user choose from of a set of predefined ranges. The ranges are displayed in a list.

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.priceRanges({ container: string|HTMLElement, attributeName: string, templates: [PriceRangeTemplates], currency: [string], labels: [PriceRangeLabels], autoHideContainer: [boolean], cssClasses: [PriceRangeClasses], collapsible: [boolean|{collapsed: boolean}], }: PriceRangeWidgetOptions);
search.addWidget(widget);

Options

PriceRangeWidgetOptions

  • containerstring|HTMLElement

    Valid CSS Selector as a string or DOMElement.

  • attributeNamestring

    Name of the attribute for faceting.

  • templates[PriceRangeTemplates]

    Templates to use for the widget.

  • currency[string]
    Default value: '$'

    The currency to display.

  • labels[PriceRangeLabels]

    Labels to use for the widget.

  • autoHideContainer[boolean]
    Default value: true

    Hide the container when no refinements available.

  • cssClasses[PriceRangeClasses]

    CSS classes to add.

  • collapsible[boolean|{collapsed: boolean}]
    Default value: false

    Hide the widget body and footer when clicking on header.

PriceRangeTemplates

  • item[string|({from: number, to: number, currency: string}) => undefined]

    Item template. Template data: from, to and currency

PriceRangeLabels

  • separator[string]

    Separator label, between min and max.

  • button[string]

    Button label.

PriceRangeClasses

  • 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 wrapping list element.

  • item[string|Array<string>]

    CSS class to add to each item element.

  • active[string|Array<string>]

    CSS class to add to the active item element.

  • form[string|Array<string>]

    CSS class to add to the form element.

  • label[string|Array<string>]

    CSS class to add to each wrapping label of the form.

  • input[string|Array<string>]

    CSS class to add to each input of the form.

  • currency[string|Array<string>]

    CSS class to add to each currency element of the form.

  • separator[string|Array<string>]

    CSS class to add to the separator of the form.

  • button[string|Array<string>]

    CSS class to add to the submit button of the form.

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.priceRanges({
    container: '#price-ranges',
    attributeName: 'price',
    labels: {
      currency: '$',
      separator: 'to',
      button: 'Go'
    },
    templates: {
      header: 'Price'
    }
  })
);

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