Introduction
This document describes the tree representation of categories. With this hierarchical structure the shop manager can assign categories to different artifacts in the back office in one step.
The Catalog Category Tree Component is implemented as an ISML module for easy reuse. The module is called "CategoryTree" and is located in the sld_enterprise_app cartridge.
References
The Catalog Category Tree Component is based on the jQuery Dynatree Plugin.
Configuration
Parameter | Description |
|---|---|
treeid | The ID of the tree. |
selectmode | Defines if checkboxes or radio buttons are used. Possible values are single/multiple/multiplehier. When single is chosen, a tree with radio buttons is displayed. Values multiple and multiplehier will render a tree with checkboxes. When multiplehier is chosen, clicking the checkbox besides category will also select the category's child categories. |
minexpandlevel | Number of levels that are not expandable, default 1. |
root | Title of the tree, e.g. "Standard Catalog". |
autoselectdisablesubcategories | Defines if selected sub-categories of a category are displayed as disabled. |
autoselectsubcategories | Defines if sub-categories of selected categories will also be selected. |
categories | An iterator with Catalog Categories to be displayed. |
selectedcategories | An iterator that contains the UUIDs of categories already assigned to the object. |
disabledcategories | An iterator of UUIDs representing categories that should be displayed disabled. |
detailspagepipeline | The pipeline (PipelineName-PipelineNodeName) which views the category details page. |
detailspageparameter | The name of the parameter that holds the category UUID. |
parametername [1-5] | The name of the parameter which are added to the category URL. |
parametervalue [1-5] | The value of the parameter which are added to the category URL. |
lazycategories | An iterator of category UUIDs that are marked as lazy-loaded. If a category is marked as lazy-loaded, its child categories are not loaded when the tree is initialized. |
Using the jQuery Dynatree Plugin
The Catalog Category Tree Component is based on the jQuery Dynatree Plugin. Since the component is implemented as an ISML module, the integration of the plug-in consists of including jQuery and Dynatree libraries in CategoryTree.isml, adding a <div> element that encloses the tree and initializing the dynatree module when the page is loading. By initialization tree options are passed including jQuery and Dynatree libraries as plain JavaScript objects in curly braces. The tree options represent properties of the tree like the select mode and different event handlers. The tree is defined as an HTML list. The elements of the list have ID attributes with the UUID of single category and contain a link with display name of the category. The Dynatree plug-in transforms this HTML into a more complicated structure with checkboxes, expand button etc.
For more information consult the documentation.
Features
Set Category as Link
It is possible to make the category node a link. When the parameter disabledcategories is set, the li tag that represents the category node contains a tag that points to a pipeline defined in disabledcategories.
Lazy Loading
When a category has a large number of sub-categories, the loading of this category takes time and results in a large HTML file. To reduce the time for loading the page with the tree it is possible to mark the category as lazy-loaded. This is done by adding marker class lazy to the li element representing the category. The user of the CategoryTree module should pass an iterator of categories. See Configurations.
When a category is marked as lazy-loaded, the Dynatree will not create its children nodes. The children categories will be created only when the user expands the category. By expanding an Ajax request to dedicated pipeline is made. Details about this Ajax request are given in tree options (see Use of jQuery Dynatree Plugin) by defining onLazyRead.
Submitting Data
The UUIDs of all selected categories are submitted by default. If the parameter autoselectdisablesubcategories is set to true, only UUIDs of parent categories are submitted. This behavior is managed by jQuery delegate set to form element (see CategoryTree.isml).