Changing the Sample Templates

This document describes one of the techniques you can use to customize the appearance of the Navigator Control. The Navigator Control uses 5 templates to format the items you see in the menu. Four of the templates are used to format categories and one template is used to create a separation between categories.

Template	Descriptions
CategoryTemplate	This template is used to format top-level categories. In Tree mode, top-level categories are the sub-categories of the TopCategory. If you set TopCategory to 0 (also the default) then the top-level categories will be the same as the ones you created in your store. In Branch mode, top-level categories are the current categories. There may be more than one (see the ProductCategories property if you want to force a single current category).
SelectedCategoryTemplate	This template is used to format the top-level categories that are selected. Normally, Navigator will only select the single category corresponding to the current page or search results used to reach the current page. However, if the current page is a product detail page and the product is in multiple categories and the Navigator Control can not determine which of those is appropriate, then all of the product categories will be selected. Furthermore, if you set HighlightPath ="True", then the Navigator Control will select all of the categories leading up to the current category. In Branch mode, top-level categories are the current categories.
SubcategoryTemplate	This template is used to format all categories below the top-level categories.
SelectedSubcategoryTemplate	This template is used to format the subcategory that is selected.
SeparatorTemplate	This optional template is can be used to insert HTML between each item in the menu.

Inside each template, you can include special code that will be filled in by the Navigator Control using information about the item. This substitution process is called binding. Each menu item is a NavigatorItem and is referred to as "Container" in the template. Each NavigatorItem has these properties which you can use in the template:

NavigatorItem Property	Type	Description
CategoryID	Number	The category ID of the current category.
Description	Text	This is a copy of the Description field from the Categories table. StoreFront does not use this field.
DisplayName	Text	The name of the Category.
ImagePath	Text	This is a copy of the ImagePath field from the Categories table. StoreFront does not use this field.
ItemType	NavigatorItemType	The type of the item: one of Category, Subcategory or Separator.
Level	Number	The level within the control (top-level items are 0).
Link	Text	The url of the page to be displayed.
ProductCount	Number	The number of products that are assigned to the current category.
Selected	True or False	True if the item corresponds to the current categories.
TotalProductCount	Number	The number of products that are assigned to the current category and all it's children.

Using these properties, you can build very sophisticated templates. Three samples are included (in the Controls directory of the distribution and copied to the Control directory of your store) which show you how to use these properties in a template:

Sample control	Description
TextNavigator1.ascx	Displays each category and subcategory name as a link inside a box. Sub-categories are indented by calculating padding based on the level. This is the sample that is installed if you follow the installation instructions.
TextNavigator2.ascx	This sample is similar to TextNavigator1.ascx except that all of the properties listed above are displayed.
TextNavigator3.ascx	This sample is similar to TextNavigator1.ascx except that the TotalProductCount is displayed after the category name.

Example

In this walk through, we will modify the top-level category template (<CategoryTemplate>) of TextNavigator1.ascx to display the TotalProductCount after the category name. You can check your work by comparing it to TextNavigator3.ascx which does the same thing for all templates.

Open Controls/TextNavigator1.ascx in an editor and find this code:

<CategoryTemplate>
   <div class='CategoryBox' 
      onclick='window.location="<%# DataBinder.Eval(Container, "Link") %>"' 
      onmouseover='this.className="OverCategoryBox";' 
      onmouseout='this.className="CategoryBox";'>
      <%# DataBinder.Eval(Container, "DisplayName") %>
   </div>
</CategoryTemplate>

Add the line shown in red below to display the TotalProductCount after the category name.

<CategoryTemplate>
   <div class='CategoryBox' 
      onclick='window.location="<%# DataBinder.Eval(Container, "Link") %>"' 
      onmouseover='this.className="OverCategoryBox";' 
      onmouseout='this.className="CategoryBox";'>
      <%# DataBinder.Eval(Container, "DisplayName") %>
      (<%# DataBinder.Eval(Container, "TotalProductCount") %>)
   </div>
</CategoryTemplate>

Save your change and close the file.
Copy the file to the ssl/Controls directory.

Open a store page and you will see the effect of your changes.

Version 1.3.2