Category Navigation

This plug-in is used to create the category navigation elements typically found on the left side of many eCommerce sites. This plug-in manages display and navigation in an hierarchical listing of website categories. Each category links to the associated category page. This plug-in renders hierarchical HTML for which a designer should be able to provide the vertical or horizontal behavior and all other aspects of the look and feel by cascading styles and jQuery (minimal javascript to write).

Implementation Steps

Follow the steps below to add the plug-in to a website.

Step	Action
1	Channel Root Category - The category navigation plug-in lists sub-categories based on the root category you select. You do have an option to select "Template Assigned Root ID" where a designer can assign the root category of the category navigation instance based on logic within Smarty (Use this before the plug-in call {assign var="custom_root_id" value="1"} ).
2	Show Root Category in Breadcrumbing - Checking Yes, forces the breadcrumbing plug-in to show the Root Category first within the chain.
3	Sub Category Depth - You can specify the depth of the sub categories.
4	Only Show Flyout Menus - ** This allows you to show the sub categories as flyout menus.
5	Expansion Direction - Allows you to expand flyout menus. In order for your flyout templates to render, you must select an option other than None**. The original styles are not currently used (was limited to expanding to the right), you must use your own styles and jQuery (minimal Javascript).
6	Order By Field - Controls the order of categories listed. You have the option to order by Category Position / Category Name, Category Name, or Website Display Name.
7	Category Navigation Section Name - This is the section name used to uniquely identify the category navigation.
8	Category Holding Template - Provides you with a holding template to make changes around the hierarchical category listing. This holding template must contain {$inner_content}.
9	Category Template - You can configure a category template, which is used per first level of categories. You would typically place surrounding div or list tags, anchor tags, category URL, and a category website display name here. ***
10	Selected Category Template - Allows you to configure a selected category template on the first level of categories. Configured similar to the Category Template, but normally doesn't have an anchor tag and category URL. ***
11	Sub Category Class Name - A class for which you can write cascading styles off of, which identifies, within the rendered HTML, is part of the sub category.
12	Sub Category Template - * You can configure a sub category template, which is used per second level of categories. You would typically place surrounding div or list tags, anchor tags, category URL, and a category website display name here. ***
13	Selected Sub Category Template - * Allows you to configure a selected sub category template on the second level of categories. Configured similar to the Sub Category Template, but normally doesn't have an anchor tag and category URL. ***
14	Flyout Header Template - Allows you to specify the contents of the flyout menu header. See the attached notes. * **
15	Flyout Category Template - Allows you to specify the contents of the flyout menu item. See the attached notes. * *
16	Flyout Footer Template - Allows you to specify the contents of the flyout menu footer. See the attached notes. * **

NOTES:

* If you do not need to use some of the templates, use the "blank" template.

** Typically, flyouts allow you to render deeper category templates than the category templates and sub-category templates. Flyout menu templates typically have HTML within these templates, for which a designer should be able to provide the vertical or horizontal behavior and all other aspects of look and feel by cascading styles and jQuery (minimal Javascript). If Flyout Menu templates are controlled by designer HTML, CSS, and jQuery (minimal Javascript), the designer HTML, CSS, and jQuery will need to be modified, they can not be controlled, from a high-level, through the Category Navigation plug-in.

*** If you are using a flyout menu, your category templates, sub-category templates, and flyout templates must contain a {$flyout_menu}. Similar to placing within a holding template. It allows for the hierarchal HTML output (via templates) of categories.