widgets sortBySelector

Edit this page

Description

Sort by selector is a widget used for letting the user choose between different indices that contains the same data with a different order / ranking formula.

For the users it is like they are selecting a new sort order.

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.sortBySelector({ container: string|HTMLElement, indices: Array<SortByIndexDefinition>, autoHideContainer: [boolean], cssClasses: [SortByWidgetCssClasses], transformItems: [(Array<object>) => Array<object>], }: SortByWidgetOptions);
search.addWidget(widget);

Options

SortByWidgetOptions

  • containerstring|HTMLElement

    CSS Selector or HTMLElement to insert the widget.

  • indicesArray<SortByIndexDefinition>

    Array of objects defining the different indices to choose from.

  • autoHideContainer[boolean]
    Default value: false

    Hide the container when no results match.

  • cssClasses[SortByWidgetCssClasses]

    CSS classes to be added.

  • transformItems[(Array<object>) => Array<object>]

    Function to transform the items passed to the templates.

SortByIndexDefinition

  • namestring

    The name of the index in Algolia.

  • labelstring

    The name of the index, for user usage.

SortByWidgetCssClasses

  • root[string|Array<string>]

    CSS classes added to the outer <div>.

  • select[string|Array<string>]

    CSS classes added to the parent <select>.

  • item[string|Array<string>]

    CSS classes added to each <option>.

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.sortBySelector({
    container: '#sort-by-container',
    indices: [
      {name: 'instant_search', label: 'Most relevant'},
      {name: 'instant_search_price_asc', label: 'Lowest price'},
      {name: 'instant_search_price_desc', label: 'Highest price'}
    ]
  })
);

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