Open Category Filters by Default

Do you consider more user friendly to open all category filters by default in layered navigation so your customers can have a better and quicker overview of all the filter values at once? if yes, then here you are.

In our example we will use the files from Magento 2 Luma theme and in Magento 2.1.1 CE.

So the template files for the layered navigation are located under /vendor/magento/theme-frontend-luma/Magento_LayeredNavigation/templates/layer/ and the file we need to customize is the view.phtml.

Now copy the view.phtml under your theme directory /app/design/frontend/<Vendor>/<theme>/Magento_LayeredNavigation/templates/layer/.

The way that the filters are shown is builded with the Magento 2 accordion widget. Here you can read more about it. The accordion widget is initialized using the data-mage-init attribute in line 36. The accordion option active defines which tab is active when the widget gets instantiated. You can define the number of the tab you want to be open or a range of tabs.

Example for a specific tab:

data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "1", "multipleCollapsible": true}}'

Example for a specific range of tabs:

data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": [0,2], "multipleCollapsible": true}}'

To open by default all the tabs we need to add the range of tabs dynamically.

Add the following line before line 36

<?php $range = implode(' ', range(0, $filter->getItemsCount())); ?>

and modify now the line 37

<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?php echo $range; ?>", "multipleCollapsible": true}}'>

An example of the modified file can be found here.

So now the category filters in layered navigation look like the screen below.