How to add custom custom product filter in vue-storefront

Question

I have a question: how to implement additional filter to the vue-storefront product items filters?

There are 4 filters (colors, Erin Recommends, price, size) in the default category sidebar and I want to add my custom filter, for example "brand", but I have no idea how to do this. There are nothing useful I could find in the internet, this is official documentation, but this is not enough.

Can someone provide the manual or some documentation?

Thanks.

Answer 1

1. Make sure you have new attribute in your product inside Elasticsearcj - e.g. brand.
2. Inside your config/local.json in products.defaultFilters add "brand".

Then after rerun app, you should see new filter on your category's view. Labels for this filter should be automatically fetched thanks to core/pages/Category.js -> asyncData and attribute/list action.