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

Question

I am trying to figure out from couple of days how to display label for filters on category page. As mentioned in document I have added attribute inside config.products.defaultFilters[] and the filter have started showing there.

I have color and brand filters. For color filters I have mapped color id to color name in config.products.colorMappings so it is displaying correctly there. But for brand I can do the same but it is a static solution so every time admin adds new brand I will need to add its mapping and build the storefront again.

I have tried to check their forum but nothing useful. I checked Vue Storefront vuex catalog and category-next stores for hint but cannot find anything related there.

The label for option under brand_filter should be readable but it is showing that brand attribute option's id

Answer 1

Ok, after spending couple of days finding solution to this problem, I finally got a hint from this answer.

I am using theme vsf-capybara, and according to its guide, to setup I generated a local.json from generate-local-config.js and I merged configuration manually from that local.json to config/local.json file. Prior to this there was no filter named brand or color added already to the main config file.

The config property responsible for the filter labels to be incorrect was entities.attribute.loadByAttributeMetadata and it was set to true I changed it to false because core/module/catalog/CatalogModule has one action attribute/list needs to be dispatched for application use. So if entities.attribute.loadByAttributeMetadata in config/local.json is set to true, this action will not be dispatched. Here is the excerpt from 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])
    })
}

Answer 2

For me, the ticked answer is not working. But the solution was to change the value entities.attribute.loadByAttributeMetadata to true in the file config/local.json, not of the vue-storefront, but of the vue-storefront-api project.