How to customize the filter options in Alokai (Formerly Vue Storefront)?

Nowadays Alokai (Formerly Vue Storefront) is the most famous standalone PWA storefront for headless eCommerce solutions. This storefront is not only free and open-source but having backend-agnostic capability, it can be easily connected with any eCommerce platform i.e. Magento, Shopware, CommerceTools, Shopify, BigCommerce, etc.

In the current architecture of Alokai (Formerly Vue Storefront) V1.0, Elasticsearch plays a key role as middleware between the eCommerce platform and Storefront. Principally it fetches/filters/searches essential catalog data like products, categories, CMS pages, product attributes, etc.

While utilizing this storefront on their eCommerce store, sometimes business owners/consumers complain that not all filter option values are displayed under the layered (filter) navigation of category page even as they are pretty much sure about defined filter values are more than displayed one.

The key reason behind to occur such a problem is due to the Alokai (Formerly Vue Storefront) default configuration value wherein it applies a fixed value limit for rendering only a certain number of filter options values. For example on Alokai (Formerly Vue Storefront) demo web store (demo.vuestorefront.io), there are a maximum of ten values listed under each filter option (i.e. size and color) on each category page. Hence the default limit value is 10, you can see it in the following image:

File:  vue-storefront/config/default.json

"filterAggregationSize": {
  "default": 10,
  "size": 10,
  "color": 10
},

To make visible required number of filter option value, just need to increase this as per the requisite and re-build Alokai (Formerly Vue Storefront) instance to put on such changes with executing following commands:

> yarn build
> yarn start

How to set up additional custom filter attributes like “Brand” under layered navigation?

To showcase custom filter attribute “Brand” along with Alokai (Formerly Vue Storefront) default filter options like size, color, price, etc. under the layered navigation, following steps needs to be verified:

• Create a new product attribute with the exact name “brand” and assigned to the attribute set.
• Add “brand” as default filters in default.json or local.json file.

"products": {
  ...
  ...
  "endpoint": "/api/product",
  "defaultFilters": ["color", "size", "price", "brand"],
  "systemFilterNames": ["sort"],
  "maxFiltersQuerySize": 999,
  ...
  ...

How does aggregation work?

A multi-bucket value source based aggregation where buckets are dynamically built – one per unique value.

Example:

curl -XGET "http://localhost:9200/indices_name/_search?pretty=1"
{
    "aggs" : {
        "aggregation_name" : {
            "terms" : { 
                "field" : "your_field",
                "size": 10
            } 
        }
    }
}

• terms aggregation should be a field of type keyword or any other data type suitable for bucket aggregations. In order to use it with text you will need to enable fielddata.
• By default, the terms aggregation will return the buckets for the top ten terms ordered by the doc_count. One can change this default behaviour by setting the size parameter.
• The size parameter can be set to define how many term buckets should be returned out of the overall terms list.
• By default, the node coordinating the search process will request each shard to provide its own top size term buckets and once all shards respond, it will reduce the results to the final list that will then be returned to the client. This means that if the number of unique terms is greater than size, the returned list is slightly off and not accurate.

Hope you got a better understanding of ways to customize the filter option in VueStorefront. If you have queries feel free to ask that in the comment section, I would be more than happy to respond you back.

Thanks for reading see you on next post…????