connectors connectHitsPerPage

Edit this page

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

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.

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