Im wieder gefragt ist eine Navigation in Form einer Baumstruktur wie wir es von Dateiexplorern kennen. Wie man dies umsetzt möchte ich in in diesem Tutorial zeigen. Ich gege davon aus, dass JQuery bereits eingebunden ist.

Dazu erstellen wir einen neuen Block, erweitern die Klasse Mage_Catalog_Block_Navigation und binden das jQuery-Plugin jquery.treeview ein.

Umsetzung:

Als erstes downloaden Sie das jQuery-Plugin jquery.treeview und schauen Sie sich die Demos an. Wir müssen nichts anderes machen als die komplette Navigation als Listenelemente auszugeben.

1. jquery.treeview einbinden

- Kopieren die die Datei jquery.treeview.js in den Ordner skin/frontend/default/[Ihr Theme]/js.
– Kopieren Sie den Ordner images aus jquery.treeview nach skin/frontend/default/[Ihr Theme]/images/treeview.
- Ändern Sie die Bildpfade der jquery.treeview.css von image/ nach ../images/treeview/ und kopieren Sie die CSS-Datei in den Ordner skin/frontend/default/[Ihr Theme]/css.
– Öffnen Sie die Datei app/design/frontend/default/[Ihr Theme]/layout/page.xml und fügen Sie folgende Zeile in den Block <block type=”page/html_head” name=”head” as=”head”>.
<action method=”addItem”><type>skin_js</type><name>js/jquery.treeview.js</name></action>

Nachdem Sie den Cache geleert und Ihre Website neue geladen haben, sollten Sie im Sourcecode die Zeile für jquery.treeview.js finden.

2. Mage_Catalog_Block_Navigation erweitern

Um unsere Treeview anzeigen zu können habe ich die Funktion DrawTreeView erstellt. Diese erstellt die Navigation bis zu der gewünschten Tiefe maxLevel. Man könnte diese Funktion auch einfach “quik and dirty” in das Template kopieren. Ich möchte hier aber auch zeigen wie einfach es ist, Klassen in Magento zu erweitern.
Dazu erstellen wir folgende Dateien:
– app\etc\modules\Mxperts_Catalog.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Mxperts_Catalog>
      <active>true</active>
      <codePool>local</codePool>
    </Mxperts_Catalog>
  </modules>
</config>

– app\code\local\Mxperts\Catalog\etc\config.xml

<?xml version="1.0"?>
<config>

  <modules>
    <Mxperts_Catalog>
      <version>0.1.0</version>
    </Mxperts_Catalog>
  </modules>

  <global>
    <blocks>
      <catalog>
        <rewrite>
          <navigation>Mxperts_Catalog_Block_Navigation</navigation>
        </rewrite>
      </catalog>
    </blocks>
  </global>

</config>

– app\code\local\Mxperts\Catalog\Block\Navigation.php

<?php
class Mxperts_Catalog_Block_Navigation extends Mage_Catalog_Block_Navigation
{
    public function DrawTreeView($_categories, $_path, $_level, $_result = '', $_maxLevel=3) {

      $_level++;
      if ($_level > 1){ $_result .= '<ul>';};
      foreach($_categories as $category) {
        if ($category->getIsActive()) {
          $style = '';
          if (in_array($category->entity_id, $_path, True)) { $style = ' style="font-weight:bold"; '; }
          $_result = $_result . '<li id="tv_'.$category->entity_id.'"><a '.$style.'href="'.$this->getCategoryUrl($category).'"><span>'. $category->getName() .'</span></a>';
          if (($category->hasChildren()) && ($_level <= $_maxLevel)) {
            $_result = $this->DrawTreeView($category->getChildren(), $_path, $_level, $_result, $_maxLevel);
          }
          $_result .=  '</li>';
        }
      }
      if ($_level > 1) { $_result .= '</ul>'; };

      return $_result;
    }
}

3. Block treeview.phtml erstellen und einbinden

Erstellen Sie die Datei treeview.phtml mit folgendem Inhalt und kopieren Sie diese nach app/design/frontend/default/[Ihr Theme]/template/catalog/navigation.

<?php if (!Mage::registry('current_category')) return ?>

<script type="text/javascript">
		jQuery(function() {
			jQuery("#tree").treeview({
				collapsed: true,
		    unique: true,
				animated: "medium",
				persist: "location"
			});
		})
	</script>

<div class="box layered-nav">
    <div class="head">
        <h3><?php echo $this->__('Browse By') ?></h3>
    </div>
    <div class="border-creator">
      <ul id="tree" class="treeview-red treeview" style="background-color:white;">
        <?php echo $this->DrawTreeView($this->getStoreCategories(), $this->getCurrentCategoryPath(), 0, '' , 3); ?>
      </ul>
    </div>
</div>

Öffnen Sie die Datei app/design/frontend/default/default/layout/catalog.xml und fügen Sie im Bereich <!– Mage_Catalog –> unter  <reference name=”left”> folgende Zeile ein.
<block type=”catalog/navigation” before=”-” name=”treeview” as=”treeview” template=”catalog/navigation/treeview.phtml”/>

Nun sollte Ihre neue Navigation in Form einer Treeview, wie in unserem Demoshop, angezeigt werden.

Alle Files zum Download: treeview.zip