The Kartris PowerPack is a paid add-on to Kartris which adds extra functionality. It is compatible with Kartris v2.6 onwards, though can be added to v2.5 with some further changes.

Kartris v2.6 already incorporates some elements required by the PowerPack, including a place-holder BLL file, some interface code and CSS (in the default Kartris skin, sections.css file). This makes installation very simple.

Copy the PowerPackBLL.vb file into the /App_Code/BLL/ folder, replacing the place-holder file there of the same name.

Run the SQL update script on your database. If you are installing the PowerPack for the first time, use the version of the SQL file named for a single version of the PowerPack, e.g. PowerpackScript_1.002.sql.

If you are updating the PowerPack on your site from an older version, you will have to run the .SQL files for each step from your current version to the latest version. For example, to upgrade your PowerPack from v1.001 to v1.004, you'd run these files:


You may get warnings in the SQL console that some language string records already exist. Ignore these; it only means the required records are already in there, so everything is ok.

The PowerPack is now installed.

The PowerPack is an optional paid add-on that adds or extends Kartris features. At present, it includes the following, though it will be expanded over time:

  • Product filtering and sorting within categories
  • Search suggestions that appear in real-time as you type within the search box that is on all pages

The features can be turned on/off individually after installation with the following config settings:


Every category on your site is different. It will have different types of products, which will have different price ranges and attributes. Kartris lets you create and customize a filter solution for each category, or not have filters on some categories (they're only really required where you have enough products to make sorting necessary).

Creating filters is simple. Navigate to the category in the back end and click to edit it. You should see a tab 'CATEGORY FILTERS'. This holds a text area. There is a small refresh button next to this; clicking it will auto-generate XML configuration for the filters. This looks at which attributes are used by products in the category, and the prices of these products.

You can opt to SAVE this default configuration, or you can manually edit it before saving. This gives you the flexibility to cut particular filters you feel you don't need, adjust price ranges and so on.

If there is no data in this field, the filters won't show. Therefore you can remove filters from a category which has them by simply removing everything from the field and saving it.

Category filter generation

The filters will appear on categories that have them as shown below:

Front end of category filters

The filters, by default, will display down the left hand 25% of the category page. This is controlled by the mark up in /UserControls/Front/CategoryProductsView.aspx, which is using Foundation classes to form a left hand column of width '3' and a right hand content area of width '9' (Foundation works based on a grid of 12 columns). The column is set using this tag:

<div class="small-12 large-3 columns filterbar">

The main content area is set with this tag:

<div class="small-12 large-9 columns">

In both these tags, you will notice from the 'small-12' class that on small screens, the page will collapse so that the filters appear full width and above the main page area.

The filter system works with products displayed in shortened, normal and extended format. However, a little consideration should be given to the number of items per page in shortened view. Normally you may have 4 items per line (depending on your design), but with the filters there, this would generally reduce that number to 3 per line.  Therefore, you should try to pick a setting for frontend.products.display.shortened.pagesize appropriately so that you get full rows in both cases (we'd suggest 12 in this case - on categories with no filters, you get 3 rows of 4, on categories with filters, you get 4 rows of 3).

CSS for the filters is based on the 'filterbar' class, and sample code can be found within our default Kartris skin, in sections.css. We have also put this in a self-contained powerpack.css file, though it is not used within the default Kartris skin. If adding the PowerPack to an existing site, you may prefer to just add in a new reference to the powerpack.css file instead.

CATEGORY FILTERS - if you have the PowerPack installed
.page_category #filterbar_pad           { padding: 3px 10px 10px 0; background: #fff; }
.page_category #customprice             { padding: 5px 0; }
.page_category .filterattributes        { padding: 15px 0 10px 0; }
.page_category .shorttext               { display: inline-block; }
.page_category select,
.page_category input                    { margin: 1px 0 3px 0; }
.page_category label,
.page_category span.attribute_title     { font-size: 11px; text-transform: uppercase; display: inline-block; letter-spacing: 0px; color: #777; margin-bottom: 3px; font-weight: normal; vertical-align: top; }
.page_category table                    { margin: 0 0 10px 0; background: none; border-bottom: solid 1px #ccc; }
.page_category table tr td              { background: #fff; padding: 1px; border: none; }
.page_category table tr td label        { color: #333; text-transform: none; font-size: 100%; }

Once turned on, this gives product suggestions in a dropdown menu that appears right below the search box, as shown below:

Search suggestion box

The user can navigate up or down the list using the cursor keys and 'enter' to choose an item. Alternative, the mouse can be used.

This functionality is not a replacement for the full Kartris search which occurs when you submit a search term in the box. That search is more sophisticated; it will search more fields and rank results based on relevance (see 12. Kartris Site Search. This suggestion feature finds products where the name contains the search text entered, or where any versions that belong to it has an SKU or name which contains the text - but in many cases these results will be sufficient.

Powered by tomeCMS