Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 Neos Grundkurs

Content Dimensions im Frontend

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier erfahren Sie, wie Sie dank Content Dimensions ein Sprachmenü realisieren können.

Transkript

Um Content Dimensions sinnvoll einzusetzen, benötigt man ein Menü im Front-End. Das wollen wir nun mal am Beispiel von Sprachen zeigen. Das heißt, wir wollen nun ein einfaches Sprachmenü erzeugen. Hierzu gehe ich in "Resources" und dort "Private" und dann "Typoscript". Hier gibt es mehrere Objekte Unser Sprachmenüe soll oben ins Hauptmenü integriert werden. Dazu mache ich Folgendes, ich schaffe hier eine neue Variable "LanguageMenu". Und die kriegt den Typ "Neos:" "DimensionMenu". Die Dimension selbst ist auch klar. Das ist die Dimension "language". Sie muss dem Namen der Dimension aus der Settings.yaml entsprechen. Und nun würde dieses Menü standardmäßig schon HTML ausgeben, wir wollen das HTML allerdings selber steuern. Deswegen geben wir hier auch einen Template-Pfad an. Den können wir uns auch von hier oben kopieren. So, und einfach am Ende die "Hauptmenue.html" ersetzen durch "Sprachmenue.html" Ich speichere das Ganze und lade die Datei hoch. So. Anschließend geht es in die Templates. Hier gibt es bisher schon das Hauptmenü. In diesem Hauptmenü muss das Sprachmenü nun als Unterelement eingefügt werden. Sie sehen hier im unteren Bereich bereits einen Bereich "languageSwitch" Diesen Bereich schmeiße ich hier nun mal raus, das war nur ein HTML- und CSS-Dummy, und füge an der Stelle die Ausgabe vom "languageMenu" ein. Damit das ganze auch als HTML eingefügt wird, verwende ich Format "raw", speichere das Ganze und lade auch diese Datei hoch. Anschließend erstellen wir hier eine neue HTML-Datei, und zwar "Sprachmenue". Diese Datei enthält natürlich nur einen Ausschnitt, deswegen machen wir das, was da vom Editor reinkommt, schon einmal leer und müssen nun noch unseren Namespace vornehmen. Der Namespace ist hier der ViewHelper. Aus diesen HTML-Schnipseln füge ich nun das pure HTML mal ein. In der Mitte ist das Ganze natürlich noch nicht korrekt, aber außenrum habe ich schon einmal alle benötigen Elemente. und zwar gibt es zum einen eine "ul", eine ungeordnete Liste, für das Menü an sich und darin ein Listenelement. Und nun ist es so, dass ich an erster Stelle das Element schaffen muss, was gerade die aktive Sprache ist, denn die soll immer oben angezeigt werden. Wie finde ich nun die aktive Sprache heraus? Eine einfache Möglichkeit ist, dass ich alle Menüelemente durchgehe. Menüelemente sind in diesem Fall in dem Array "items" und jeden davon gehe ich als "item" durch. Das ist dasselbe Vorgehen, wie man es auch von einem normalen Menü kennt. Also das Dimensions-Menü unterscheidet sich hier nicht. Diesen Inhalt haue ich hier mal weg. Anschließend brauche ich eine Bedingung, nämlich den sogenannten "item.state", also den Zustand des Menüelements, und dieser "item.state" muss gleich "current" sein, denn diese Sprache ist dann quasi die erste in unserer Reihenfolge. Und für die erste Sprache füge ich einfach mal direkt einen Link ein. Der Knoten des Links ist direkt "node", also die Eigenschaft "node" des Items. Als Klasse gebe ich noch "dropdown-toggle" an und hier habe ich nun noch mein Databinding, damit dieses erste Element auch dazu dient, das Ausklappmenü zu bedienen. So. Als zusätzliche Attribute will ich hier als Rolle eine Schaltfläche, die entsprechend auch noch nicht ausgeklappt ist. So. Innerhalb meines Knotens brauche ich nun eine Besonderheit, nämlich die Beschriftung. Das ist die Beschriftung unserer Content Dimension. So. Nun ist schonmal die Ausgabe des ersten Elementes fertig. Als nächstes folgen die untergeordneten Elemente Die benötigen eine eigene "unordered list" mit der Rolle "menu" und darin fügen wir jetzt dieselbe Schleife ein, wie oben. Wir können auch gleich die "if"-Konstruktion hier mitnehmen, nur dass wir nun alle Elemente ausgeben, die nicht aktiv sind. Schließen noch. und zu guter Letzt die For-Schleife selbst. Anschließend ist jedes der Sprachelemente nur ein "li" und innerhalb des LIs wieder ein "neos:link" auf einen Knoten. Der Knoten selbst ist ja Node-Eigenschaft von "item" und klar, der ausgegebene Wert ist der Sprachname, nämlich das "item.label". Und nun wird das Ganze noch geschlossen. Dann speicher ich die Datei und lade sie hoch. Beim Blick in den Browser sehe ich noch einen kleinen Fehler hier, Additional Attributes wurde nicht korrekt geschlossen. Prüfen wir noch mal schnell. Hier fehlt noch eine geschweifte Klammer. Speicher das Ganzes wieder, lade es erneut hoch, lade neu. Nun taucht hier rechts das Sprachmenü auf Ich bin gerade hier in der Standardsprache Englisch. Wenn ich nun auf Deutsch wechsle, erscheint hier hinter der URL "de" und Sie sehen hier unten auch den deutschen Text. Das heißt also, mit diesem einfachen Sprachmenü können Sie schon einen Sprachwechsel in ihre Website implementieren.

TYPO3 Neos Grundkurs

Entdecken Sie die Konzepte und grundlegenden Technologien des modernen Content Management Systems und sehen Sie, wie Sie eigene Projekte starten.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!