• Installing M2 Layered Navigation
• Installing Hyvä Theme Compatibility Module
• Uninstalling Layered Navigation
• Extension Compatibility
• Introducing to Layered Navigation
  • Extension Overview
    • Key Features
• Using Magento 2 Layered Navigation
  • Extension Configuration 
  • Storefront Functionality

To enhance the native Magento catalog navigation Magento 2 Layered Navigation releases filter multiselects, image support for attributes, improved horizontal filter bar, interactive popover, filter clearance, and other UI and UX features. With filter management amplified, store admins can set filter modes, position, logic of sorting, assigned product categories, and other parameters for faster and more intuitive routing around the catalog.

Installing M2 Layered Navigation

Command Line Installation

1. Backup your web directory and store database
2. Download the Layered Navigation installation package
3. Upload contents of the Layerde Navigation installation package to your store root directory
4. In SSH console of your server navigate to your store root folder:

cd path_to_the_store_root_folder

run the following command:

php bin/magento module:enable  Aheadworks_Layerednav

then:

php bin/magento setup:upgrade

after:

php bin/magento setup:static-content:deploy -f

     5. Flush store cache; log out from the backend and log in again

Composer Installation

If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store:

     1. Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

Run the following command:

composer config repositories.aheadworks composer https://dist.aheadworks.com/

After the command was executed successfully, you can use the composer to install the products.

To install the extension:

     2. Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

     3. Run the following command to install the latest version of the extension:

composer require aheadworks/module-layered-navigation

if you need to install a specific version, run this command:

composer require aheadworks/module-layered-navigation:<version>

When prompted, enter Public Key (Username) and Private Key (Password):

Both Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site:

 4. Enable the extension:

php -f bin/magento module:enable <Module_Name>

Next, register the extension:

bin/magento setup:upgrade

Recompile your Magento store if you are in the Production mode:

bin/magento setup:di:compile

To verify that the extension is enabled, run this command:

bin/magento module:status

Clean store cache, by running the following command:

bin/magento cache:clean

Log out and Log in the backend again.

composer require smile/elasticsuite

bin/magento module:enable Smile_ElasticsuiteCore Smile_ElasticsuiteCatalog Smile_ElasticsuiteSwatches Smile_ElasticsuiteCatalogRule Smile_ElasticsuiteVirtualCategory Smile_ElasticsuiteThesaurus Smile_ElasticsuiteCatalogOptimizer Smile_ElasticsuiteTracker

bin/magento setup:upgrade

To upgrade the extension:

     5. To update or upgrade an extension:

Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root.

If a composer package exists for the extension, run one of the following.

composer update aheadworks/module-layered-navigation

Updater per version:

composer require aheadworks/module-layered-navigation:<version>

Run the following commands to upgrade, deploy, and clean the cache.

php bin/magento setup:upgrade --keep-generated 
php bin/magento setup:static-content:deploy 
php bin/magento cache:clean

Installing Hyvä Theme Compatibility Module

Starting from Layered Navigation  version 2.8.4 and its Hyvä Compatibility Module version 1.1.0, the Hyvä Compatibility Module is available only via the Aheadworks Composer repository.

Older versions of the Hyvä Compatibility Module can still be accessed via GitLab.

Installing Hyvä-compatibility module 1.1.0 and newer 

To install Hyvä Compatibility Module 1.1.0 or newer via Aheadworks Composer, run the following command:

composer require aheadworks/module-layered-navigation-hyva 

Installing older versions of Hyvä-compatibility module

To install an older version of the Hyvä Compatibility Module, use the following command:

composer require hyva-themes/magento2-aheadworks-layerednav

Hyvä-compatibility Modules with CSP Compliance 

Starting from Hyvä Compatibility Module version 1.1.0, all Hyvä compatibility modules are CSP compliant. Older versions remain non-CSP compliant.

Note: The CSP-compliant modules may not be compatible with older versions of Hyvä Theme (1.3.9 and older). Before updating, please verify which version of the Hyvä Theme your store is using.

Uninstalling Layered Navigation

Manual Removal

1. Disable the module by executing the following commands:

php bin/magento module:disable Aheadworks_Layerednav
php bin/magento setup:upgrade

2. Remove the extension files from the following folder:

app/code/Aheadworks/Layerednav

Automatic Removal (via Composer)

1. Disable the module by executing the following commands:

php bin/magento module:uninstall Aheadworks_Layerednav

Extension compatibility

The PHP version depends on your current Magento version. Please, refer to your Magento version release notes.

Introducing to Layered Navigation

Extension Overview

The Layered Navigation extension enhances native Magento catalog navigation by introducing filter multiselects, image support for attributes, an improved horizontal filter bar, and interactive popovers. Its primary logic is to improve routing intuitiveness, reduce page reloading stress, and speed up navigation, leading to higher customer satisfaction and improved retention

Key Features

• Enhanced Magento 2 navigation panel with additional and improved filters;

• AJAX page reloads to refresh only the product results instead of an entire page;

