Concept - Catalog Category Tree Component

Product Version

7.3

Product To Version

 

Status

final

1 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.

2 References

The Catalog Category Tree Component is based on the jQuery Dynatree Plugin.

3 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.

4 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.

5 Features

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.

5.2 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.

6 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).

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Support Tickets