magento 2 expand layered navigation

Question

In Magento 2.0, the default has the layered navigation all collapsed except for the first filter, which is Prices for me. How do I expand all the filters so that each filter option is visible in all filter categories?

I see in the code there's aria-expanded="false" and in the HTML somewhere there is class="filter-options-content" with style="display: none;"

Anyone know where to edit this?

Answer 1

If you are using the Luma theme and want to do this make sure to create your own theme as a child of the Luma theme. You can find more information on that here ( https://community.magento.com/t5/Theming-Layout-Design-Questions/How-to-create-a-Child-Theme-in-Magento-2/mp/33314#M384 )

Then, copy the file located at "vendor\\magento\\theme-frontend-luma\\Magento_LayeredNavigation\\templates\\layer\\view.phtml" into the appropriate area in your child theme.

You need to change the data-mage-init attribute and the "active" property to be in a format that specifies which filters to open by their index. I have 6 filters, so I want that property to read "0 1 2 3 4 5".

I made a couple of changes between lines 30-45 and it looks like this:

<?php $wrapOptions = false; ?>
<?php 
$filters = $block->getFilters();
$active_filters_str = implode(' ', range(0, count($filters)-1)); 
?>
<?php foreach ($filters as $filter): ?>
    <?php if ($filter->getItemsCount()): ?>
        <?php if (!$wrapOptions): ?>
            <div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?php echo $active_filters_str ?>", "multipleCollapsible": true}}'>
        <?php  $wrapOptions = true; endif; ?>
        <div data-role="collapsible" class="filter-options-item">
            <div data-role="title" class="filter-options-title"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
            <div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
        </div>
    <?php endif; ?>
<?php endforeach; ?>

First, make sure to get all of the filters in a variable with "$filters = $block->getFilters();". Then, create a string for the active property listing them out by index using the "$active_filters_str = implode(' ', range(0, count($filters)-1));" Then echo this next to the active property in the mage-init attribute.

Hope this helps :)

Answer 2

https://magento.stackexchange.com/questions/102259/open-category-filters-by-default-in-magento-2

OPEN FILE :##

vendor\\magento\\theme-frontend-luma\\Magento_LayeredNavigation\\templates\\layer\\view.phtml

And change the 'data-mage-init' attribute as follow:

<?php foreach ($block->getFilters() as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<?php if (!$wrapOptions): ?>
    <?php $collapsibleRange = implode(' ', range(0, $filter->getItemsCount())); ?>
    <strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?php /* @escapeNotVerified */ echo __('Shopping Options') ?></strong>
    <div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?php echo $collapsibleRange ?>", "multipleCollapsible": true}}'>
<?php  $wrapOptions = true; endif; ?>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
<div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
</div>
<?php endif; ?>