The default Magento catalog offers layered navigation to let customers refine their product selection. However, it lacks of AJAX functionality and advanced filtering features, our extension 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.
The AJAX functionalities are added to the filters and the pagination blocks, users can choose different filters and catalog pages without the need of reloading the catalog pages, enhancing the user experience and reducing response time.
Extension features
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 extension with history.js enabled, look at the location bar and how the url changes as you use the layered navigation:
Default demo, with hashes enabled:
http://magento2.mangoextensions.com/ajaxlayerednavigation/ajax-layered-navigation-demo.html
Price Slider
For customers to filter products 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.
Price slider options
- Step value
- Show search fields, where users can enter the price range manually
- Use minimum value: The price slider minimum value will be based on the products collection, otherwise the minimum slider value is zero.
- Use category price slider step: to use the category attribute: Display Settings > Layered Navigation Price Step
Mutiple attribute selection.
Multiple selection of filters, site visitors can select more than one value of 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.
Expand/Collapse filters
This option can be enabled, and the extension also allows to show some 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:
http://magento2.mangoextensions.com/ajaxlayerednavigation_horizontal/
Demo of horizontal layered navigation:
http://magento2.mangoextensions.com/ajax_horizontal_only/
Tooltips
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.
Other Features
- 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