Layered Navigation for Magento 2

Layered Navigation

Introduction

The extension allows selecting multiple product attributes at once with no page reloads, search the store catalog and get the products in the shortest time.

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Global Configuration Settings

To access the configuration settings for this extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Layered Navigation .

General

In the General section :

set Enable AJAX Loading -  to show all the matching results instantly after filtering

set Enable Auto "Scroll To Top" After AJAX Loaded -  to enable the scroll-to-top automatically after AJAX loaded

choose the Navigation Type -  :

  • If Vertical (Appear At Sidebar) is selected, the filters will show verticaly at the sidebar of the page. Set Enable "Sidebar Sticky" to "Yes" to makes the sidebar sticky during vertical scroll of the page, or "No" to disable this functionality;
  • If Horizontal (Appear At Content Top) is selected, the filters will show horizontally at the top content of the page;

Filters

In this section contains 3 sub-sections, in the "Settings" sub-section, you can check a complete step-by-step guide to show filter, hide filter and define filter position on layered navigation

In the "Display" sub-section:

set Expand Filters by Default to "Yes" to display filters expanded by default, and Select Filters To Expand by Default. Multiple select allowed

set Expand Filter(s) With Selected Option(s) to "Yes" to display the selected/active options expanded, or "No" they display collapsed

If Enable "Show" and Show All Filters" Button is set to "Yes", the "Show" button will popover on each filter option selection and the "Show All Filters" button will display below the layered navigation block, allowing user to show all selected filters. Note: the "Show All Filters" button will display on Navigation Type: Vertical Only (General -> Navigation Type -> "Vertical").

select the Price Slider Type, up to 6 price slider type supported: Flat, Big, Modern, Sharp, Round and Square

Slider Type: Big

Slider Type: Flat

Slider Type: Modern

Slider Type: Round

Slider Type: Sharp

Slider Type: Square

In the "Options" sub-section:

set Show "Qty" Number On Each Filter Option to "Yes', to show the quatity number of each filter

set Enable "Search" Filters Options Box to "Yes', to show the search filter box on each option. Specify the Maximun Number Of Filters To Show The "Search" Box. If the number of filters options/values exceeds the limit, the "Search" box will show in the filter.

set Enable "Show More" Filters Options Button to "Yes', to display "show more" on each filter. Specify the Maximun Number Of Filters Options/Values To Display The "Show More" button. If the number of filters options/values exceeds the limit, the "Show More" button will show in the filter.

Frontend View

Category Page

Example of AJAX Loading

Example of Navigation Type: Vertical

Example of Sticky Sidebar on vertical scroll of the page

Example of Navigation Type: Horizontal

Example of Navigation Type: Horizontal, with selected filters

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page