Firefox user notice:

Please use different web browser to view this document.

Sorry for the inconvenience.

Layered Navigation - Magento 2

Magento 2 Layered Navigation enhances the native Magento catalog navigation functionality with filter multiselects, improved horizontal filter bar, interactive popover, filter clearance, and other features. Filters are managed from the designated table grid. Store admins can determine the default filter state, position, sort logic, assigned product categories, etc. for each filter.

Compatibility: Magento Open Source 2.2.X, Magento Commerce 2.2.X


Thank you for choosing Aheadworks!


Installing Layered Navigation

Command Line Installation

1. Backup your web directory and store database

2. Download the Layered Navigation installation package

 3. Upload the contents of the Layered Navigation installation package to your store root directory

 4. In the SSH console of your server, navigate to your store root folder:

cd path_to_the_store_root_folder

run:

php -f bin/magento module:enable Aheadworks_Layerednav

then:

php -f bin/magento setup:upgrade

after:

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

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

Make sure the installation is done from under the FTP administrator account. Otherwise, make sure to set 775 permissions to the store root directory after the extension is deployed.

Composer Installation

1. Log in to your customer account at https://ecommerce.aheadworks.com and navigate to Account -> Composer access;

2. Configure your store to work with the Aheadworks composer repository:

Add the composer repository to composer.json by running:

composer config repositories.aheadworks composer https://dist.aheadworks.com/ in the Magento installation root.

Use the provided key pair as login and pass. You can optionally save them in the global composer auth file.

 3. You can start using AW composer now.

 For extension names, navigate to Account -> Composer access.

 4. Open the root Magento directory on your server and send Composer the following command:

composer require <component-name>:<version>

Note: Use the previously copied component's name and version.

 5. Make sure that Composer finished the installation without errors. Flush the store cache, log out, and log into the backend again.


Introducing Layered Navigation

The Layered Navigation extension provides merchants with the following key features:

  • Advanced Magento 2 navigation panel with the additional filters;
  • AJAX page reloads allow customers to refresh only the product results instead of an entire page;
  • Filter single- ('Amazon-like') and multi-select modes;
  • Parameters configured individually by each filter;
  • The integration with the Advanced Search extension by Aheadworks allows sorting products on search result pages (in addition to the catalog ones);
  • The integration with the Shop by Brand extension by Aheadworks adds a brand filter to the navigation panel.

Extension Logic

The Layered Navigation extension offers two levels of filter management. The 'Configuration' section allows setting up filters on the extension level, while the 'Manage Filter' section allows Magento admins to configure each filter individually.

On the filter level, you can configure navigation filters based on the existing product attributes. For each filter, you can set the title, format (filterable or not filterable), availability in search results, position within the navigation panel, default state, attribute sorting logic, and applicable categories. For the category filter, you can additionally set its list style: multi-select or single-select. Once enabled, each filter will be added to the navigation panel on catalog pages.

On the extension level, you can configure the navigation panel parameters as a whole, including the default state of all filters, the maximum number of attribute values to display within each filter, price filter look, etc.


Getting Around

Enabled / Disabled Popover Modes

The provided navigation functionality can be implemented in two ways: with or without the navigation popover. In the latter case, the module updates the product results page upon each filter selection. With the popover enabled, on the other hand, customers can choose all the necessary attribute values and then refresh the resulting page at once.

Each of the above page refresh methods changes the appearance of the layered navigation bar. For example, the bar without the popover features the count of products available upon a particular attribute value selection in brackets.

Disabled Popover Mode

If enabled, the popover shows up displaying the number of items matching the current selection. Once a user has clicked the button in the popover, the catalog reloads via AJAX showing the appropriate results.

If required, you can disable item count. Go to Stores > Settings > Configuration > Catalog > Catalog. Expand the 'Layered Navigation' tab. Choose 'No' in the 'Display Product Count' drop-down (uncheck the 'Use system value' box beforehand).

Attribute Multiselect

In contrast with the native Magento layered navigation, our module offers you the attribute value multi-select feature. It allows customers to select several attribute values within one product attribute and, this way, considerably broaden and improve the final product selection.

Attribute Multi-select Feature

In addition to the multi-select mode, we added the traditional, single-select one to the category filter. It works exactly like on Amazon helping customers easily navigate among sub-categories.

To enable the single-select mode, go to Catalog > Layered Navigation by Aheadworks > Manage Filters. Click on the 'Category' filter in the list. On the filter settings page, expand the 'Category list style' drop-down and choose the 'Single path' option.

