connectors connectNumericMenu

Description

NumericMenu 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 attribute 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

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

const makeNumericMenu= instantsearch.connectors.connectNumericMenu(
  function renderFn(
      renderOpts: NumericMenuRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom NumericMenu widget
  }
);

const  customNumericMenu = makeNumericMenu(instanceOpts: CustomNumericMenuWidgetOptions);
search.addWidget(customNumericMenu);

Connector options

NumericMenuRenderingOptions

• createURL(item.value) => string

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

• itemsArray<NumericMenuItem>

  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 CustomNumericMenuWidgetOptions forwarded to the renderFn.

NumericMenuItem

• 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.

CustomNumericMenuWidgetOptions

• attributestring

  Name of the attribute for filtering.

• itemsArray<NumericMenuOption>

  List of all the items.

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

  Function to transform the items passed to the templates.

NumericMenuOption

• namestring

  Name of the option.

• startnumber

  Lower bound of the option (>=).

• endnumber

  Higher bound of the option (<=).

Example

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

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

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

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

// connect `renderFn` to NumericMenu logic
var customNumericMenu = instantsearch.connectors.connectNumericMenu(renderFn);

// mount widget on the page
search.addWidget(
  customNumericMenu({
    containerNode: $('#custom-numeric-menu-container'),
    attribute: 'price',
    items: [
      {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.