Modul VM2 Caterory-Menu/-Navigator

Dieser Beitrag bezieht sich auf das Modul VM2 Caterory-Menu/-Navigator für VirtueMart welches Sie über unseren Webshop herunterladen können, um Ihren Shop mit diesem leistungsfähigen Categorie-Menü-Modul auszustatten (siehe auch Demo-Projekt).

Der umfangreiche Funktionsumfang ist im Shop-Produkt beschrieben. Hier ist auch beschrieben für wen dieses Modul sinnvoll ist und was es mehr leistet als die VM-Standardlösung.

Nachfolgend werden weiterführende Information gegeben, die evtl. auftretetende Fragen beantworten sollen und z.T. auch über die einfachen gegebenen Konfigurationsmöglichkeiten des Modules hinausgehen.

Eigene farbliche Anpassungen der Kategorie-Elemente

In unserem Demonstrator ist zu sehen, dass Menüeinträge bei zunehmender Tiefe mit zunehmender Farbintensität gestaltet sind. Welche Farbe verwendet werden soll, wird in der Modulkonfiguration in der Gruppe Parameter für vertikale Liste unter der Option vert. Kat.menü Level-Farbe ausgewählt. Von mir wurden hier schon diverse Farbvarianten bereitgestellt. Wem das nicht genügt, und evtl. ganz gezielt sein Corporate-Design-Farben umsetzen möchte kann nachfolgende Tipps befolgen.

Prinzipiell wird das Categorie-Menü über eine eigene CSS-Datei formatiert. Diese CSS-Datei liegt im Verzeichnis modules/mod_vm_mdsk_category/assets/ und heißt wie in der Moduleinstellung unter Parameter für vertikale Liste in der Option vert. Kat.menü CSS-Datei zu sehen navigation.vlist.css.  Diese Datei könnten Sie nach Belieben modifizieren oder eben einfach eine eigenen modifiziert hier ablegen und in der Modulkonfiguration statt dessen eintragen.

Anmerkungen:

• • Im übrigen basiert diese CSS-Datei auf den CSS-Dateien für vertikale Listen wie Sie durch Hiebl Media für das Joomla-Template-Framework JYAML bereitgestellt werden - ein Template welches meine größte Wertschätzung genießt.
  • Im gleichen Verzeichnis gibt es auch eine dropdown.css welche den Style für den Kategorie-Navigator steuert.

Wem jetzt also die angebotene farbliche Vielfalt nicht genügt, kann zum einen über o.g. CSS-Datei Modifikationen vornehmen. Eine weitere Möglichkeit ist, die für die farbliche Gestaltung der Menüeinträge verwendeten transparenten PNG-Grafiken zu modifizieren. Im Verzeichnis /modules/mod_vm_mdsk_category/assets/img/ sind diverse PNG-Grafiken zu finden, eben für jede Farbversion eine PNG. Diese findet man auch wieder wenn man in der Modulkonfiguration unter der Option vert. Kat.menü Level-Farbe sich die Auswahlmöglichkeiten anschaut. Sie brauchen lediglich in eben dieses Verzeichnis eine weitere PNG in Ihrer Wunschfarbe ablegen, schon erscheint diese Grafik mit in der Auswahlliste für das Modul und kann somit als Konfigurationsoption gespeichert werden. 

Wer sich wundert wie die unterschiedlichen Farbintensitäten für die Menüeinträge zustande kommt, sollte sich bewusst machen, dass jede Unterliste ja in eine übergeordnete Liste eingebettet ist. Somit überlagern sich mit jeder weiteren Menütiefe die transparenten PNG zu einer immer intensiveren Farbe und wir erhalten recht einfach den gewünschten Farbtiefeneffekt. Der Vorteil dieser Vorgehensweise: Mit nur einer einzigen kleinen Grafik und geringstem Aufwand für Style-Anweisungen ist dieser Effekt umgesetzt.

Falls Ihnen dieser Tiefeneffekt nicht zusagt, müssen/können Sie die Styles Ihrer Menüeinträge komplett selbst über CSS-Anweisungen vorhehmen. Genau auf diese Flexiblität zielt das Modul ja ab. Über die vordefinierten Klassen und die Möglichkeit eigene zu benennen, lassen sich alle Wünsche erfüllen! Mein Ziel ist es gewesen, für evtl. schon implementierte Joomla-Templates das VirteMart-Kategorie-Menü so mit Klassen ausstatten zu können, dass sich gar keine eigenen Styles mehr benötigt, sondern sich aus denen des Joomla-Templates bedient und somit im gleichen Look erscheint.

Eigene CSS-Datei für die Vertikale Kategorie-Liste verwenden

Wie oben schon erwähnt kann alternativ zur Standard vlist-Navigations-CSS navigation.vlist.css im Optionsfeld vert. Kat.menü CSS-Datei auch eien eigene geladen werden. Dazu muss in diesem Feld der vollständige Pfad eingebeben werden, also z.B. modules/mod_vm_mdsk_category/assets/navigation.vlist.gantry.css oder templates/ihrTemplate/css/menulist.css.

Quasi gibt es 3 Möglichkeiten der Eingabe:

• Wird das Feld leer gelassen, wird keine Stylesheet-Datei geladen.
• Steht der Standardwert navigation.vlist.css drin, wird die mitgelieferte aus dem Verzeichnis modules/mod_vm_mdsk_category/assets geladen.
• Alle anderen Dateiangaben müssen hier dann immer vollständig mit Pfad angeben werden (ohne vorangestelltem Slash), auch wenn diese ebenfalls im assets-Verzeichnis liegen sollten.

Gestaltung wie in JYAML und Joomla-2.5 Menü bzw. Gantry-Template

