Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

Drill-down Navigation Widget (category search fields)

Overview

ProductCart v3.5 supports “drill-down” navigation, which is a popular, user-friendly way to browse a category that contains products that share some of their “properties”. For example, if you browse the “Laptops” category on large electronics stores on the Internet, you are often presented with filters that are specific to that category and that allow you to easily narrow down (drill down) the list of products (e.g. Screen Size, Memory, Hard Drive Size, Windows vs Mac, etc.).

These filters are typically presented in the form of “boxes” of text links located in either the left- or right-side column of the store design. The same filters are hidden if you visit a completely different category. You can now do the same on your ProductCart-powered store.

Thanks to a series of improvements made to the search and ”Custom Search Fields” features, ProductCart v3.5 and above support this powerful storefront feature.

The store manager can now create an unlimited number of Custom Search Fields (previously limited to 3 per product, now unlimited), associate them with products and categories, and place a small snippet of code in the header.asp or footer.asp file to allow customer to use those filters to better navigate your store.

This feature represents a substantial improvement to the ProductCart storefront.

Control Panel

Here are the steps that you need to take to setup your store to use the drill-down navigation feature.

Manage Custom Search Fields

Select “Products > Manage Custom Fields > Manage Custom Search Fields” to view the page that allows you to create and edit Custom Search Fields on your store. Let's assume you sell computer monitors. Some of the properties of computer monitors are things such as “Screen Size”, “Screen Resolution”, “Contrast Ratio”, etc. Create those search fields here.

Add or Edit Products

When adding or editing products, ProductCart version 3.5 shows a new area of the page called “Custom Fields”. Use that area of the page to associate previously created Custom Search Fields with the product that you are adding or editing.

For example, if you are adding a new computer monitor that has a screen size of 20 inches, you would select “Screen Size” and either pick “20” from the drop-down menu of available values, or add it if not already available. Press the ”+” sign to add the Custom Search Field to the product.

Repeat the same task for any Custom Search Fields that you wish to associate with the product that you are adding or editing. Use the ”-” sign to remove a previously added field.

Custom Search Fields data is not saved to the products database until you save the page. Remember to save the changes to the product before leaving the page.

You can easily associate custom search field values with lots of products at once by using the Product Import Wizard. You will be able to import information for up to 3 custom search fields at a time. The column name must be the same of the custom search field that you are importing. See the section of this WIKI dedicated to the Product Import Wizard.

Add or Edit Categories

In order for ProductCart to know that certain Custom Search Fields need to be shown in the storefront as drill-down navigation filters when a category is selected, you will need to associate those fields with any categories that they apply to. To do so, you will need to edit those categories.

ProductCart v3.5 contains a new feature that allows you to specify which Custom Search Fields are associated with a category when you are editing category information. A new area of the Edit Category page called Search Fields is dedicated to this feature.

Custom Search Fields data is not associated with the category that you are editing until the database is updated. Remember to save the changes to the category before leaving the page.

Enabling the Widget

The following instructions only apply to v3.5 and above. If you are using the default ProductCart v3.5 header file the widget is already installed. If you are updating to v3.5 you will need to add the widget into your existing header file. To add the widget follow the steps in the following section entitled “Storefront”. The widget is inactive by default to conserve the server's resources. You need to enable the widget before it will display the drill-down options. To enable the widget navigate to Settings > Store Settings > Search Options (or Settings > Search Options in v3) and selecting yes under the “Custom search field widget for categories” heading. Click “Save Search Options” to complete the task. Assuming you have followed all of the previous steps above your drill-down widget should now be visible. If your widget is not visible please read the troubleshooting section at the bottom of this page.

Storefront

Place the following, small piece of code in the area of your store interface where you would like the drill-down filters to appear.

<!--#include file="CategorySearchFields.asp"-->
  • The code can go in EITHER header.asp OR footer.asp, not in both.
  • It should be positioned in either a table cell or a DIV.
  • You must be running ProductCart version 3.5 and above.

Since the drill-down filters are organized vertically, you will want to position this code towards the top of either the left-side or right-side column of your design. If your design does not contain a left- or right-side column, you should add one.

Here is a graphical example. Several Custom Search Fields were associated with the category Monitors. They become drill-down filters in the storefront. In this example they were added to footer.asp (right column of the store design).

