Child pages
  • Layered Navigation - Magento 2
Skip to end of metadata
Go to start of metadata

Icon

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, more specifically, store admins can determine the default filter state, position, sort logic, assigned product categories, etc.

Product Page

Thank you for choosing Aheadworks!


Installing Layered Navigation

Command Line Installation

1. Backup your web directory and store database

2. Download Layered Navigation installation package

 3. Upload contents of the Layered 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:

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 store cache; log out from the backend and log in again

Icon

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 composer repository to composer.json by running:

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

Use a key pair provided 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 name and version.

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


Getting Around

Layered Navigation extension comes ready for work right after the installation.

  • Once installed Layered Navigation replaces the native Magento 2 navigation menu automatically, introducing additional functionality and filters;
  • AJAX reloads allows customers to refresh only the product results instead of the entire page;
  • Layered Navigation can filter products on both catalog and search result pages;
  • Grid or list view support;
  • Mobile-friendly layout.

Horizontal Filter Bars

The stores using a one-column design on particular category pages or throughout the whole product catalog will benefit from the horizontal layered navigation filter bars.


Note: In order to use the one-column design follow Admin -> Catalog ->Categories -> Design -> Layout.

Enabled and Disabled Pop-over Modes

The provided navigation functionality can be implemented in two ways: with or without the navigation pop-over. In the latter case, the module updates the product results page upon each filter selection, while with the pop-over enabled customers can choose all the necessary attribute values and then refresh the resulting page at once. Each of the above logic changes the appearance of the layered navigation bar a bit. For example, the bar without the pop-over features the count of products available upon the particular attribute value selection in brackets, while the pop-over mode displays only the number of currently selected items.


It the example above we have selected three Style attribute values. Once all the required attribute values are selected the customer is suggested to click the button in the extension's pop-over.


Icon

Consider that you can stop displaying product counts by the extension if this option is disabled in the native Magento layered navigation configuration section in the backend (Stores -> Configuration -> Layered Navigation -> Display Product Count).

Attributemultiselects

The first difference between the native Magento layered navigation and our extension you might notice is the attribute values multi-select. It allows customers to select several attribute values within one product attribute and, this way, considerably broaden and improve the final product selection.

Icon

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

New filter options

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

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



In the example above, we have selected 'On Sale' filter resulting in all the products with Special Price displayed.

Other newly added filter options act in the same way directly exploiting the native Magento 2 attributes.

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

Show X More

In order to truncate extra long lists of multiple attribute values, the extension uses the Show X more link. The link shows the number of hidden filter values and allows customers to unfold the list in just one click if needed.

Clear All

As soon as customers can simultaneously select several and sometimes a lot of attribute values within the same filter, the process of disabling them one by one may become quite time-consuming. So, Layered Navigation allows them to cancel all the selected filter values in just one click on the "X" button next to the filter name.

Price Filter

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

 


Filter Management

 

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. The section can be found under Catalog > Layered Navigation by Aheadworks > Manage Filters.

Manage Filters

The Manage Filter grid contains six columns, including filter names, codes, types, their general statuses and statuses in search, and the position. The grid allows filtering and sorting filters by the above attributes and you can also perform mass actions with the selected in the grid filters. This way, you can change filter statuses and statuses in search, or synchronize the selected filters.

Filter Editing

The 'Edit Filter' page contains two sections, including General Settings and Categories.

  • The Filter Title option allows changing the name of a particular product attribute and the layered navigation filter, accordingly;
  • Use in Layered Navigation and Use in Search Layered Navigation - enable the filter for particular navigation areas;

Note: The filter becomes available only if at least one of the above options is available.

  • Position - determines filter's position in the within the whole set of layered navigation filters;
  • Default filter state - specifies the state of a particular filter by default (may differ from the default state provided by General Settings)
  • The Sort by option allows determining the sorting order of attribute values within the filter manually or automatically in alphabetical order (A-Z or Z-A);
  • Category list style. The option is only available for the Category filter and determines its respective appearance and behavior. If the Default (multiselect) option is enabled the Category filter looks much like the other filters, displays the categories and subcategories checkboxes, and allows customers to select one or several of them. The Single path option displays the whole category tree and allows customers to proceed to the only destination within the catalog directly;
  • Select categories where to display the filter. The option allows making the particular filter available: a) Everywhere, where applicable, b) Only in the categories of the lowest level, c) Exclude specific categories to be available for this filter.

 

 


Adjusting Layered Navigation options and settings

The extension configuration settings can be found under Store > Configuration > Aheadworks Extensions > Layered Navigation.

General settings

The settings available define the extension behavior and additional filters available for customers:

  • Enable AJAX - defines how the extension handles the category page when the filter is applied:
    • If set to "Yes" the extension will only reload products block;
    • If set to "No" the extension will reload the whole category page;
  • Display "New" Filter - defines if 'New' filter should be available for customers;
  • Display "On Sale" Filter - defines if 'On Sale' filter should be available for customers;
  • Display "In Stock" Filter - defines if 'In Stock' filter should be available for customers.
  • Disable "Show X Items" pop-over - defines if the pop-over with the total number of items that match currently selected attributes should be displayed;
  • Use price slider - defines if the price attribute should be available for adjustment via slider functionality;
  • Use from-to price inputs - defines if customers can specify the exact price range in navigation;
  • Default filter state - determines the default (expanded or collapsed) state of all filters;
  • Filter values display limit - determines the number of filter values to be shown prior the 'Show X more' link is applied;
  • Hide filters with no available values - defines if filters that do not have values for the currently generated list of products should be hidden at the navigation menu;
  • Hide attribute values if they are not available - shows or hides the attribute values within one filter that are void for the current product selection.

SEO

The SEO optimization settings are aimed at improving overall store performance in the eyes of search engines and allow avoiding some destructive SEO issues.

The available settings are:

  • SEO-friendly URL - defines how filters applied affect the end page URL;
  • Disable search engine indexing on catalog search pages - define if the search engine indexation should is disabled on catalog search pages;
  • Use 301 Redirect for old URLs - if the catalog pages with filters have been indexed and then moved, enabling this setting you will create the 301 redirect to the old page URL composed according to the SEO-friendly URL setting value;
  • Page Meta Title Template - defines what information should be added to the catalog page Meta Title when attributes are selected in Layered Navigation;
  • Page Meta Description Template - defines what information should be added to the catalog page Meta Description when attributes are selected in Layered Navigation;
  • Rewrite meta robots tag - if enabled adds NOINDEX, NOFOLLOW on the category pages when:
    • it is a second or consecutive page (pagination);
    • products are filtered by position, name or price;
    • selected several options of the same filter;
    • product listing is different from the default values - when the product listing value becomes a part of the URL.
  • Add canonical URLs - defines if the canonical URLs are added to the catalog search pages.
Icon

Use 301 redirect for old URLs settings 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, however corresponds to other values, the indexed category URL will be redirected to the URL of the new format.

Product Page

 

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

  • No labels