Introduction

This tutorial shows how to use Velocity code on your catalog to create a item level navigation / menu based on a catalog group for Products.  This velocity code example is intended to be used with the Catalog templates:

Sample Code

#set($levelOnes = $group.getGroup('/products/').children)
  $formatHelper.sortByAttribute($levelOnes, 'sort_order', false)
    
	<div class="sidebar">
      <h3><a href="$baseUrl/products/">Products</a></h3>
      <ul>
        #foreach($levelOne in $levelOnes)
          <li><a href="$baseUrl$levelOne.path">$escape.html($levelOne.title)</a></li>
        #end
      </ul>
    </div>

Break Down

Now let's break down what each block is doing.

#set($levelOnes = $group.getGroup('/products/').children)
  $formatHelper.sortByAttribute($levelOnes, 'sort_order', false)

In the example above, #set is used to assign a value to a variable. The variable, $levelOnes can then be used in the template to output "$group.getGroup('/products/').children".

  We are using "$levelOnes" as our variable, but this can be anything for example $itemList would also work..

  Here "$group.getGroup('/products/').children)" we are telling the code what group we are building our the menu for, in this case it a group for "products".

<div class="sidebar">
      <h3><a href="$baseUrl/products/">Products</a></h3>
      <ul>
        #foreach($levelOne in $levelOnes)
          <li><a href="$baseUrl$levelOne.path">$escape.html($levelOne.title)</a></li>
        #end
      </ul>
    </div>

In this block the #foreach element allows for looping. In this case we are looping thought all the $levelOne in $levelOnes. Or to put is simply we are pulling all the child groups / sub group assigned under the group for "Products" and then out putting that here:

<li><a href="$baseUrl$levelOne.path">$escape.html($levelOne.title)</a></li>

This is then using the information we pulled from looping thought the group to provide both a URL to the page "$baseUrl$levelOne.path" and pull the title for the child group / sub group."$levelOne.title"