Adding static or dynamic category navigation to your store design

ProductCart v3 makes it particularly easy to add fast-performing category navigation to your storefront. All you have to do is to include the following line of code whether you want the navigation to appear in either header.asp or footer.asp (keeping in mind that categories are displayed vertically).

<!--#include file="inc_catsmenu.asp"-->

That’s it. Just one line of code. ProductCart will take care of the rest. Specifically…

Using the Settings > Generate Navigation feature in the ProductCart Control Panel, you can create the category tree. You can recreate the tree whenever you add, remove or rearrange your categories, to keep it updated. For performance reasons, the category tree is saved to a static text file, so it can installed be loaded into your interface, without having to query the database.

This provides a huge performance boost on stores that contain a large number of categories and products, as the category tree is not built on the fly whenever a customer visits the storefront, but rather built once in the Control Panel, saved to a text file, and then used over and over again in the storefront, without performing any calls to the database.

ProductCart will generate two static files to store your category and/or product names and locations: one for retail customers (pc/inc_RetailCatMenu.inc), and one for wholesale customers (pc/inc_WholesaleCatMenu.inc). This is because the Control Panel contains a feature that allows you to hide some categories from retail customers, but show them to wholesale customers: so the navigation might be different for the two customer types.

This approach (using static files vs. dynamically generating the category tree every time) is used to eliminate redundant queries to the store database to collect the same information over and over. Navigation links remain the same until you change the category tree, and it is a waste of server resources to generate the category tree on the fly every time it is used in the storefront.

Log into the Control Panel, select Settings > Generate Navigation, and choose one of the following three options:

1. Include categories and sub-categories, but no products. Customers will be able to expand/collapse the category tree to see the sub-categories. No product links are shown in the category tree.
2. Include only top-level categories and their products. Only the categories listed in the root are shown in the navigation.
3. Include categories, sub-categories, and their products.

If you choose (2) or (3), you will also need to specify the Maximum number of products per category. A “More products…” link is automatically added if there more products in the category than the number specified here.

For added flexibility, you can add a CSS class to the navigation code: it is applied to the table cells that are generated when the category tree is built. Simply enter the name of the class in the corresponding input field.

By adding the line of code shown above to the section of your HTML document where you want the navigation to appear (e.g. a table cell), you will tell ProductCart to display the category tree there.

As mentioned above, you can assign a CSS class to the code that is generated by this feature to maintain control on the way the navigation links are displayed.

If you have a small product catalog and are not concerned about performance issues, you could use a different type of navigation scripts, which generates category navigation dynamically by querying the store database.

The following scripts were using in previous versions of ProductCart, and dynamically retrieve category information from the database. They are not recommended for busy stores or stores with a substantial amount of categories as it can negatively impact performance.

• Expand/collapse categories & subcategories
• Show categories & subcategories
• Show top level categories only