Understanding a Magento Block – Vertical Navigation


There are a lot of tutorials out there for doing this. I wanted to poke in a little further to make it clear exactly what you are doing. I also wanted to point out that doing this by updating catalog.xml or page.xml is entirely wrong. 99% of these types of updates can be done using local.xml.

Create the file and directory:


If you need directions on creating a new theme or don’t know what your_theme is, visit this tutorial to create a Magento theme. Then add the following code to your new file:

<div class="block block-cart">
  <div class="block-title">
    <span><?php echo $this->__('Categories') ?></span>
  <div class="block-content">
    <ul id="nav_vert">
    <?php foreach ($this->getStoreCategories() as $_category): ?>
      <?php echo $this->drawItem($_category) ?>
    <?php endforeach ?>

What you have done is create a placeholder for your vertical navigation inside your theme’s navigation directory. You don’t have to call it vert_nav.phtml but what you call it is important, so take note.

Next, you will want to find your local.xml file and add the following:

<reference name="left">
  <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>

Now, what you’ve done here is defined the left reference for your template to be the vertical navigation. The block information says that it’s a navigation type block, it goes before everything in that reference when the markup is echoed, it gives it a name, and tells it where to look for this markup. You should note the importance of the name field.

The final thing to note is that there are several places you can put the left reference code. You could specify this in your <default> section, inside the root reference, you could specify it inside your specific page handle, or you could add it inside the CMS on the backend, under layout updates. Any and every should display the left, vertical navigation on your pages.