Ajax Layered Navigation

Ajax Layered Navigation
M2

TOTAL:
$69.00
Compatible With: Community 2.0, 2.1

Tech Specifications

Current Version:
2.1.2
Type:
Stable Build
Updated:
21 December, 2017
Categories:
Extensions, Content & Customizations, Site Search & Navigation
License Type:
MIT License (MIT)

Overview

Extend the Magento 2 layered navigation and add advanced filtering features:  filters multi-selection, AJAX functions, and a price slider

Other Extensions by Mango Extensions

Overview

Back 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.

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 history.js enabled, look at the location bar and how the url changes as you use the layered navigation:

http://magento2.mangoextensions.com/ajaxlayerednavigation_historyjs/ajax-layered-navigation-demo.html

Default demo, with hashes enabled:

http://magento2.mangoextensions.com/ajaxlayerednavigation/ajax-layered-navigation-demo.html

Price Slider

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.

Expand/Collapse filters

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:

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

 

Demo Page 

Please visit our demo site: http://magento2.mangoextensions.com/ajaxlayerednavigation/

Release Notes

Back to top

2.1.2:

  • Compatible with CE: 2.0 2.1
  • Stability: Stable Build
  • Description:

    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
    Per-store visibility
    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

Support

Back to top
The best place to start if you need help with a specific extension is to contact the developer. All Magento developers have both a contact email and a support email listed.

Q & A

Back to top

Reviews

Back to top