widgets sortBy

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

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

const widget = instantsearch.widgets.sortBy({ 
  container: string|HTMLElement, 
  items: Array<SortByIndexDefinition>, 
  cssClasses: [SortByWidgetCssClasses], 
  transformItems: [(Array<object>) => Array<object>], 
}: SortByWidgetOptions);

search.addWidget(widget);

Options

SortByWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• itemsArray<SortByIndexDefinition>

  Array of objects defining the different indices to choose from.

• cssClasses[SortByWidgetCssClasses]

  CSS classes to be added.

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

  Function to transform the items passed to the templates.

SortByIndexDefinition

• valuestring

  The name of the index to target.

• labelstring

  The label of the index to display.

SortByWidgetCssClasses

• root[string|Array<string>]

  CSS classes added to the outer <div>.

• select[string|Array<string>]

  CSS classes added to the parent <select>.

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

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