Algolia如何修改currentRefinements组件中toggleRefinement选项的显示标签

解决方案 #

你可以通过两种方式修改currentRefinements组件的展示内容：

1. 使用transformItems配置项修改文本内容
   该方案不需要调整原有DOM结构，仅替换展示文本即可，示例代码如下：

instantsearch.widgets.currentRefinements({
  container: '#current-refinements',
  transformItems(items) {
    return items.map(item => {
      // 匹配on_sale筛选属性
      if (item.attribute === 'on_sale') {
        return {
          ...item,
          // 替换属性名的展示文本
          label: '筛选条件',
          refinements: item.refinements.map(ref => ({
            ...ref,
            // 把布尔值替换为友好文本
            label: ref.value === 'true' ? '仅显示在售商品' : ref.label
          }))
        }
      }
      return item
    })
  }
})

2. 使用templates.item配置完全自定义渲染结构
   你之前误以为该组件没有template属性，实际上它支持templates.item配置来自定义单条筛选的渲染逻辑，适合需要调整DOM结构的场景：

instantsearch.widgets.currentRefinements({
  container: '#current-refinements',
  templates: {
    item(item, { html }) {
      // 单独处理on_sale属性的渲染
      if (item.attribute === 'on_sale' && item.refinements[0].value === 'true') {
        return html`<li class="ais-CurrentRefinements-item">
          <span class="ais-CurrentRefinements-label">仅显示在售商品</span>
          <button class="ais-CurrentRefinements-delete" onClick="${item.refinements[0].refine}">✕</button>
        </li>`
      }
      // 其他属性保留默认渲染逻辑
      return html`<li class="ais-CurrentRefinements-item">
        <span class="ais-CurrentRefinements-label">${item.label}:</span>
        ${item.refinements.map(refinement => html`
          <span class="ais-CurrentRefinements-category">
            <span class="ais-CurrentRefinements-categoryLabel">${refinement.label}</span>
            <button class="ais-CurrentRefinements-delete" onClick="${refinement.refine}">✕</button>
          </span>
        `)}
      </li>`
    }
  }
})

两种方案都可以实现将on_sale: true的展示替换为你需要的友好文本，按需选择即可。

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