Custom Algolia widgets

Great to hear.

I see that to access for example “connectRefinementList”, I nee dto use the following code in my js file.

const { connectRefinementList } = instantsearch.connectors;

Source: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN

Thank you.

Thank you, that’s very kind of you.

Algolia code examples are a great starting point. It works our of the box after adding it to the project. Then I just need to customize it for my needs. So it should not be a challenge. Example.

// 1. Create a render function
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 => <br>        <li><br>          <a<br>            href="${createURL(item.value)}"<br>            data-value="${item.value}"<br>            style="font-weight: ${item.isRefined ? 'bold' : ''}"<br>          ><br>            ${item.label} (${item.count})<br>          </a><br>        </li><br>
    )
    .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';
};

// 2. Create the custom widget
const customRefinementList = connectRefinementList(
  renderRefinementList
);

// 3. Instantiate
search.addWidgets([
  customRefinementList({
    container: document.querySelector('#refinement-list'),
    attribute: 'brand',
    showMoreLimit: 20,
  })
]);

Source: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN#full-example

• This reply was modified 1 year, 3 months ago by kmarcink2.