Mega Menu

Kernfunktionen und Anwendung

• Automatische Darstellung von Kategorien als Link mit Unterkategorien im Menupopup bis auf 2 Ebenen Tiefe
• Darstellung von Herstellern in einem Menupopup
• Integration der Suche in das Menu
• Menuinhalte mit eigenem HTML Inhalt im Menupopup
• Darstellung von einfachen Links als Menueintrag
• Einfache Kontrolle über die Darstellung der Popups
• Kompatibel mit iPhone und iPad

Der Tab "Mega Menu"

In diesem Reiter erstellst (Bereich "Eintrag erstellen") und verwaltest (Bereich "Verwaltung") Du deine Mega Menu Einträge. Folgende Felder sind beim Anlegen eines Eintrages zu beachten:

• Typ: Du hast derzeit die Möglichkeit, 5 verschiedene Typen von Menueinträgen anzulegen: Kategorie, Link (Einträge aus "CMS (Eigene Seiten)" im Shopbackend), Hersteller, Eigener Inhalt (siehe Reiter "Custom Content") und Suche. Je nach Auswahl ändern sich die Inhalte der nachfolgenden Selectbox: wählst Du beispielsweise Kategorie, erscheint eine Auswahl aller Kategorien im Shop, ergänzt durch die jeweilige Elternkategorie (Form: "Kindkategorie [Elterkategorie]").

• Sort: Die Sortierreihenfolge des Menueintrags. Ein niedriger Wert bedeutet hier, dass der Eintrag weiter vorn steht.

• Link: Hiermit kann ein optionales Linkziel des Eintrages (bspw: http://www.meineSeite.de) festgelegt werden. Dieses Feld erscheint nur bei einem Menueintrag des Typs Hersteller und Eigener Inhalt.

• Menueinträge pro Spalte: Wert, um im Template verschiedene Listenlängen für einzelne Menu - Unterpunkte zu realisieren.

• CSS Klasse: Individuelle CSS-Klasse für den Eintrag, um diesen bspw. im Template optisch hervorzuheben. Mit folgenden vordefinierten Werten kannst Du die Ausrichtung der Untermenus des jeweiligen Menueintrags bestimmen: menu-left (links), menu-center (zentriert), menu-right (rechts).

Der Tab "Einstellungen"

In diesem Reiter definierst Du allgemeine Einstellungen für Dein Mega Menu.

• Upload Ordner: wenn Du im Reiter "Custom Content" Bilder hinzufügen möchtest, kannst Du mit dieser Einstellung den Zielordner der Bilduploads definieren (ausgehend vom Shop-Root).

• Mega Menu erzeugen: soll das Menu erzeugt werden? Hilfreich ist diese Einstellung, wenn Du das Mega Menu auf einem produktiven Server testen und ggf. schnell deaktivieren möchten.

• Cache: wenn Du den Session Cache verwendest, wird das Mega Menu nur einmal pro Session für den Nutzer erstellt und fortwährend in der PHP Session Deines Shops gespeichert. Nach der vollständigen Einrichtung des Mega Menu Plugins empfohlen, um die Performance zu verbessern.
  Ab der Shopversion 3.18 steht dir auch die Möglichkeit zur Verfügung, den JTL Shop Cache zu benutzen, der dem Session Cache zu bevorzugen ist.

• PHP Query verwenden: Möchtest Du PHP Query verwenden, um das Mega Menu per Platzhalter (siehe nächster Punkt) in die HTML-Struktur Deines Shops zu schreiben? Solltest Du ein versierter Nutzer mit Programmierkenntnissen sein, möchtest Du evtl. auf PHPQuery verzichten und das Mega Menu selbst integrieren. Dir steht dann eine umfangreich befüllte Smarty-Variable zur Verfügung, die eine entsprechende Einbindung ermöglicht. "Normale" Nutzer werden jedoch PHPQuery verwenden.

• CSS Selektor und PHP Query Funktion: Um das Mega Menu einzubinden kannst Du ab Version 1.01 verschiedene Wege nutzen. Mit der Auswahl unter "PHP Query Funktion" stehen Dir 5 Methoden zur Verfügung, um den Inhalt des Mega Menus in Dein Template einzubringen. Der CSS Selektor gibt an, auf welchem Element Du diese Funktionen ausführen willst. Schau hier bitte in unserer Dokumentation nach, um weitere Hilfe zu bekommen.

• Bilder zum Hersteller anzeigen: Wenn du ein Herstellermenu verwendest, hast du hiermit die Möglichkeit, zu jedem Hersteller das entsprechende Bild anzeigen zu lassen.

• Standardsuche ersetzen: Gib hier an, ob die Standardsuche entfernt werden soll, wenn Du die Suche als Eintrag zum Mega Menu hinzugefügt hast.

• Standardsuche CSS Selektor: Gib hier den CSS Selektor der Standard JTL-Suche an, um diese zu entfernen. Der vorkonfigurierte Wert #search sollte im Tiny Template automatisch funktionieren.

• Responsive Menu (experimentell): Seit JTL Shop 3.17 gibt es das Responsive Theme. Wenn Du dieses nutzt und möchtest, dass sich das Mega Menu an die jeweilige Seitenbreite anpasst, aktiviere Option,

Der Tab "Custom Content"

Im zweiten Reiter kannst Du beliebige HTML-Inhalte anlegen, die Du dann als Eintrag in das Mega Menu integrieren kannst (siehe erster Reiter). Ein Beispiel hierfür wären Informationen zu Serviceleistungen Deines Shops oder auch Linkblöcke die Du automatisch nicht abgebildet bekommst.

Der Inhalt gliedert sich in zwei Bereiche: Unter "Custom Content erstellen" kannst Du neue Inhalte anlegen, die Tabelle im Bereich "Verwaltung" ermöglicht das Löschen und Editieren bereits angelegter eigener Inhalte.

Die Felder sind weitgehend selbsterklärend. Beachte: In der Textarea mit dem Titel HTML Content kannst Du beliebiges HTML verwenden.

Der Tab "Erweiterte Einstellungen"

Solltest Du einen Herstellereintrag in Deinem Mega Menu verwenden, hast in den erweiterten Einstellungen die Möglichkeit, bestimmte Hersteller aus der Liste der angezeigten Hersteller auszuschließen.

Erweiterte Funktionen

Das Mega Menu bietet Dir die Möglichkeit Kategoriebilder und Beschreibungen in bis zu zwei Ebenen Tiefe zu hinterlegen:

Anpassung von CSS Styles

Dieser Ordner kk_mega_menu/version/[Aktuelle Version]/frontend/template/css enthalt CSS Dateien die für das Megamenu notwendig sind.

Anpassung des Mega Menu Templates

Das Mega Menu Template befindet sich immer im Ordner kk_mega_menu/version/[Aktuelle Version]/frontend/template/template.tpl. Legst du in diesen Ordner eine Datei mit dem Namen template_custom.tpl, wird diese vom Megamenu geladen und verwendet. Solltest du also das Template anpassen wollen empfiehlt es sich die template.tpl zu kopieren und als template_custom.tpl abzulegen. Vor hier aus kannst du dann in der template_custom.tpl deine Änderungen vornehmen.

Weitere Informationen zur Anpassung von Templates findest du hier: Templateanpassung