Magento Navigation als Treeview

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

5 Kommentare to “Magento Navigation als Treeview”

1. Alexander Fuchs sagt:

   8. Juni 2009 um 15:39

   Genau das habe ich gesucht, auch sehr schönes Beispiel. Setze mich mal an die Umsetzung -)

   Zum Antworten anmelden
2. Johannes Teitge sagt:

   8. Juni 2009 um 16:14

   Gerade habe ich noch alle Files zum Download eingefügt.

   Zum Antworten anmelden
3. ds_1984 sagt:

   13. Juni 2009 um 23:10

   Hallo Johannes, ich hatte in der Erstellung ein kleines Problem. Da ich lange Zeit am Ende kein sichtbares Ergebnis hatte, habe ich mir Gedanken gemacht woran es wohl liegt und konnte es lösen.

   Es wurde bisher noch nicht erwähnt, die “jquery.treeview.css” in der page.xml unterzubringen. Daher habe ich bei mir diese Anweisung unter die js Einbettung platziert & es hat zur gewünschten Darstellung geführt.
   War wie bei der “scroll_to_top.css” per action method “addCss”.
   Da kann man mal sehen wie hoch der Lerneffekt sein kann.

   Daher oben bitte noch nachsetzen für die anderen “Magentojünger”

   Ansonsten ein schönes kleines Tutorial in dem wieder viele Dinge untergebracht wurden. XML-Layouts, Eine eigene Template-Datei, JavaScript und nicht zuletzt die klevere Lösung mit dem eigenen Modul.

   Vielen Dank dafür!

   Zum Antworten anmelden
4. Daniel Vogelbacher sagt:

   16. Juni 2009 um 14:51

   Super Artikel und lässt sich schnell umsetzen!

   Allerdings funktioniert bei mir die Ausgabe des Treeviews nur dann, wenn ich

   if (!Mage::registry(’current_category’)) return

   entferne. Ist current_category nur ein Platzhalter (.z.B. für die Root-Kategorie) oder gibts einen anderen Grund warum da false rauskommt?

   Zum Antworten anmelden
5. Tobias sagt:

   15. Juli 2009 um 08:44

   Hallo,

   sehr schönes Tutorial. Vielen Dank!

   Allerdings fehlt meiner Meinung nach noch die Einbindung der jquery.treeview.css in die page.xml.

   Ansonsten werden nämlich die CSS-Einstellungen nicht übernommen.

   Den Kommentar meines Vorgängers kann ich übrigens bestätigen. Bei mir wird die Navigation auch nur dann angezeigt wenn ich die Zeile

   in der treeview.phtml auskommentiere.

   Zum Antworten anmelden