• Filter single- and multi-select modes;

• Image support for filter attributes and swatches editing option;

• Integration with the Advanced Search extension by Aheadworks, makes filtering products on search result pages possible (in addition to the catalog ones);

• Integration with the Shop by Brand extension by Aheadworks adds a brand filter to the navigation panel.

Using Magento 2 Layered Navigation

Extension Configuration 

To configure the extension proceed to Stores > Settings > Configuration > AHEADWORKS EXTENSIONS > Layered Navigation.

The configuration page comes in three sections: General Settings, SEO and Sliders.

General Settings 

The General Settings block lists the following parameters for configuration: 

• Enable AJAX - defines how the extension handles the category page when the filter is applied:

• If set to 'Yes', the extension will only reload the product block;

•  If set to 'No', the extension will reload the whole category page;

• Display "New" Filter - defines if the 'New' filter should be available for customers;

• Display "On Sale" Filter - defines if the 'On Sale' filter should be available for customers;

• Display "In Stock" Filter - defines if the 'In Stock' filter should be available for customers;

• Disable "Show X Items" pop-over - defines if the popover with item count matching the currently selected attributes should be displayed;

• Filter Bundle products on their own attribute values -  Set 'Yes' to filter Bundle products only on their own attribute values, not on the attribute values of the simple products linked to the bundle product. Scope must be Store View.

• Display "User Ratings" Filter - select 'Yes' to display ratings filter;

• Filter mode - defines the mode of the filters: "Single-" or "Multi-select" (Applies to the attributes of Dropdown and Multiple Select types. Can be overridden on a filter level); 

• Default filter state - determines the default state of all filters (expanded or collapsed);

• Filter values display limit - determines the number of filter values to be shown above the 'Show X more' link (if applied);

• Hide filters with no available values - defines if filters that do not have values for the currently generated product list should be hidden in the navigation menu;

• Hide attribute values if they are not available - shows or hides the attribute values within one filter void for the current product selection.

• Push out-of-stock products to bottom of category - put the products which are not sellable at the moment to a category bottom.

• Filter max height limit for scrollbar (in px) - defines max height limit for scrollbar;

• Hide filters with no available values - defines if filters that do not have values for the currently generated product list should be hidden in the navigation menu;

• Hide attribute values if they are not available - shows or hides the attribute values within one filter void for the current product selection;

• Push out-of-stock products to bottom of category - put the products which are not sellable at the moment to a category bottom;

• Display chosen filter options at the top of the sidebar - show the chosen filter options at the top of the sidebar.

SEO Settings

The 'SEO' optimization settings are aimed at improving store presence in search engines and to avoid destructive SEO issues. The available parameters are:

• SEO-friendly URL - defines how the applied filters affect the end-page URL;

• Add set of URLs which contain the following attributes to sitemap.xml – select specific attributes to include their filtered result pages in your XML sitemap.

• Disable search engine indexing on catalog search pages - defines if the search engine indexation should be disabled on catalog search pages;

• Use 301 Redirect for old URLs - if the catalog pages with filters have been indexed and then moved, this setting will create the 301 redirect to the old-page URL. The old-page URL is based on the 'SEO-friendly URL' setting value

• Page Meta Title Template - defines what information should be added to the catalog page's Meta Title after the attributes are selected in Layered Navigation;

• Page Meta Description Template - defines what information should be added to the catalog page's Meta Description after the attributes are selected in Layered Navigation;

• Rewrite meta robots tag - when enabled, the parameter adds the 'NOINDEX' and 'NOFOLLOW' meta tags to the category pages if:

• iit is the second or the following page (pagination);

• products are filtered by position, name, or price;

• selected several options of the same filter;

• product listing is different from default values - when the product listing value becomes a part of the URL.

• Add canonical URLs - defines if the canonical URL's are added to the catalog search pages.

Sliders

Should you opt for use of slider filters, make sure there are a few parameters to configure for best user experience. The block suggest the following parameters for configuration:

• Use slider - defines if the slider mode is to be available for layered navigation (the options below will unfold on choice of Yes herein);

• Use from-to inputs - defines if the Customer will be able to specify the range of values for filters which are in the slider mode.

 Additional Sorting Options

• Sort by Bestsellers - select 'Yes' to sort products by bestsellers;

• Based on last X days - enter the bestsellers period (to sort products of one month, you can specify 30 days);

• Sort by Top Rated - select 'Yes' to sort products by top rated;

• Sort by Date - select 'Yes' to sort products by date;

• Global Sorting Direction - choose either ASC or DESC as default sorting of your store. You can get sorting data for one month of sales and then the products will be sorted in ascending/descending sales for the period you specified.

Manage Filters Grid

To configure the filters open the 'Manage Filters' grid. The grid can be found in Catalog > Layered Navigation by Aheadworks > Manage Filters.

The 'Manage Filters' grid contains six columns, including filter names, codes, types, their general status, status in search, and position. Change status, status in search and sync filters individually or in bulk with the help of the Actions dropbox above the grid on the left. 

