Algolia Instantsearch: custom sort refinementlist

Question

In our project we have several refinement lists and they're functioning correctly. However they're default sorting, count the alphanumeric, is being applied. In our situation I have a 'rank' attribute on each of my refinement list items but I can't access it as the API is controlling what's coming back.

According to the documentation there only appears to be three choices for sorting.

Is there a way around that?

For example, this code yields the following results.

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#outsideDiameter',
    attributeName: 'outsideDiameter.description',
    operator: 'or',
    sortBy: ["name:asc"],
    limit: 5,
    showMore: true,
    templates: {
      header: getHeader('Outside Diameter'),
    },
  })
);

I want the list items to be sorted by the fractional values ascendingly. In other words: 3/16", 1/4", 5/16", ..., 4.5mm, 6.0mm, etc... Each values does have the 'rank' attribute that I mentioned before.

Is that possible?

score 1 · Answer 1 · answered Oct 06 '21 at 09:08

For more advanced sorting there are a couple options:

manual facet ordering using the renderingContent.facetOrdering parameter: https://www.algolia.com/doc/api-reference/api-parameters/renderingContent/

index.setSettings({
  renderingContent: {
    facetOrdering: {
      values: {
        size: {
          order: ['1/3"', '1/2"', '17m'],
          sortRemainingBy: 'hidden',
        },
      },
    },
  },
});

converting all units to metric (or some other unit that sorts correctly) and adding that as a prefix to your record:

{
  "size": "0015mm - 1/2\""
}

Once you do that, sorting alphabetically will have ascending order. For display you can remove the leading zeroes by using:

refinementList({
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.replace(/^0+/, ''),
    }));
  },
});

sorting using transformItems

In transformItems you can do whatever you want, for example converting the units first, then sorting by that new property:

refinementList({
  transformItems(items) {
    return items
      .map((item) => ({ ...item, mm: convertToMm(item.label) }))
      .sort((a, b) => b.mm - a.mm);
  },
});

Algolia Instantsearch: custom sort refinementlist

1 Answers1