Algolia Instantsearch: настраиваемый список уточнений

В нашем проекте у нас есть несколько уточняющих списков, и они работают правильно. Однако сортировка по умолчанию, считая буквенно-цифровая, применяется. В нашей ситуации у меня есть атрибут 'rank' в каждом из моих элементов списка уточнений, но я не могу получить к нему доступ, поскольку API контролирует то, что возвращается.

Согласно документации, существует только три варианта сортировки.

Есть ли способ обойти это?

Например, этот код дает следующие результаты.

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

введите описание изображения здесь

Я хочу, чтобы элементы списка сортировались по дробным значениям по возрастанию. Другими словами: 3/16", 1/4", 5/16", ..., 4,5 мм, 6,0 мм и т. Д.... Каждое значение имеет атрибут" ранг ", который я упоминал ранее.

Это возможно?

1 ответ

Для более продвинутой сортировки есть несколько вариантов:

      index.setSettings({
  renderingContent: {
    facetOrdering: {
      values: {
        size: {
          order: ['1/3"', '1/2"', '17m'],
          sortRemainingBy: 'hidden',
        },
      },
    },
  },
});
  • преобразование всех единиц в метрическую систему (или другую, которая сортирует правильно) и добавление этого в качестве префикса к вашей записи:
      {
  "size": "0015mm - 1/2\""
}

Как только вы это сделаете, сортировка в алфавитном порядке будет иметь возрастающий порядок. Для отображения вы можете удалить ведущие нули, используя:

      refinementList({
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.replace(/^0+/, ''),
    }));
  },
});
  • сортировка с использованием transformItems

В transformItems вы можете делать все, что захотите, например сначала преобразовывать единицы, а затем сортировать по этому новому свойству:

      refinementList({
  transformItems(items) {
    return items
      .map((item) => ({ ...item, mm: convertToMm(item.label) }))
      .sort((a, b) => b.mm - a.mm);
  },
});
Другие вопросы по тегам