Question: Change hitsPerPage when filtering ?

Hello,

It is possible to update hitsPerPage defined in Configure widget when filtering on a “Menu” widget like the demo : https://www.algolia.com/search/

My code :

index.js

import algoliasearch from 'algoliasearch/lite'
import instantsearch from 'instantsearch.js'
import searchBox from './Searchbox'
import menu from './Menu'
import { advert, bpDoc, demarche, post, tribeEvents, uptUsers } from './Indices'

const searchClient = algoliasearch('XXXXXX', 'XXXXXX')

const search = instantsearch({
  indexName: 'wp_searchable_posts',
  searchClient,
})

search.addWidgets([
  searchBox,
  menu,
  advert,
  post,
])

search.start()

Menu/index.js

import { menu } from 'instantsearch.js/es/widgets'

export default menu({
  container: '#algolia-menu',
  attribute: 'post_type',
  sortBy: ['name:asc'],
  templates: {
    item(item) {
      const { url, label } = item

      switch (label) {
        case 'advert':
          return `
            <a href="${url}">
              <span>Petites annonces</span>
            </a>
          `
        case 'post':
          return `
            <a href="${url}">
              <span>Actualités</span>
            </a>
          `
        default:
          return `
            <a href="${url}">
              <span>${label}</span>
            </a>
          `
      }
    },
  },
})

Indices/index.js

import { configure, hits, index } from 'instantsearch.js/es/widgets'
import { hitsTemplate } from './templates'
import { customConfigure, customPagination } from './../customWidget'

// Custom Post Type : advert
export const advert = index({
  indexName: 'wp_posts_advert',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-advert',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
        empty: `<style>#advert { display: none; }</style>`
      }
    }),

    configure({
      hitsPerPage: 4,
    }),
  ])

// Custom Post Type : post
export const post = index({
  indexName: 'wp_posts_post',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-post',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
        empty: `<style>#post { display: none; }</style>`
      }
    }),

    configure({
      hitsPerPage: 3,
    }),
  ])

Thanks for help.

[Haroenv]

It is possible to update hitsPerPage defined in Configure

Two other options:

1. use connectConfigure instead of configure and call its refine function when it needs to change
2. remove the old configure widget, and add a new one with the new hitsPerPage

[firestar300]

I found a way but it’s very dirty 😄 In my renderConfigure function I check if hierarchicalFacetsRefinements is not empty and the value of the attribute of the container defined in the customConfigure options, then I refine my hitsPerPage.

Indices/index.js

import { hits, index } from 'instantsearch.js/es/widgets'
import { hitsTemplate } from './templates'
import { customConfigure, customPagination } from './../customWidget'

// Custom Post Type : advert
export const advert = index({
  indexName: 'wp_posts_advert',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-advert',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-advert',
      hitsPerPage: 4,
      multiplicator: 3,
      searchParameters: {
        hitsPerPage: 4,
      },
    }),
  ])

// Custom Post Type : bp_doc
export const bpDoc = index({
  indexName: 'wp_posts_bp_doc',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-bp-doc',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-bp-doc',
      hitsPerPage: 5,
      multiplicator: 4,
      searchParameters: {
        hitsPerPage: 5,
      },
    }),
  ])

// Custom Post Type : demarche
export const demarche = index({
  indexName: 'wp_posts_demarche',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-demarche',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-demarche',
      hitsPerPage: 6,
      multiplicator: 2,
      searchParameters: {
        hitsPerPage: 6,
      },
    }),
  ])

// Custom Post Type : post
export const post = index({
  indexName: 'wp_posts_post',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-post',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-post',
      hitsPerPage: 3,
      multiplicator: 4,
      searchParameters: {
        hitsPerPage: 3,
      },
    }),
  ])

// Custom Post Type : tribe_events
export const tribeEvents = index({
  indexName: 'wp_posts_tribe_events',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-tribe-events',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-tribe-events',
      hitsPerPage: 4,
      multiplicator: 3,
      searchParameters: {
        hitsPerPage: 4,
      },
    }),
  ])

// Custom Post Type : upt_user
export const uptUsers = index({
  indexName: 'wp_posts_upt_user',
})
  .addWidgets([
    hits({
      container: '#algolia-hits-upt-user',
      templates: {
        item(hit) {
          return hitsTemplate(hit)
        },
      }
    }),

    customConfigure({
      container: '#algolia-configure-upt-user',
      hitsPerPage: 6,
      multiplicator: 2,
      searchParameters: {
        hitsPerPage: 6,
      },
    }),
  ])

customWidget/index.js

import { connectConfigure } from 'instantsearch.js/es/connectors'
/**
 * Custom configure
 * @param {Object} renderOptions object that contains informations for the configure
 */
const renderConfigure = renderOptions => {
  const { refine, widgetParams } = renderOptions
  const container = document.querySelector(widgetParams.container)

  if (renderOptions.instantSearchInstance.helper) {
    const hierarchicalFacetsRefinements = renderOptions.instantSearchInstance.helper.state.hierarchicalFacetsRefinements['post_type']

    if (hierarchicalFacetsRefinements.length > 0 && container.getAttribute('data-filter') === 'false') {
      container.setAttribute('data-filter', 'true')
      refine({ hitsPerPage: widgetParams.hitsPerPage * widgetParams.multiplicator })
    } else if (hierarchicalFacetsRefinements.length === 0 && container.getAttribute('data-filter') === 'true') {
      container.setAttribute('data-filter', 'false')
      refine({ hitsPerPage: widgetParams.hitsPerPage })
    }
  }
}

export const customConfigure = connectConfigure(renderConfigure)

---

If you have a sexier way to do this, feel free to share it 😄 Anyway thanks for help.