An Example

Check out Drill-down Navigation at work on one of our ProductCart demo stores.

  • Load this category and notice the two drill-down filters on the left
  • Move to another category and you will see that they automatically disappear
  • View the category in the Control Panel to see how Custom Search Fields have been associated with the category (click on the Search Fields tab).
  • pcSearchFields.css and SpryCollapsiblePanel-CSF.css were edited to match the look of the storefront, as mentioned in the section of this page that talks about styling the drill-down navigation widget.

Styling your Widget

Overview

The Drill-down Navigation Widget can match the look and feel of your store. You can change the colors and fonts using CSS (Cascading Style Sheets). So you are in full control not only on the location of the widget (where the drill-down navigation filters will be shown), but also of the widget’s appearance.

Fonts and Colors

The look of the drill-down navigation filters is controlled by a few different files.

  • All of the colors and fonts are defined using CSS in the file “pc/pcSearchFields.css”.
  • The accordion menu styles (the tab and rollover colors) are defined in the CSS file “includes/spry/spryCollapsiblePanel-CSF.css”.
  • The style called “pcCSFNotice” controls the status box (e.g. the “Please wait…” box).
  • The style called “pcCSFTitle” controls the drill-down headings.
  • The drill-down options are defined in the style “pcCSFItem” and the product count is controlled by “pcCSFCount”.

Backgrounds

The background of the accordion tab is white by default. We recommend that the widget’s background match your store’s background. To change the accordion tab's background color you will need to open up the file “spryCollapsiblePanel-CSF.css” and change ”#FFFFFF” (white) to the color of your choice.

The rollover (or hover) color of the accordion tab is light-gray by default. To change the accordion tab's rollover color you will need to open up the file “spryCollapsiblePanel-CSF.css” and change ”#F7F7F7” (light-gray) to the color of your choice.

Size and Layout

By default the widget's layout is vertical.

The widget does not have a fixed width or height and will resize to match the dimension of its container.

If you are not comfortable with CSS and HTML you should not attempt to modify the layout's sizing. Most changes, such a font and color, can be made with a couple small changes to CSS. However, sizing a widget can be more complex.

Closing Panels Onload

The following section explains how to edit the drill-down navigation to load will all panels closed. If you decide to make the the following edits you must re-apply them after installing ProductCart updates, as ProductCart updates may overwrite your customizations.

  1. Download the file CategorySearchFields.asp. Save a back-up copy of the file.
  2. Open the file in a text editor, such a notepad or Dreamweaver.
  3. Change the following code:
    Find: (around line 1091)
    
    if(col[<%=xSpryCount%>] == 'false')CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>",{contentIsOpen:false});
    else CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>");
    
    Replace with:
    
    if(col[<%=xSpryCount%>] == 'true')CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>",{contentIsOpen:true});
    else CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>",{contentIsOpen:false});
    
    Find: (around line 1100)
    
    CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>");
    
    Replace with:
    
    CollapsiblePanel<%=xSpryCount%> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<%=xSpryCount%>",{contentIsOpen:false});
    

  4. Save the file. Upload to the server.

Increasing the number of search values shown

By default, the Drill Down Navigation Widget in the storefront shows up to six items (search values) within each filter (custom search field). To increase this number (e.g. to 20):

  • Download the file “pc/CategorySearchFields.asp”
  • Make a backup copy of the file before your edit
  • Find: (line 275 & 296)
    if pcv_CountGroup > 5 then

  • Replace with:

    if pcv_CountGroup > 20 then

  • Save the file and upload it back to your server.

Troubleshooting

The following is a list of common reasons why the drill-down widget is not visible on the storefront:

  1. The Widget was not added to the header or footer, as described under the “Storefront” heading above.
  2. The Widget was not turned on, as described under the “Enabling the Widget” heading above.
  3. You have not assigned custom search fields to your products, as described under the “Add or Edit Categories” heading above.
  4. You have not assigned custom search fields to your categories, as described under the “Add or Edit Categories” heading above.
  5. You have completed the steps 3 & 4, but you have not assigned the products (with custom search fields) to categories (with custom search fields).

QR Code
QR Code Drill-down Navigation Widget (category search fields) (generated for current page)