Hallo zusammen,
ich habe mich in den letzten Tagen damit auseinander gesetzt, wie ich eine vertikale Navigation (Menü auf der linken Seite) erstellen kann, damit das Menü ebenfalls responsive ist (Falls euer Theme responsive ist), mit der Einstellung:
2 spaltig mit Spalte links.
Ich möchte noch hinzufügen, dass ich nicht im geringsten programmieren kann und das, was ich hier schreibe unter Umständen für richtige Programmierer ein Dorn im Auge sein könnte, aber bei mir funktioniert es endlich und möchte es mit euch teilen, weil es dem einen oder den anderen helfen könnte.
Prinzip: Das Menü wird ausgetauscht. Blöcke die man weg haben will werden ausgeblendet und stattdessen die eigenen Blöcke eingefügt
Um eine schnellere Darstellung der Elemente auf der Website zu sehen, empfehle ich die Cache alle zu deaktivieren
Standard-Menü Layout:
1. Schritt 1: Blöcke definieren die weg sollen
1.1 Um die Pfadhinweise zu aktvieren geht man auf System -> Konfiguration -> Entwickleroptionen. Danach schaltet man oben den aktuellen Konfig Bereich auf "Main Website" und kann dann unter Debug -> Vorlagen Pfadhinweise auf "JA" setzen. Jetzt solltet ihr die Pfade auf eurer Seite sehen können
1.2 Definiert eure Blöcke.
Beispiel 1: Der Block "Kategorien" wird bei mir unter folgendem Pfad gespeichert:
app\design\frontend\Themename\Themeverzeichnis\template\catalog\navigation\sidenavigation.phtml
Wichtig dabei ist, dass ihr euch den namen der Datei aufschreibt, in dem Fall "sidenavigation.phtml"
1.3 Die .phtml Dateien werden in den XMLs Dateien unter (app\design\frontend\Themename\Themeverzeichnis\layout) aufgelistet, die das Layout aufbauen. In den XML Dateien werden den Blöcken (.phtml) Namen vergeben, und diese BLOCKNAMEN müssen wir ausfindig machen um diese dann raus zu coden.
1.3.2 Um die Namen schnell zu finden habe ich im Ordner /layout in das Suchfeld die Blocknamen eingegeben (Lokal auf dem Rechner).Bei der Suche muss die Einstellung "Suche nach Dateiinhalten" aktiviert sein.
Ich suchte nach "sidenavigation.phtml" welche in meiner Haupt- Theme-XML hinterlegt ist. Innerhalb der Datei suchte ich erneut nach "sidenavigation.phtml". Man findet dann eine Zeile die so aussehen kann:
<block type="catalog/navigation" before="-" name="sidenav" as="sidenav" template="catalog/navigation/sidenavigation.phtml"/>
Der Name den wir brauchen lautet: "sidenav" (Bei euch kann er anders heißen)
Wenn man alle BLOCKNAMEN ausfindig gemacht hat, kann man damit anfangen, die Blöcke raus zu coden
2. Schritt 2: Blöcke entfernen (Pfadhinweise können jetzt wieder deaktiviert werden)
Wir gehen nun auf die CMS Seite in der wir das Menü ändern wollen und geben unter Seitenlayout - XML für Layoutänderungen folgenden Code ein:
In meinem Fall, Blockname = sidenav
<default>
<reference name="left">
<remove name="BLOCKNAME" />
</reference>
</default>--> Speichern, ggf. Caches aktualisieren und die CMS Seite aktualisieren. Die Blöcke dürften nun entfernt worden sein und sollte so aussehen:
3. Schritt 3: Menü "programmieren" (HTML Kenntnisse vorausgesetzt)
3.1 Wir schreiben unser eigenes Menü und speichern dieses als .phtml ab. Je nach Template (so denke ich) kann der Code anders aussehen. Ich habe "sidenavigation.phtml" kopiert und den Bereich der Dargestellt wird abgeändert.
Der Standardcode für sidenavigation.phtml sieht so aus (Außer mein Kommentar):
<script type="text/javascript">
//<![CDATA[
function toggleMenu(el, over)
{
if (over) {
Element.addClassName(el, 'over');
}
else {
Element.removeClassName(el, 'over');
}
}
//]]>
</script>
<!-- ================== Tree View ================ -->
<div class="block block-side-nav-container">
<div class="block-title">
<strong><span><?php echo $this->__('HierEureÜberschrift') ?></span></strong>
</div>
<div class="block-content">
<div class="side-nav">
<!--------- DER BEREICH DER DARGESTELLT WIRD --------->
<ul id="category-treeview" class="treeview-side treeview">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
<!----------------- / BEREICH ENDE ---------------------->
</div>
</div>
</div>
Geänderte Dinge:
- Überschrift
- Inhalt (Bereich der dargestellt wird) durch eigenen ersetzen
--> Speichert die Datei in einem Verzeichnis eurer Wahl. Bei mir: template\navigation\customer_navigation.phtml
3.2 XML Datei schreiben
Unter Themeverzeichnis\layout speichert ihr eine XML Datei ab Name.xml
<layout version="0.1.0"> <default> <reference name="left"> <block type="catalog/navigation" name="customer_nav" template="navigation/customer_navigation.phtml"> </default> </layout>
- "Name" = Blockname ..kann beliebig gewählt werden, bei mir: "customer_nav"
- Template: Pfad zu eurer .phtml Datei
3.3 Dateien in die richtige Verzeichnisse hochladen (ggf. Verzeichnisse erstellen)
4. Schritt 4: Block einblenden
Wir blenden den eben erstellen Block ein, indem wir unter XML für Layoutänderungen folgendes eingeben:
<reference name="left"> <block type="catalog/navigation" name="customer_nav" template="navigation/customer_navigation.phtml"/> </reference>
Zusammen sieht der Code im XML Bereich so aus:
<default>
<reference name="left">
<remove name="sidenav" />
</reference>
</default>
<reference name="left">
<block type="catalog/navigation" name="customer_nav" template="navigation/customer_navigation.phtml"/>
</reference>5. Schritt 5: Alles speichern, Caches leeren, Seite aktualisieren und hoffen dass es wie bei mir geklappt hat:
So ich hoffe dass das für jemanden nützlich sein kann. Falls ich gravierende Fehler gemacht habe, bitte ich die echten Programmierer gnädig zu sein 
Ansonsten, viel Spaß und viel Erfolg
LG
Saki
