Try to get number of facet total in instantsearch js

Open Q&A
1

Hello,

Im using instantsearch js for implament algolia on my website.

i want show searchbar on my facet, only if total of result in the facet is more than 12 results

but i have limited my facet to 5 results,

show more and less button is displayed on this facet

How to get a total number of results of this facet Please ?

This is my code :

const renderRefinementList = (renderOptions, isFirstRender) => {
  const {
    items,
    isFromSearch,
    refine,
    createURL,
    isShowingMore,
    canToggleShowMore,
    searchForItems,
    toggleShowMore,
    widgetParams,
  } = renderOptions;

  if (isFirstRender) {

    const input = document.createElement('input');
    const ul = document.createElement('ul');
    const button = document.createElement('button');
    button.textContent = 'Show more';

    input.addEventListener('input', event => {
      searchForItems(event.currentTarget.value);
      
    });

    button.addEventListener('click', () => {
      toggleShowMore();
    });

    widgetParams.container.appendChild(input);
    widgetParams.container.appendChild(ul);
    widgetParams.container.appendChild(button);
  }
  
  const input = widgetParams.container.querySelector('input');


  if (!isFromSearch && input.value) {
    input.value = '';
  }

  widgetParams.container.querySelector('ul').innerHTML = items.map(item => 
    `
        <li>
          <a
            href="${createURL(item.value)}"
            data-value="${item.value}"
            style="font-weight: ${item.isRefined ? 'bold' : ''}"
          >
            ${item.label} (${item.count})
          </a>
        </li>
      `
    )
    .join('');

  [...widgetParams.container.querySelectorAll('a')].forEach(element => {
    element.addEventListener('click', event => {
      event.preventDefault();
      refine(event.currentTarget.dataset.value);
    });
  });

  const button = widgetParams.container.querySelector('button');

  button.disabled = !canToggleShowMore;
  button.textContent = isShowingMore ? 'Show less' : 'Show more';
};

const customRefinementList = instantsearch.connectors.connectRefinementList(
  renderRefinementList
);


search_result_page.addWidgets([

  
  dynamicWidgets({
    container: '#left-col',
    fallbackWidget: ({
      container,
      attribute
    }) => {
      return panel({
        templates: {
          header(options, {
            html
          }) {
            if (options.items.length != 0) {
              return html `<span>${options.widgetParams.attribute}</span>`;
            }
          },
        },
      })(customRefinementList)({
        container,
        limit: 5,
        searchable: true,
        helper: search_result_page.helper,
        showMore: true,
        attribute
      });
    },
    widgets: [
      container => customHierarchicalMenu({
        container: container,
        attributes: ['categories.lvl0', 'categories.lvl1'],
        title: 'Mon titre personnalisé',
      }),
    ],
  }),
]);
search_result_page.start();