Extend the Magento 2 layered navigation and add advanced filtering features: filters multi-selection, AJAX functions, and a price slider
OverviewBack to top
Modern web applications use AJAX to improve usability, enhance the user experience and increase sales. Our extension adds AJAX functionality and advanced filtering features to Magento 2.
AJAX features are added to the filters and the pagination blocks, users can choose different filters and catalog pages without the need of reloading the whole page, enhancing the user experience and reducing response time and server load.
The Ajax Layered Navigation also allows to filter products using multiple values, for example: multiple colors or multiple sizes, so the catalog filters are more user friendly and better suited for modern e-commerce sites, where the customers expects this kind of advanced search functionalities, and not to be limited to only one filter value at a time.
Bookmarks/history support, by using URL hashes or the History.js plugin.
Our extension gives the site administrator the possibility of selecting between the hash method or the history.js plugin, which supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. this means that the URL is modified directly, without using hashes, and the page contents are reloaded using AJAX.
Demo of the history.js enabled, look at the location bar and how the url changes as you use the layered navigation:
Default demo, with hashes enabled:
Allows customers to filter products by price range, with a configurable slider step value, this Magento price slider uses an implementation of the jQuery UI slider component. The price slider plugin supports touchscreen.
Mutiple attribute selection.
With multiple selection of filters, site visitors can select more than one value for the same filter. The filter options appear as checkboxes and products can be filtered using multiple values, for example, multiple colors or multiple sizes, so the layered navigation is more user friendly and better suited for modern e-commerce sites, where the customers expects advanced search functionalities and to be able to narrow their search using more than one value at a time when it is convenient.
The extension allows to show selected filters expanded or collapsed by default, which means the site admin can choose the filters that are more relevant for the search expanded by default, for example, brands, colors or sizes.
Horizontal filters block
Use this option to display the layered navigation filters above the products grid/list, as the only layered navigation block or in combination with the default layered navigation block on the left column. Select the filters that should appear above the products grid as dropdown lists. Our extension also allows to display filters in a block above the products list, this is useful for one-column layouts of for catalogs where the left column block is used for a different purpose.
Demo of vertical + horizontal Layered Navigation blocks:
Demo of horizontal layered navigation:
Tooltips can be configured in the administration area, CMS blocks are used to store the content of the tooltips and they are displayed next to the filter title. Tooltip contents can be include text, html and images.
Hide filters per store view
You can select the filters that are not necessary in selected store views and they will not be displayed on the layered navigation block.
- Categories tree for the layered navigation with multiple selection of categories.
- Scrolls to top after Ajax reload
- Maximum options list height, for vertical or horizontal layered navigation.
- jQuery events to implement custom scripts: beforeAjaxProductsLoaded, afterAjaxProductsLoaded
Please visit our demo site: http://magento2.mangoextensions.com/ajaxlayerednavigation/
Release NotesBack to top
- Compatible with Open Source (CE) : 2.0 2.1
- Stability: Stable Build
Includes Price Slider, for customers to filter products in the catalog by price range, with configurable slider step value, this Magento price slider uses an implementation of the jQuery UI slider component
The price slider plugin supports touchscreen.
Multiple selection of filters, site visitors can select more than one value of the same filter.
Displays filter options as checkboxes.
Expand/Collapse filter blocks: enabled or disable option, and select filters that are expanded by default. You can leave the filters that are more relevant to customers expanded by default.
Scrolls to top after Ajax reload
With bookmarks/history support, using URL hashes.
Horizontal layered navigation block along with default vertical layered navigation
Horizontal layered navigation block for any kind of layout
Improved stylesheet for responsive design
Tooltips next to filter title. Tooltip content are retrieved from CMS blocks
Hide attributes from layered navigation block, this value can be set per store view
Option: Hide state block