Vue Storefront：显示自定义属性过滤器的标签而不是选项 id

Question

这几天我一直在努力弄清楚如何在类别页面上显示过滤器标签。如文档中所述，我在 config.products.defaultFilters[] 中添加了属性，过滤器已开始在那里显示。

我有 color 和 brand 过滤器。对于滤色器，我已将颜色 ID 映射到 config.products.colorMappings 中的颜色名称，因此它在那里可以正确显示。但是对于品牌，我可以做同样的事情，但它是一个静态解决方案，所以每次管理员添加新品牌时，我都需要添加它的映射并重新构建店面。

我试过查看他们的论坛，但没有任何用处。我检查了 Vue Storefront vuex catalog 和 category-next 商店的提示，但在那里找不到任何相关的东西。

brand_filter 下选项的标签应该是可读的，但它显示了品牌属性选项的 id

Answer 1

好的，在花了几天时间寻找这个问题的解决方案后，我终于从这个 answer 中得到了提示。

我正在使用主题 vsf-capybara，根据它的指南，我从 generate-local-config.js 生成了一个 local.json 并手动将配置从 local.json 合并到config/local.json 文件。在此之前，主配置文件中没有添加名为品牌或颜色的过滤器。

导致过滤器标签不正确的配置属性是 entities.attribute.loadByAttributeMetadata 并且设置为 true 我将其更改为 false 因为 core/module/catalog/CatalogModule 有一个动作attribute/list 需要调度以供应用程序使用。因此，如果 config/local.json 中的 entities.attribute.loadByAttributeMetadata 设置为 true，则不会调度此操作。以下是 CatalogModule 的摘录：

if (!config.entities.attribute.loadByAttributeMetadata) {
    await store.dispatch('attribute/list', { // loading attributes for application use
      filterValues: uniq([...config.products.defaultFilters, ...config.entities.productListWithChildren.includeFields])
    })
}

Vue Storefront：显示自定义属性过滤器的标签而不是选项 id

Vue Storefront: Display labels for custom attribute filter instead of option id

vue.js

magento2

vuex

vue-storefront