connectors connectNumericRefinementList

Edit this page

Description

NumericRefinementList connector provides the logic to build a custom widget that will give the user the ability to choose a range on to refine the search results.

It provides a refine(item) function to refine on the selected range.

Requirement: the attribute passed as attributeName must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API.

Usage

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

const makeNumericRefinementList= instantsearch.connectors.connectNumericRefinementList(
function renderFn(
renderOpts: NumericRefinementListRenderingOptions,
isFirstRendering: boolean) {
// render the custom NumericRefinementList widget
} );

const customNumericRefinementList = makeNumericRefinementList(instanceOpts: CustomNumericRefinementListWidgetOptions);
search.addWidget(customNumericRefinementList);

Connector options

NumericRefinementListRenderingOptions

  • createURL(item.value) => string

    Creates URLs for the next state, the string is the name of the selected option.

  • itemsArray<NumericRefinementListItem>

    The list of available choices.

  • hasNoResultsboolean

    true if the last search contains no result.

  • refine(item.value) => undefined

    Sets the selected value and trigger a new search.

  • widgetParamsObject

    All original CustomNumericRefinementListWidgetOptions forwarded to the renderFn.

NumericRefinementListItem

  • labelstring

    Name of the option.

  • valuestring

    URL encoded of the bounds object with the form {start, end}. This value can be used verbatim in the webpage and can be read by refine directly. If you want to inspect the value, you can do JSON.parse(window.decodeURI(value)) to get the object.

  • isRefinedboolean

    True if the value is selected.

CustomNumericRefinementListWidgetOptions

  • attributeNamestring

    Name of the attribute for filtering.

  • optionsArray<NumericRefinementListOption>

    List of all the options.

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

    Function to transform the items passed to the templates.

NumericRefinementListOption

  • namestring

    Name of the option.

  • startnumber

    Lower bound of the option (>=).

  • endnumber

    Higher bound of the option (<=).

Example

// custom `renderFn` to render the custom NumericRefinementList widget
function renderFn(NumericRefinementListRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    NumericRefinementListRenderingOptions.widgetParams.containerNode.html('<ul></ul>');
  }

  NumericRefinementListRenderingOptions.widgetParams.containerNode
    .find('li[data-refine-value]')
    .each(function() { $(this).off('click'); });

  var list = NumericRefinementListRenderingOptions.items.map(function(item) {
    return '<li data-refine-value="' + item.value + '">' +
      '<input type="radio"' + (item.isRefined ? ' checked' : '') + '/> ' +
      item.label + '</li>';
  });

  NumericRefinementListRenderingOptions.widgetParams.containerNode.find('ul').html(list);
  NumericRefinementListRenderingOptions.widgetParams.containerNode
    .find('li[data-refine-value]')
    .each(function() {
      $(this).on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        NumericRefinementListRenderingOptions.refine($(this).data('refine-value'));
      });
    });
}

// connect `renderFn` to NumericRefinementList logic
var customNumericRefinementList = instantsearch.connectors.connectNumericRefinementList(renderFn);

// mount widget on the page
search.addWidget(
  customNumericRefinementList({
    containerNode: $('#custom-numeric-refinement-container'),
    attributeName: 'price',
    options: [
      {name: 'All'},
      {end: 4, name: 'less than 4'},
      {start: 4, end: 4, name: '4'},
      {start: 5, end: 10, name: 'between 5 and 10'},
      {start: 10, name: 'more than 10'},
    ],
  })
);


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