connectors connectSortBySelector

Edit this page

Description

The SortBySelector connector provides the logic to build a custom widget that will display a list of indices. With Algolia, this is most commonly used for changing ranking strategy. This allows a user to change how the hits are being sorted.

This connector provides the refine function that allows to switch indices. The connector provides to the rendering: refine() to switch the current index and options that are the values that can be selected. refine should be used with options.value.

Usage

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

const makeSortBySelector= instantsearch.connectors.connectSortBySelector(
function renderFn(
renderOpts: SortBySelectorRenderingOptions,
isFirstRendering: boolean) {
// render the custom SortBySelector widget
} );

const customSortBySelector = makeSortBySelector(instanceOpts: CustomSortBySelectorWidgetOptions);
search.addWidget(customSortBySelector);

Connector options

SortBySelectorRenderingOptions

  • currentRefinementstring

    The currently selected index.

  • optionsArray<SortBySelectorIndices>

    All the available indices

  • refine(string) => undefined

    Switches indices and triggers a new search.

  • hasNoResultsboolean

    true if the last search contains no result.

  • widgetParamsObject

    All original CustomSortBySelectorWidgetOptions forwarded to the renderFn.

SortBySelectorIndices

  • namestring

    Name of the index to target.

  • labelstring

    Label to display for the targeted index.

CustomSortBySelectorWidgetOptions

  • indicesArray<SortBySelectorIndices>

    Array of objects defining the different indices to choose from.

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

    Function to transform the items passed to the templates.

Example

// custom `renderFn` to render the custom SortBySelector widget
function renderFn(SortBySelectorRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    SortBySelectorRenderingOptions.widgetParams.containerNode.html('<select></select>');
    SortBySelectorRenderingOptions.widgetParams.containerNode
      .find('select')
      .on('change', function(event) {
        SortBySelectorRenderingOptions.refine(event.target.value);
      });
  }

  var optionsHTML = SortBySelectorRenderingOptions.options.map(function(option) {
    return `
      <option
        value="${option.value}"
        ${SortBySelectorRenderingOptions.currentRefinement === option.value ? 'selected' : ''}
      >
        ${option.label}
      </option>
    `;
  });

  SortBySelectorRenderingOptions.widgetParams.containerNode
    .find('select')
    .html(optionsHTML);
}

// connect `renderFn` to SortBySelector logic
var customSortBySelector = instantsearch.connectors.connectSortBySelector(renderFn);

// mount widget on the page
search.addWidget(
  customSortBySelector({
    containerNode: $('#custom-sort-by-selector-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.