How To

How to Expand default Layered Navigation Category Filters in Magento 2

Ecommerce is a fully competitive market and all the shoppers are in the hurry and if they don’t find the product they want, they will simply leave your store and you lose sales. That’s why for success in any online business, a user-friendly store design is a key part that provides enhanced user experience that converts your customer into returning customers. The effective, simple and clean user interface design will let your store customer easily navigate between store products and to complete the checkout process instantly!

Layered Navigation inside Magento 2 store makes it easy to find products based on category, price range, or any other available attribute from the store frontend. You can configure the display of layered navigation according to your business need from the backend. To make it easier for the customer, we can convert split filters to default expanded category filters so your customers can have a better and quicker overview of all the filter values at once? If you want to do the same, then let’s get started.

First, you need to copy the whole “view.phtml” file from the below location.
vendor\magento\theme-frontend-luma\Magento_LayeredNavigation\templates\layer\view.phtml
And paste that file inside your theme folder at this path.
app\design\frontend\Themes\Yourtheme\Magento_LayeredNavigation\templates\layer\view.phtml

Now, Search for the below code, you will find that code around line no-32.

<pre class="lang:default decode:true">
<?php foreach ($block->getFilters() as $filter): ?>
                <?php if ($filter->getItemsCount()): ?>
                    <?php if (!$wrapOptions): ?>
                        <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": false, "multipleCollapsible": false}}'>
                    <?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; ?>
</pre>

And replace that piece code with below-given code.

<pre class="lang:default decode:true">

<?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; ?>
</pre>

You can use this code according to your need of expanding layered category filters inside on your Magento 2 store.

Lastly, smash that stars if the code worked for you and don’t forget to comment down below if you are looking for any help regarding this code.
Happy Coding.

Click to rate this post!
[Total: 26 Average: 4]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Recent Posts

How to Get Database Value in Shopify Theme App Extension using App Proxy?

In this article, we will learn about how to get database value in the Shopify…

21 hours ago

Mastering Tailwind CSS in Laravel: A Comprehensive Guide

Tailwind CSS has emerged as a powerful utility-first CSS framework, offering developers a unique approach…

3 days ago

React Native or Flutter in 2024

The mobile app development field has witnessed a rapid revolution over the past few years.…

5 days ago

Magento 2: How To Call JS on the Checkout Page?

Hello Magento mates, Today we will learn to add a call JS on the checkout…

1 week ago

Boost Your SEM Game: Unveiling the Top 10 Tools for Marketers in 2024

Business survival in today’s digital world has become extremely difficult. Using traditional marketing techniques is…

1 week ago

Five Essential Payroll Compliance Tips for eCommerce Startups

Are you setting up a payroll system for your eCommerce startup? Ensuring compliance with myriad…

1 week ago