6

Is it possible to open category filters in the left pane by default in Magento 2 Luma theme.

0

3 Answers 3

24

Just copy

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

into

app\design\frontend\<your_company>\<your_theme>\Magento_LayeredNavigation\templates\layer\

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"><?= /* @escapeNotVerified */ __('Shopping Options') ?></strong>
            <div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?= $collapsibleRange ?>", "multipleCollapsible": true}}'>
        <?php  $wrapOptions = true; endif; ?>
        <div data-role="collapsible" class="filter-options-item">
        <div data-role="title" class="filter-options-title"><?= /* @escapeNotVerified */ __($filter->getName()) ?></div>
        <div data-role="content" class="filter-options-content"><?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter); ?></div>
    </div>
    <?php endif; ?>
 <?php endforeach; ?>
6
  • Can this be done using custom module?
    – Gagan
    Commented Jun 14, 2018 at 13:12
  • can you update full code of view.phtml Commented Sep 28, 2018 at 14:44
  • <?php endforeach; ?> Only Need to add foreach close and working perfect ! Commented Dec 20, 2018 at 13:35
  • what need to add in code if we need to open it by default particularly for some filters only? Commented Jan 9, 2020 at 14:41
  • This opens the filters, however the close carret doesn't activate any more. The filters cannot close. Any solutions for this? Commented Jul 16, 2020 at 13:03
0

I did not test it but I think if you change line 12 to true it should work.

https://github.com/magento/magento2/blob/077584c99ebb8007cad176c3b9a0144a05c259cd/app/code/Magento/Ui/view/base/web/js/lib/collapsible.js#L12

I don't know what the proper way to override js files in Magento 2 is yet. So you should look that up to do it the Magento way.

2
  • I've changed a number of collapsible.js files to try and get this working but it doesn't work yet. It looks like the right direction to be looking though. Commented Feb 21, 2016 at 8:58
  • If you initialise the collapsible without passing the "opened" argument you're right. But if the argument is passed it will be overridden.
    – torhoehn
    Commented Dec 13, 2019 at 14:29
0

I acidentally found working code:

<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "0, 1, 2, 3, 4", "multipleCollapsible": false}}'> 

 

I don't know if this is proper solution, but all filters are open and collapsing working. Also mobile open filter button works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.