To edit a filter, click the filter name.

Using of Numeric Filters

• For Admin

To appear in the grid, an attribute must have a Text Field as the input type, Decimal or Integer validation, and be enabled for search. Elasticsearch must be the default search engine. It is not recommended to use attributes where all values fall between 0 and 1 due to native Magento range calculation issues.

Disabling filters which correspond to the native Magento attributes may turn into loss of the values of that attribute, even if you enable the filter back. 

• For Developer

Numeric filter decimal values are rounded to 2 digits. Precision can be changed in Aheadworks\Layerednav\Model\Filter\Type\NumericAttribute\Formatter.

To integrate a non-numeric attribute as a numeric filter, add it to etc/di.xml under Aheadworks\Layerednav\Model\Product\Attribute\NumericCandidate\Resolver

Filter Editing

The Edit Filter page comes in four sections: General Settings, Categories, Frontend, Manage Swatches.

The 'General Settings' suggests the following parameters for configuration:

• Filter Title - the name of the product attribute and the layered navigation filter, respectively;

• Use in Layered Navigation and Use in Search Results Layered Navigation -  enable the filter within the navigation area;

• Position - determines the position of the filter in the navigation panel;

• Tooltip – enter a brief explanatory text that will appear when a customer hovers over the filter on the frontend;

• Default filter state - specifies if by default the filter will be collapsed or expanded;

• Filter Mode (for non-numeric/price attributes) - specifies the mode of the filter by default (multi- or single-select);

• Sort by (for non-numeric/price attributes) - specifies the sorting order of the filter list. 

The 'Categories' section suggests only one parameter for configuration:

• Select categories where to display the filter - the option makes the filter available: a) everywhere where applicable, b) only in the categories of the lowest level, c) exclude specific categories to be available for the filter, d) display a filter only in selected categories.

The 'Frontend' and 'Manage swatches' sections allow further visualization support to the filter and its attributes:

• Image - upload an image to accompany the name of the filter on the frontend;

• Image title - alter the default title of the image;

• View mode (for non-numeric/price attributes) - decide on the look of the filter attributes: name, swatch or combination of;

• Swatch grid (for non-numeric/price attributes) - browse and manage swatches and filter attributes here (to add a swatch click the Add Swatch button at the bottom of the table).

• Use default slider settings** (only for numeric and price attributes / NA in the picture below) - specify a different behavior for the slider filter.

Storefront Functionality

To ensure that products and filters appear correctly on the Storefront after creation or configuration changes, a reindex and cache flush must be performed as a native Magento requirement. Use the following commands: php -f bin/magento indexer:reindex and php -f bin/magento cache:flush.

Navigation Modes

The Storefront navigation can be implemented in two ways:

• Without Popover: The module updates product results immediately upon each filter selection, featuring the count of available items in brackets next to attribute values.

• With Popover: Customers can select all necessary values first. A popover appears displaying the number of items matching the current selection, and the page reloads via AJAX only after the user clicks the popover.

Key Frontend Features

• Attribute Multiselect — In contrast to native Magento navigation, this feature allows customers to select several values within a single product attribute, significantly broadening the final selection. It is recommended to keep the category filter in single-select mode while using multi-select for other attributes to help customers maintain their orientation.

• New Filter Options — The extension introduces three specialized filters that use native Magento attributes but with different logic:

• In Stock: Displays only products currently in stock.

• On Sale: Displays products with a 'Special Price' attribute.

• New: Displays products with the 'Set Product as New from Date' option enabled.

• Note: These filters automatically disable themselves if no matching products exist in a particular category.

• 'Show X More' Active Link — This link is used to truncate extra-long lists of attribute values to keep the sidebar clean. It displays the exact number of hidden values, allowing customers to unfold the full list with one click. Alternatively, if configured in the backend, a scroll bar can be used instead of the "Show X more" link for long lists.

• Clear All — To save time, customers can cancel all selected values within a specific filter simultaneously by clicking the icon located next to the filter name, rather than disabling them one by one.

• Numeric Attributes & Sliders — The module organizes numeric, decimal, and price attributes into navigable ranges. Customers can interact with these using:

• Radio-boxes: Displayed with an increment of '10'.

• Sliders: Available in Discrete (increment of 10) or Continuous (increment of 1) modes.

• From-To Inputs: Text boxes that allow customers to manually specify a precise range.

• Slider filters work independently and do not affect the settings of other active filters.

• Horizontal Filter Bar — This layout is optimized for catalog pages using a one-column design, moving the navigation panel to a horizontal position above the product grid.

• Review Rating Filter — If enabled by the administrator, this adds a filter that allows customers to sort products by user-submitted ratings using checkboxes.

• Search Inside Filters — For filters with an extensive list of attribute values (such as "Brand"), a search box is provided at the filter level to help customers quickly find specific values.

• Disabled Facets — To improve the visual experience, facets that are unavailable for the current selection appear in grey and are moved to the bottom of the list.

Product Page