Ajax Filters Documentation

The Nop Ajax Filters plugin for nopCommerce adds extremely fast and powerful filtering capabilities to your online store to make your website navigation easy and shopping quick and enjoyable. With the Nop Ajax Filters your customers will be able to filter products by: price, manufacturer, specifications and even attributes.

General Settings

From this section you could specify the most common settings for your Nop Ajax Filters.

1. Enable Ajax Filters - Enable the Ajax Filters.
2. Show Ajax Filters on Category Page - Show Ajax Filters on Category Page.
3. Category Ids (split by comma) - Enter the ids, split by comma, of all the categories in which you don't want filters to be shown.
4. Trailing Zeroes Separator - Used to remove trailing zeroes from min and max price in price range filter (e.g. if you have min or max price like 12.350,00 and you like to get rid of the last two zeroes you can specify ',' as value of the setting). If you want to specify several separators you need to list them without separating them (e.g. if you need dot and a comma as your separators write them like this '.,').
5. Show Ajax Filters on Manufacturer Page - Show Ajax Filters on Manufacturer Page.
6. Show Ajax Filters on Vendor Page - Show Ajax Filters on Vendor Page.
7. Show Ajax Filters on Search Page - Show Ajax Filters on Search Page.

8. Widget Zone - The names of the widget zone in which the Ajax Filters can be added.

   NOTE: The Ajax Filters can be added only to one widget zone.
9. Filters UI Mode - The user interface mode of the Ajax Filters (checkboxes or dropdowns).
10. Default Product Sort Option - Here you can control the default product sort option on category and manufacturer pages.
11. Enable Infinite Scrolling - Enabling the infinite scroll will remove the pager and load more products on scroll.
12. Enable search in product tags - Enables searching in product tags.
13. Scroll To Element On The Page After Filtration (Desktop) - If you enable this setting, after each filtration the page will be scrolled to the element specified below.
14. Scroll To This Element After Filtration (Mobile) - Here you can list your element selectors, divided by commas. We scroll to the first found element. Default behaviour is scroll to .product-selectors.

Ajax Filters Availability Settings

From this section you can configure your filter groups.

1. Show Selected Filters Panel - Enable panel, which shows all applied filters. Each filter value can be clicked, in order to remove the filter.
2. Show Number Of Returned Products -  Enables showing information for the products that are visible out of all available, matching the filter criteria in format e.g. "5 showing from 20".
3. Enable Price Range Filter - Enable filtering based on product price.
4. Close Price Range Filter Box By Default - Check if you want the price range filter box to be closed by default.
5. Enable Specifications Filter - Enable filtering based on product specifications.
6. Close Specifications Filter Boxes By Default - Check if you want the specifications filter boxes to be closed by default.
7. Enable Attributes Filter - Enable filtering based on product attributes.
8. Close Attributes Filter Boxes By Default - Check if you want the attributes filter boxes to be closed by default.
9. Enable Manufacturers Filter - Enable filtering based on product manufacturers.
10. Close Manufacturers Filter Boxes By Default - Check if you want the manufacturers filter boxes to be closed by default.
11. Enable OnSale Filter - Enable filtering based on product with different old and new prices.
12. Close OnSale Filter Boxes By Default - Check if you want the OnSale filter boxes to be closed by default.
13. Enable Vendors Filter - Enable filtering based on product vendors.
14. Close Vendors Filter Boxes By Default - Check if you want the vendors filter boxes to be closed by default.

Ajax Filters Selectors Settings

From this section you can change some of the most common selectors for Nop Ajax Filters.

1. Products List Panel Selector - Html selector for the panel that contains the product list.
2. Products Grid Panel Selector - Html selector for the panel that contains the product grid.
3. Pager Panel Selector - Html selector for the panel that contains the paging.
4. Pager Panel Integration Selector - Html selector for the element after which the panel that contains the paging will be shown. This setting is applied only in the cases when initially there is no pager and afterwards it is necessary to be added.
5. Sort Options Dropdown Selector - Html selector for the panel that contains the sorted options for the dropdown list.
6. View Options Dropdown Selector - Html selector for the panel that contains the view options for the dropdown (grid or list).
7. Product Page Size Dropdown Selector - Html selector for the panel that contains the product page size dropdown.
8. Scroll To This Element After Filtration - Here you can list your element selectors, divided by commas. It will scroll to the first found element. Default behaviour is scroll to .product-selectors.
9. Number Of Returned Products Selector - Html selector for the element after which the panel with number of returned products will be shown. If the element is not present the panel will be shown inside .product-selectors element.

Ajax Filters - Include products from subcategories

In past versions of the plugin we had a setting for this, but now the same setting is included in nopCommerce, so we removed ours and made the filters compatible with the nopCommerce setting.

By checking this setting you will be able to see all the products from subcategories on the main category. The filter options for these products will be available on the main category too.

How to manage too long prices in the price range filter

If you have custom formatting which makes the prices with many trailing zeroes (i.e. 1350 000,000), this could became a problem for the price range filter styling. So, we created a price formatter which removes the trailing zeroes (i.e. 1350 000).

The default separators for trailing zeroes are dot and comma, but this could became a problem for some formattings. That is why we created a resource from which you could manage the trailing zeroes separators.

The resource name is SevenSpikes.NopAjaxFilters.PriceRange.TrailingZeroesSeparator. If price range filter cuts some zeroes from the price, just find this resource in your language resources, which are located at Configuration -> Languages -> View string resources, and edit the separators. 

How to add new Category Templates with Ajax Filters

If you want to add new category templates with Ajax Filters the steps are as follows:

If you are using a theme:  

1. Open the folder of your default category template.
   
   Note: If you are using theme that overrides the category template you will have to open the location of the category template view in the theme itself. For example in our Tiffany theme the category template is located at Themes\Tiffany\Views\Catalog folder.
   
   
2. Copy the default category template - CategoryTemplate.ProductsInGridOrLines.cshtml.
3. Rename it as you like (for example NewCategoryTemplate.cshtml) and make your changes in the new file.

In AjaxFilters:

1. Go to Plugins\SevenSpikes.Nop.Plugins.AjaxFilters\Views\Catalog7Spikes.
2. Copy the default category template view that you will find there - CategoryTemplate.ProductsInGridOrLines.cshtml.
3. Give it the same name as the theme category template - NewCategoryTemplate.cshtml

In the administration:

1. Go to System -> Templates -> Category Templates.
2. Click on Add new record.
3. In the View path set the name of the new Category Template - in our case NewCategoryTemplate.

After this you will be able to set the new template from the Categories you want to use it.

Known Issues

If when installing Ajax Filters while using Linux and MySQL (nopCommerce 4.3 and above), you get the following error:

MySql.Data.MySqlClient.MySqlException: Parameter ‘@id’ must be defined

You need to add Allow User Variables=True in the connection string in order to use custom variables.