Ecommerce Templates > General Help > Product filter bar

The product filter bar

The side product filter bar features are available in the core cart code and if you are missing these just update to one of the latest supported versions here.

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 in the Admin Main Settings page.

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

The number of sales increases with each sale and is based on the number of sales rather than quantity sold of each item. In the product admin page you can regenerate the sales stats, choosing the time period you want to base sales data on. Popularity is based on visits to the product detail page. Both these sort option values can be edited in the product admin Quick Entry feature.

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

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; }

Additional Features

To display the checkboxes as the filter selector, (and so enabling multiple selections), add the following to vsadmin/includes.asp

sidefilterstyle="multiple"

or to vsadmin/includes.php

$sidefilterstyle='multiple';

If you want to display products which have zero attributes after filtering, add the following to includes.asp

displayzeroattributes=TRUE

or includes.php

$displayzeroattributes=TRUE;

If you want to display the "GO" button to the right of the price selectors add this to includes.asp

sfpricebuttoninline=TRUE

or includes.php

$sfpricebuttoninline=TRUE;

To display a button for more attributes, use this in includes.asp

$sidefiltermorebutton=TRUE;

or includes.php

To display that as a text link also use this in includes.asp

imgsidefiltermore="link"

or in includes.php

$imgsidefiltermore="link";

To display that as an image use this in includes.asp

imgsidefiltermore="images/image.gif"

or in includes.php

$imgsidefiltermore='images/image.gif';

To use a mouseover bar effect use this in includes.asp

sidefiltermorestyle="mouseover"

or in includes.php

$sidefiltermorestyle='mouseover';

To define the threshold where the more button, image or link should appear add this to includes.asp

sidefiltermoreafter=6

or includes.php

$sidefiltermoreafter=6;

If you choose to show attributes that have no products associated with them, you'll see the text is "greyed out". You can override this color change using the css class

div.zeroatt

The orange button uses the class

input.sfprice

Don't edit these in ectcart.css as they will get overwritten by updaters. You can add these classes to your main css file if you need to make changes to the display.

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.