The Layered Navigation extension catches up all the product attributes available for a particular category. Attribute sorting options, values, availability in layered navigation - these are the native Magento 2 settings described in the developer user guide.

New Filter Options

Along with the enhanced navigation functionality, the Layered Navigation extension offers three new filters:

  • In Stock - shows all the products in stock. Useful if you display out-of-stock products in your store (the filter is automatically disabled if there are no out-of-stock products in a particular category);
  • On Sale - shows all the products with the 'Special Price' attribute (the filter is automatically disabled if there are no products with 'Special Price' in a particular category);
  • New - shows all the new products with the 'Set Product as New from Date' option enabled (the filter is automatically disabled if there are no 'new' products in a category).

Note that all the newly added filter options act in a similar way directly exploiting the native Magento 2 attributes.

The Layered Navigation extension is compatible with the Magento Solr search out of the box with no manipulations required.

'Show X More' Active Link

In order to truncate extra long lists of multiple attribute values, the extension uses the 'Show X more' active link. The link shows the number of hidden filter values. With it, customers can unfold long attribute value lists with one click.

Clear All

Since customers can simultaneously multiple attribute values within the same filter, disabling them one by one may become quite time-consuming. So, Layered Navigation allows them to cancel all the selected filter values with just one click on the 'X' button next to the filter name.

Price Filter Types

The extension also offers the new types of the 'Price' filter, including the price slider and from-to price input. The first one is especially useful for quick selections. The from-to input allows customers to manually specify the required price range.

Horizontal Filter Bar

If some of your catalog pages have a one-column design, opt for the horizontal navigation panel.

To enable a one-column layout, go to Catalog > Inventory > Categories. Expand the 'Design' tab. Select the '1-column' option in the 'Layout' drop-down.

 


Backend Configuration

General Settings

Start with configuring the global extension settings.

The extension configuration parameters can be found under Stores > Settings > Configuration > AHEADWORKS EXTENSIONS > Layered Navigation.

The provided settings define the extension's behavior and the additional filters:

  • 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;
  • Use price slider - defines if the price attribute should be available in the form of a slider;
  • Use from-to price inputs - defines if customers can specify the exact price range in the price filter;
  • 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.

SEO

The 'SEO' optimization settings are aimed at improving store presence in search engines and allow avoiding some destructive SEO issues.

The available parameters are:

  • SEO-friendly URL - defines how the applied filters affect the end-page URL;
  • 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 allow you to 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:
    • it 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.

 

The 'Use 301 redirect for old URLs' setting works as follows: if the indexed catalog page URL with filters applied doesn't correspond to the current value of the SEO-friendly URL setting but corresponds to other values, the indexed category URL will be redirected to the URL of the new format.

Managing Filters

Now let's explore how filters can be configured separately. For this purpose, 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. The grid allows filtering and sorting filters by the above attributes. Also, you can perform mass actions with the selected filters. This way, you can change the filter status and status in search or synchronize the selected filters.

Filter Editing

Edit Filter Page

The 'Edit Filter' page contains the two sections: 'General Settings' and 'Categories'.

  • The 'Filter Title' option allows changing the name of a particular product attribute and the layered navigation filter, accordingly;
  • The 'Use in Layered Navigation and 'Use in Search Layered Navigation' parameters allow enabling the filter for a particular navigation area;
  • Position - determines the filter's position in the navigation panel;
  • Default filter state - specifies the state of a particular filter by default;
  • The 'Sort by' option allows determining the sorting order of attribute values within the filter: manually or automatically in the alphabetical order ('A-Z' or 'Z-A');
  • Category list style - the option is available for the 'Category' filter only. It determines the navigation panel's appearance and behavior. If the 'Default (multiselect)' option is enabled, the 'Category' filter looks much like the other filters. It displays categories, subcategories, and checkboxes. Customers are able to select one or several of them. The 'Single path' option displays the whole category tree and allows customers to directly proceed to the only destination within the catalog;
  • Select categories where to display the filter - the option allows making a particular 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.

The filter becomes available only if at least one of the 'Use in Layered Navigation and 'Use in Search Layered Navigation' options is available.


You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://ecommerce.aheadworks.com
License agreement: http://ecommerce.aheadworks.com/LICENSE-M1.txt
Contact Us: http://ecommerce.aheadworks.com/contacts/
Copyright © 2018 Aheadworks Co. http://www.aheadworks.com