Sowohl Joomla 2.5 als auch die beiden genannten Templates JYAML und Gantry liefern sehr gute Templates zur Anzeige von Menüs. Es ist sinnvolle zum eine wegen des einheitlichen Erscheinungsbildes der Website und der Shop-Seiten als auch wg. der gemeinsamen Nutzung der Style-Dateien mit gleichen Classen für die Kategorie-Menüs zu arbeiten wie diese auch in den Joomla oder o.g. Template-Menüs verwendet werden.

Genau hierfür bietet das Modul umfangreiche Anpassungsmöglichkeiten in dem jedem Menüelement (li, a, span, last, first, ...) auch zusätzlich abhängig von seinem jeweils aktuellen Status (active, current, ...) Style-Classe-Seperatoren gesetzt werden können.

In Vers. 1.0.5 wurde hinzugefügt, ob um den A-Tag eines Listenelements ein zusätzlicher Container gebaut werden soll. JYAML-Menüs erwarten hier ein span, Joomla und Gantry nicht. Deshalb gibt es die Option einzustellen ob keines, span oder div verwendet werden soll.

Sprachanpassungen z.B. für das Dropdown-Template des Kategorie-Navigators

Das Modul ist multisprachfähig und entspricht den üblichen Sprachkonfigurationsmöglichkeiten von Joomla 2.5/VM 2. Vorbereitet sind beispielhaft die Sprachen Deutsch und Englisch. Dafür gibt es also in den Sprachdateien entsprechende Übersetzungen. Über die bekannten zwei Wege (Modifikation oder Anlegen neuer Sprachdateien oder Nutzen des Joomla-Sprach-Overrides).

Speziell für das Dropdown-Template (Navigator) wurden Sprachkonstanten angelegt, die allerdings beispielhaft konkret auf die Anwendung der Pulldownlistenausauswahl als Navigator für die Fahrzeugauswahl ausgerichtet sind. D.h. die Labels für die 3 Kategorietiefen sind in folgender Tabelle mit ihren Sprachkonstanten dargestellt.

Nutzung der Mehrsprachigkeit durch die Modulkonfiguration

Prinzipiell muss die Mehrsprachigkeit im Projekt nicht zwingend genutzt werden. Wer ein Projekt betreibt, bei dem nur auf eine Sprachversion orientiert wird, kann sich die Konfiguration von Sprachkonstanten sparen. Hier soll das kurz gezeigt werden:

A) Einsprachigkeit

Über das Backendmenü > Erweiterungen > Module kann man in der Liste das Modul für den Dropdown-Selektor auswählen und findet dann rechts eine Gruppe "Parameter für den DropDown-Selector" und hierunter dann die Option "Labels der Listen". In dieses Feld kann man jetzt mit Semikolon getrennt die Begriffe für die Labels eintragen, z.B.

"Hersteller/Marke;Modellreihe/Bj.;Motorisierung"

Damit würden immer exakt diese Begriffe verwendet werden.

B) Mehrsprachigkeit

Für mehr sprachige Projekte trägt man in das Feld "Labels der Listen" die statt dessen die Bezeichner der Sprachkonstanten ein. Das sieht dann z.B. so aus:

Als Feld für 3 Kategorieebenen steht dann also (ohne Zeilenumbrüche): 
MOD_VM_MDSK_CATEGORY_DROPTMPL_LEVEL1;
MOD_VM_MDSK_CATEGORY_DROPTMPL_LEVEL2;
MOD_VM_MDSK_CATEGORY_DROPTMPL_LEVEL3

Die Nutzung der Sprachdateien

Oben genannte Sprachkonstanten finden wie wieder in den Sprachdatei z.B. für englisch und deutsch:

Abhänigig von der Version von VM gibt es unterschiedliche Ablageplätze der Sprachdateien - zeitweilig werden auch beide Varianten unterstützt, wg. der Kompatibilität. Zum eine z.B. für die engl. Version

• joomlaroot/language/en-GB/en-GB.mod_vm_mdsk_category.ini
• joomlaroot/modules/mod_vm_mdsk_category/language/en-GB/en-GB.mod_vm_mdsk_category.ini

Nutzen des Override von Joomla

Wer nicht diese genannten Dateien bearbeiten kann oder will oder neue Sprachdateien für weitere Sprachen anlegen will/kann, kann auch das neue Joomla-Sprach-Override-Feature benutzen. Das geht wie folgt:

1. Um das Override zu nutzen, geht man über das Backendmenü > Erweiterungen > Sprachen zum Registerreiter Overrides.
2. Für die Sprache die man neu anlegen will wählt man diese in der Sprachliste ganz rechts oben aus (Voraussetzung ist, dass diese Sprache schon als Inhaltssprache in Joomla angelegt ist.
3. Nach dem Klick auf den Button Neu erhält man dann einen Dialog in dem man für weitere Sprachen neue Overrides anlegen kann.
4. In das Feld "Sprachschlüssel" kommt unserer Konstantenname (s.Tabelle oben) hinein.
   In das Feld "Text" dann der übersetzte Inhalt für das Label.
5. Dieser Vorgang wird jetzt für jeden weiteren zu übersetzenden Sprachschlüssel und für jede Sprache weitere wiederholt.

Wenn Ihnen dieser Beitrag geholfen und viel Zeit gespart hat, zeigen Sie sich erkenntlich: Über einen Klick auf Google+1 oder Rückmeldungen freue ich mich. Zeigen Sie mir, dass sich die Mühe für die Beitragerstellung gelohnt hat. Schenken Sie auch den Produktwerbungen Ihre Beachtung, denn damit wird mein Aufwand für diese Beiträge refinanziert.