Built-in category navigation tools in ProductCart v4.x

Starting with v4, ProductCart can generate either a table-based (<table><tr><td>…) or list-based (<ul><li>…) file containing your category navigation links. This adds substantial flexibility to the way you are able to use, display, and style your category navigation menus.

In both cases, ProductCart will generate a static file to store your navigation links. This improves storefront performance (less database queries). Remember to rerun this feature when you add/edit categories (and products if included in the navigation): in many cases the ProductCart Control Panel will automatically remind you to do so.

Your ”header.asp” or ”footer.asp” file must include the file ”inc_catsmenu.asp” in order for the navigation to show. In addition, if you are using the unordered list with a third-party menu script (e.g. the Spry Menu Widget), you will also need to include the corresponding JavaScript and CSS files, which will take the list of links and turn it into a navigation menu.

When creating your navigation file you have three options that define the type and number of links:

• Include categories and sub-categories, but no products
• Include only top-level categories and their products
• Include categories, sub-categories, and their products.

If products are listed, you can specify a Maximum of products per category (e.g. 5).

A “More products…” link is automatically added if there more products in the category than the number specified here.

You can choose whether to create a navigation tree that uses relative vs. absolute links. Relative links simply point to the files in the same folder (the pc folder in your storefront). Absolute links use the full URL to the page (e.g. http://www.mystore.com/shop/pc/...).

Some search engine optimization experts say that your link structure should be consistent across your Web site. So if you are using absolute links elsewhere on your Web site, you should use absolute links in the store navigation as well.

If you are in doubt, use absolute links, but make sure that the URL that is generated by ProductCart is correct. If not, this might indicate that the file ”includes/storeconstants.asp” does not include a correct ”Store URL”.

You can organize the navigation links in two ways:

• This is how navigation links were always written in ProductCart v3.
• You can have ProductCart add a CSS class to the table cells, so that you have more control on how the links are shown.
• In the storefront, ProductCart will automatically add an “expand” and “collapse” icon to allow customers to expand or collapse the navigation menu when subcategories are present.
• You can change the icons used and/or you can use the CSS class to change the look of the links via CSS, but you have limited control on the overall look and operation of the navigation menu. For example, the menu is organized vertically and you cannot display it horizontally. The Unordered List option gives you more flexibility, if you need it.

Here is an example of a navigation menu that uses this option (you can see it at work here).

ProductCart will organize the links using an ordered list. For example:

<ul id="myStoreNav">
 <li><a href="viewCategories.asp?idCategory=227">Accessories</a>
  <ul>
   <li><a href="viewCategories.asp?idCategory=238">Gloves</a></li>
   ...

If you want to, ProductCart can “prepare” the navigation for use with the Spry Menu Widget.

• Prepare for SPRY menu bar.
  • Spry Horizontal Menu Bar
  • Spry Vertical Menu Bar
• None ( = do not “prepare” for Spry): you can control it and style it using any other navigation script that works with an unordered list (there are many). In this case, it might be useful to assign an ID and/or a class to the list:
  • Top UL tag ID
  • Top UL tag Class

Here is an example of the same menu shown above, but with an unordered list. Here the list is simply printed to the page, without any JavaScript to turn it into a dynamic menu.

Here the same list (as you can see the category names are the same) is used with the Spry Horizontal Menu Bar, using the default CSS that comes with it (of course, you can fully customize the way it looks):