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 ответ
Для более продвинутой сортировки есть несколько вариантов:
- ручное упорядочивание фасетов с помощью
renderingContent.facetOrdering
параметр: https://www.algolia.com/doc/api-reference/api-parameters/renderingContent/
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);
},
});