Algolia 如何修改 toggleRefinement 在 currentRefinements 组件的显示标签

问题根因 #

toggleRefinement组件的on参数需与索引中对应字段的实际值保持类型一致：你的new字段是布尔类型，你之前写的on: 'New products'是字符串类型，无法和索引值匹配，所以取消注释后组件运行异常。 #

方案1：正确配置toggleRefinement参数（推荐） #

将on参数设为和字段值匹配的布尔值，组件会自动关联你配置的显示文本，同步到currentRefinements组件中：

instantsearch.widgets.toggleRefinement({
    container: '#facet-new',
    attribute: 'new',
    on: true, // 匹配索引中new字段为true的记录
    templates: {
        labelText: '新品',
    },
}),

配置完成后currentRefinements组件对应筛选项的标签会自动显示为新品，不再显示true。 #

方案2：自定义currentRefinements转换规则 #

如果方案1不满足你的个性化需求，可以直接修改currentRefinements组件的配置，通过transformItems回调手动替换筛选项标签：

instantsearch.widgets.currentRefinements({
  container: '#current-refinements', // 对应你当前组件的挂载容器
  transformItems(items) {
    return items.map(item => {
      // 匹配属性为new的筛选项
      if (item.attribute === 'new') {
        return {
          ...item,
          refinements: item.refinements.map(ref => {
            // 把值为true的标签替换为自定义文本
            if (ref.value === true) {
              return {
                ...ref,
                label: '新品'
              }
            }
            return ref
          })
        }
      }
      return item
    })
  },
})

内容的提问来源于stack exchange，提问作者Cray