connectors connectHitsPerPage

Description

HitsPerPage connector provides the logic to create custom widget that will allow a user to choose to display more or less results from Algolia.

This connector provides a refine() function to change the hits per page configuration and trigger a new search.

Usage

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

const makeHitsPerPage= instantsearch.connectors.connectHitsPerPage(
  function renderFn(
      renderOpts: HitsPerPageRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom HitsPerPage widget
  }
);

const  customHitsPerPage = makeHitsPerPage(instanceOpts: HitsPerPageWidgetOptions);
search.addWidget(customHitsPerPage);

Connector options

HitsPerPageRenderingOptions

• itemsArray<HitsPerPageRenderingOptionsItem>

  Array of objects defining the different values and labels.

• createURL(item.value) => undefined

  Creates the URL for a single item name in the list.

• refine(number) => undefined

  Sets the number of hits per page and trigger a search.

• hasNoResultsboolean

  true if the last search contains no result.

• widgetParamsObject

  Original HitsPerPageWidgetOptions forwarded to renderFn.

HitsPerPageRenderingOptionsItem

• valuenumber

  Number of hits to display per page.

• labelstring

  Label to display in the option.

• isRefinedboolean

  Indicates if it’s the current refined value.

HitsPerPageWidgetOptions

• itemsArray<HitsPerPageWidgetOptionsItem>

  Array of objects defining the different values and labels.

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

  Function to transform the items passed to the templates.

HitsPerPageWidgetOptionsItem

• valuenumber

  Number of hits to display per page.

• labelstring

  Label to display in the option.

• defaultboolean

  The default hits per page on first search.

Example

// custom `renderFn` to render the custom HitsPerPage widget
function renderFn(HitsPerPageRenderingOptions, isFirstRendering) {
  var containerNode = HitsPerPageRenderingOptions.widgetParams.containerNode
  var items = HitsPerPageRenderingOptions.items
  var refine = HitsPerPageRenderingOptions.refine

  if (isFirstRendering) {
    var markup = '<select></select>';
    containerNode.append(markup);
  }

  const itemsHTML = items.map(({value, label, isRefined}) => `
    <option
      value="${value}"
      ${isRefined ? 'selected' : ''}
    >
      ${label}
    </option>
  `);

  containerNode
    .find('select')
    .html(itemsHTML);

  containerNode
    .find('select')
    .off('change')
    .on('change', e => { refine(e.target.value); });
}

// connect `renderFn` to HitsPerPage logic
var customHitsPerPage = instantsearch.connectors.connectHitsPerPage(renderFn);

// mount widget on the page
search.addWidget(
  customHitsPerPage({
    containerNode: $('#custom-hits-per-page-container'),
    items: [
      {value: 6, label: '6 per page', default: true},
      {value: 12, label: '12 per page'},
      {value: 24, label: '24 per page'},
    ],
  })
);

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