7.0

Table Of Contents

8.2 Creating a hierarchical tree

This example explains how to replace the default thumbnail view of the store front with a hierachical tree

view. The example combines PHP, CSS and makes use of the Treeview plugin for jQuery to hide and show

branches of a tree.

To install the example copy the template-storefront_overview.php from the storefront_tree_template folder to

the root of the default skin.

The store front using a hierarchical view (tree view).

The sample file contains links to external Javascript files and some custom code to generate the actual tree.

The Javascript file

This is the Javascript code stored in the feil "tree.js":

$(document).ready( function(){

$("ul.filetree").treeview({

collapsed: true

});

The code invokes the Treeview plugin once the browser has finished loading the page. The Treeview pluging

uses a standard HTML <ul> element (unordered list) to render the tree.

The template file

The actual code that retrieves the publication type and document list is placed in the contect block of the

template file (template-storefront_overview.php). The first section instantiates the Storefront. The getTree()

returns a hierachical array of the publication types and documents. In the following section we will access

each array item using the foreach function of PHP.