connectors connectPriceRanges

Edit this page

Description

PriceRanges connector provides the logic to build a custom widget that will let the user refine results based on price ranges.

Usage

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

const makePriceRanges= instantsearch.connectors.connectPriceRanges(
function renderFn(
renderOpts: PriceRangesRenderingOptions,
isFirstRendering: boolean) {
// render the custom PriceRanges widget
} );

const customPriceRanges = makePriceRanges(instanceOpts: CustomPriceRangesWidgetOptions);
search.addWidget(customPriceRanges);

Connector options

PriceRangesRenderingOptions

  • itemsArray<PriceRangesItem>

    The prices ranges to display.

  • refine(PriceRangesItem) => undefined

    Selects or unselects a price range and trigger a search.

  • widgetParamsObject

    All original CustomPriceRangesWidgetOptions forwarded to the renderFn.

PriceRangesItem

  • from[number]

    Lower bound of the price range.

  • to[number]

    Higher bound of the price range.

  • urlstring

    The URL for a single item in the price range.

CustomPriceRangesWidgetOptions

  • attributeNamestring

    Name of the attribute for faceting.

Example

function getLabel(item) {
  var from = item.from;
  var to = item.to;

  if (to === undefined) return '≥ $' + from;
  if (from === undefined) return '≤ $' + to;
  return '$' + from + ' - $' + to;
}

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

  PriceRangesRenderingOptions.widgetParams.containerNode
    .find('ul > li')
    .each(function() { $(this).off('click'); });

  var list = PriceRangesRenderingOptions.items.map(function(item) {
    return '<li><a href="' + item.url + '">' + getLabel(item) + '</a></li>';
  });

  PriceRangesRenderingOptions.widgetParams.containerNode
    .find('ul')
    .html(list);

  PriceRangesRenderingOptions.widgetParams.containerNode
    .find('li')
    .each(function(index) {
      $(this).on('click', function(event) {
        event.stopPropagation();
        event.preventDefault();

        PriceRangesRenderingOptions.refine(
          PriceRangesRenderingOptions.items[index]
        );
      });
    });
}

// connect `renderFn` to PriceRanges logic
var customPriceRanges = instantsearch.connectors.connectPriceRanges(renderFn);

// mount widget on the page
search.addWidget(
  customPriceRanges({
    containerNode: $('#custom-price-ranges-container'),
    attributeName: 'price',
  })
);


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