9.2 Themes

9.2.10 Drop down WAE  <<  9.2.11  >>  9.2.12 Product list & Product spot 

9.2.11 Tree Structure WAE

The [Tree] WAE produces a treelike listing of the product groups. You can set the tree structure to be always displayed open, so that all the subgroups of the product group selected visible for the theme are always visible in the listing. The alternative is that only the group tree branch selected by the customer is visible in the structure. If the group selected by the browsing customer has subgroups, the WAE updates the pages they are on. At the same time, the first subgroups level opens, if the group tree structure has not already been set to be displayed open. If the selected group has products or an active description, the WAE opens/updates the Product list page. If the group has both subgroups and products, the WAE updates both pages (Product list and Tree structure).

Note! Tree structure cannot be used on the Top and Bottom pages.

Tree structure
Picture 9.35 : Tree structure

You can choose the product groups that are visible in the tree. Only subgroups that belong to the selected group are displayed.

You can also choose between using unordered lists and using a table based structure for the tree's output. Using unordered lists has the advantage that they can be styled in multiple ways with CSS and are thus more flexible. The table based output is easier to start with, because you can style the element directly from the WAE settings.

If your choise is 'use unordered lists without inline styling', you can use css style classes to style product group list:

  • "hassub" indicates that the group contains sub-groups

  • "open" indicates that the group is open (the group or a sub-group of the group is selected)

  • "sel" indicates that the group is selected

  • "normal" indicates that the group is not open or selected

  • "cat_#", where # equals group id. Class indicates group with id #

For example, if you want to style group, that has sub-groups, you should use following css class:
ul.ProductGroupTree li.hassub{
	here comes style description for the <li> element of the list
If you want to style <a> element of the <li> element, use:
ul.ProductGroupTree li.hassub a{
	here comes style description for the <a> element

In the Tab field, enter the number of characters that you want to be drawn in.

You can add a product group, an open product group and a product list icon into the tree WAE. When the product group has no subgroups, the product list icon becomes visible.

You can enter the address of the icon in the text field or choose from the default buttons in the drop down menu [Select].

Once you have made all the changes, click the Accept button.