Skip to content
  • There are no suggestions because the search field is empty.

Generate Category Navigation

Overview


ProductCart generates a  list-based (<ul><li>…) file containing your category navigation links. A static file is generated 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.
 

Storefront Code


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 category navigation a third-party menu script, 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.
 

Create or update your storefront category navigation

To navigate to the following page, select Settings > Images & Navigation > Generate Category Navigation.

 

Choosing what to include
When creating your navigation file you have four options that define the type and number of links:
  • Include categories and sub-categories, but no products
  • Include categories, sub-categories, and their products
  • Include only top-level categories and their products
  • Include only top-level categories
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.
 
Absolute vs. Relative URLs
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". Find out how to change your store URL .
 
Category Navigation Menu Options
In ProductCart v5.0 and above, you can only generate navigation using unordered lists. This is a departure from the use of table rows and cells in v4.7 and before. Since v5.x now uses HTML5 and CSS3 instead of HTML tables for store layout, the category navigation has been updated to remove deprecated use of tables for navigation. 

Currently, there are 3 options that are provided for generating category navigation:
  • jQuery Horizontal Menu Bar
  • jQuery Vertical Menu Bar
  • Other
If you are using any of the ProductCart-included themes, you will be using the jQuery Vertical Menu Bar. If you have a custom theme with a horizontal navigation, you can select jQuery Horizontal Menu Bar. If you are using a custom menu plugin such as Superfish for your navigation, choose other. Please see the how-to on this topic for more advanced information.

Here is an example of a navigation menu that uses the jQuery Vertical Menu Bar. This particular example is shown with the "Basic Blue" theme that is the default in ProductCart v5.x.



Here is an example of the HTML that ProductCart generates for the unordered list: 
​<ul id="myStoreNav">
  <li><a href="viewCategories.asp?idCategory=227">Accessories</a>
    <ul>
      <li><a href="viewCategories.asp?idCategory=238">Gloves</a></li>
      ...