Improving filter navigator experience

Dealing with events

The filter navigator is one of the most important components on the search page. This recipe will show you how to set the filter navigator component in a way that has been proven to improve the conversion of your store.

Here is a quick summary of the changes that will be made:

Add a search input to the filter options list
Change the filter navigation to use collapsible filters
Add more info about selected filters and product quantity
Update the search result at the moment that the filter is selected
Add a show more/less button to the filter options list
Add a "clear all" button to each filter options list

All props mentioned here are documented on documentation page. You will be able to check both the description and the possible values of each prop.

Step by step

Ensure that you have the vtex.search-result@3.x as a dependency of your manifest.json:


_10{
_10  "dependencies": [
_10      // other dependencies
_10+     "vtex.search-result": "3.x"
_10    }
_10  ]
_10}

Add the following props to the search-result-layout.desktop and the search-result-layout.mobile:


_12"search-result-layout.desktop": {
_12    "children": [
_12        // children
_12    ],
_12    "props": {
_12        // props
_12+       "preventRouteChange": true,
_12+       "thresholdForFacetSearch": 10,
_12+       "showProductsCount": true,
_12+       "showFacetQuantity": true
_12    }
_12}


_12"search-result-layout.mobile": {
_12    "children": [
_12        // children
_12    ],
_12    "props": {
_12        // props
_12+       "preventRouteChange": true,
_12+       "thresholdForFacetSearch": 10,
_12+       "showProductsCount": true,
_12+       "showFacetQuantity": true
_12    }
_12}

Declare the filter-navigator.v3 block with the following props:


_13+ "filter-navigator.v3": {
_13+     "blocks": ["sidebar-close-button"],
_13+     "props": {
_13+         "truncateFilters": true,
_13+         "showClearByFilter": true,
_13+         "fullWidthOnMobile": true,
_13+         "navigationTypeOnMobile": "collapsible",
_13+         "appliedFiltersOverview": "show",
_13+         "totalProductsOnMobile": "show",
_13+         "updateOnFilterSelectionOnMobile": true,
_13+         "priceRangeLayout": "inputAndSlider"
_13+     }
_13+ },

Your filter-navigator should look like this:

{"base64":" ","img":{"width":562,"height":1000,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1103153,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-improving-filter-navigator-experience-0.gif"}}