Ecommerce Templates > General Help > Product filter bar

The product filter bar

The side product filter bar plugin is available from our Store Tools page and requires a minimum of ECT Version 6.4. The top filter bar is part of the core shopping cart software installation and requires no plugin.

The product filter bar allows you to provide a series of configurable filters on your products pages. It means that your customers can filter the product listing by price, keyword, product order, number per page and attributes. You can choose to show the filter bar at the top of the product listing, in the side bar or both, including the ability to have different filters in the two locations if you prefer.

Enabling the top filter bar

To enable the top filter bar all you need to do is check the filters you want to appear at the top of your products pages.

Product Filter Bar

You can set the order of the filters by clicking on the arrows on the left hand side. The labels which accompany the drop down and text input menus is optional. There are css classes included for formatting the look.

Filter by Prod Attributes
This allows you to group products together using your own criteria. You will first need to create your groups by clicking on the link in the admin home page for "Product Attributes". For example you might want to create groups for brand new products, nearly new and second-hand so the label you might want to enter here would be "Condition". Once you have set up those groups, you will then want to assign your products to each group through the product admin pages...read more

Filter by Price
You can provide a drop down of pricing bands to your customers so they can filter the product listing by price. By default price bands are of $100 but you can set your own thresholds in vsadmin/includes.asp with for example
filterpricebands=150
or in vsadmin/includes.php
$filterpricebands=150;

Customer Defined Sort
This allows you to choose between the 12 different sort methods so a customer can choose to have the product listing sorted alphabetically, by price, by most recent etc.

Customer define sort

The default text here can be changed in vsadmin/includes.asp or vsadmin/includes.php depending on your version.

Products Per page
The customer can choose how many products will appear on the page. The multiples come from the main products per page setting.

Filter by Keyword
The customer can enter their own search terms to find the product they are looking for. The search will be based on the product name, id, description and additional search parameters.

Enabling the side filter bar

You will first of all need to have purchased the side filter bar plugin from our Store Tools page. Upload the file insidefilter.asp or incsidefilter.php to your vsadmin/inc/ folder.

To enable the side filter bar you will need to check the filters you want to appear at the side of your products pages. These don't need to be the same as the ones for the top filter bar but the filter functions are the same as above.

Product Filter Bar

Now on your products.asp you will need to add the following line of code where you want the filter bar to appear

<!--#include file="vsadmin/inc/incsidefilter.asp"-->

If you are using the PHP version you will add this to products.php where you want the sidebar to appear

<?php include "vsadmin/inc/incsidefilter.php" ?>

Here is an example of how it might look and the CSS classes available

Product Filter Bar

CSS classes

These are the css classes associated with the side filter bar

div.ectpatgrp - the div that goes round each grouping

div.ectpattitle - the title of each group

div.moreattributes - the link area which expands the attribute listing

div.ectpat - the attribute name

div.ectpacount - the number of available products in brackets

input.sidefilter - the input field

input.sidefiltergo - the "Go" button for the price filter

select.sidefilter - the drop down menu css class

In the example on the left we are using the following css

div.moreattributes{
background: rgba(184,184,184, .8) !important;
color:#000;
font-size:12px;
font-weight:bold;
padding:1px;
border:1px solid #999 !important;
}

div.ectpacount{
font-size:0.9em;
color:#666;
}

div.ectpatgrp{
border-bottom: 1px solid #ccc;
margin-bottom:12px;
padding-bottom:6px;
}

Please note the use of "!important" to overrule any inline styles used.

 

If for example you wanted the "More" link to go below the list of links with no borders or background you could use something like this...

Product Filter Bar


div.moreattributes{
background: #fff !important;
color:#666;
text-align:right !important;
font-size:1em;
font-weight:bold;
padding-top:9px !important;
border:0px !important; }

Product attributes

The product attributes allow you to group products together by their attributes. First of all you would go to the product attributes admin page and set up the groups you want to use in your filtering.

Product Filter Bar

Click on "Modify Attributes" to add attributes to the group

Product Filter Bar

Then go to the product admin page to assign the attributes to the product

Product Filter Bar

You can assign multiple attributes to the same product.

Please Note: The manufacturers have now been moved to the Product Attributes Admin page. If you are updating from a previous version you should notice that the Manufacturers Admin page is no longer available as a separate entity although the features remain the same.

Tweaking the side filter bar

Apart from using the css classes listed above you can also define other options for the side filter bar groups. Using these settings in vsadmin/includes.asp

sidefiltermoreafter=8
sidefilterclosedheight=150

or in vsadmin/includes.php

$sidefiltermoreafter=8;
$sidefilterclosedheight=150;

...means that if there are more than 8 items, you get a "MORE" button. Also from the example above when the group is closed it will contract to 150px high.