Bereitstellung einer Breadcrumb und Navigation

Eine Navigation zu generieren und für das Templarte bereitszustellen, ist in TYPO3 dank TypoScript sehr einfach und mit wenigen Zeilen geschrieben.

Eine Navigation, also Menü, ist in TYPO3 nichts anderes wie ein Teil des Seitenbaums. Denn dieser umfasst alle vorhandenen Seiten in TYPO3 und gleichzeitig die Struktur. Denn der Seitenbaum ist hierarchisch aufgebaut.
Spontan könnte man meinen, dass man eine Kollektion aus diesen Seitenbaum mit PHP, also Extbase, erreichen muss. In den anderen Content Management Systemen ist das auch der Fall, bei TYPO3 ist es dank TypoScript anders.

Zu Beginn eines Problems oder Fragestellung, ist es immer hilfreich sich selbst Fragen zu stellen:

  1. Wie kann ich den Seitenbaum oder ein Teil davon auslesen?
  2. Wie bekomme ich diese Information in das Template?

Die Antwort von beiden Fragen ist:

TypoScript, TypoScript

Das zentrale Objekt in TypoScript für alle Fragen die sich darauf beziehen irgendwas mit dem Template zu machen ist das PAGE - Objekt, welches diese Ausgabe erzeugt. Eine Einführung hast du im ersten Schritt deiner TYPO3 Integrator Ausbildung durchgearbeitet.

Das PAGE - Objekt bietet bereits mit den Ausgabenummern und die Möglichkeit Inhalte nach Außen, also ins Frontend, zu transportieren. Das Template ist in TYPO3 mit dem TypoScript Objekt: FLUIDTEMPLATE konfigurierbar. Auch das hatten wir bereits im ersten Schritt der Ausbildung kennengelernt.
Das FLUIDTEMPLATE ist auch genau das Objekt was wir hier brauchen, denn wir wollen die Navigation in das Template integrieren.

Damit haben wir ein Teil der zweiten Frage beantwortet.

Wir bekommen wir also mit dem FLUIDTEMPLATE Informationen an das Template übertragen?

Dafür gibt es im FLUIDTEMPLATE folgende Eigenschaften:

  • settings
  • variables
  • dataProcessing

settings

Die settings - Eigenschaft ist ein assoziatives Array, um es in PHP auszudrücken. Wir können Schlüssel, also Namen, vergeben und diesen Schlüsseln Werte zuordnen. Diese Werte müssen vom einfachen Datentyp: String, also Text, sein. Natürlich lassen sich auch Zahlen, also Integer und Floats, übertragen. Jedoch werden diese in Strings umgewandelt. 

Die settings - Eigenschaft kann beliebig weit in die Tiefe geschachtelt werden. Das heisst, man kan in dem assoziativen Array noch weitere Arrays definieren. Dafür nutzt man den "." (Punkt) oder die geschwungenen Klammern ({}).

Beispiel 1:

# page.10 = FLUIDTEMLATE
page.10 {
  settings {
    navigations {
      main = Hier kommt das Hauptmenü
    }
  }
}

Beispiel 2:

# page.10 = FLUIDTEMLATE
page.10 {
  settings {
    navigations.main = Hier kommt das Hauptmenü
  }
}

variables

Die variables - Eigenschaft ist genau das gleiche wie die settings - Eigenschaft mit zwei Unterschiede. Der erste Unterschied ist, dass die Werte des assoziativem Array hier TypoScript - Objekte sein müssen. Diese Objekte werden dann, wie bei den Ausgabenummern, im Frontend ausgegeben. D.h. am Ende müssen diese Objekte auch Stringwerte zurückliefern, wie Text oder HTML Code. Der zweite Unterschied ist, dass man die variables nicht weitere untergliedern kann.

Beispiel:

# page.10 = FLUIDTEMLATE
page.10 {
  variables {
    navigationsMain = TEXT
    navigationsMain {
      value = Hier kommt das Hauptmenü 
    }
  }
}

Man könnte nun mit variables unser Problem lösen und alle Navigationselemente mit jeweils einem Objekt erstellen. Dieses Objekt kann dann vom Typ: USER sein und man hinterlegt ein eigenes Skript. Glücklicherweise gibt es ein TypoScript - Objekt welches explizit für die Generierung von Navigationen zur Verfügung steht.

Bevor ich dieses Objekt vorstelle, möchte ich hier auf die dritte Eigenschaft zunächst eingehen.

dataProcessing

Das dataProcessing - Attribut gibt es so in mehreren TypoScript - Objekten und ist eine Array, also Liste, von Stringwerten die allerdings Klassennamen mit vollständigen Namespace sein müssen. TYPO3 wird dann jeder dieser Klassen instanzieren und ausführen. Damit das gelingt, müssen diese Klassen von einer speziellen Klasse erben. Das ist dann die Aufgabe von dem TYPO3 Entwickler, diese bereitzustellen.
Ein weiterer großer Unterschied und Vorteil im Gegensatz zu den Eigenschaftgen: settings und variables, ist es, das wir hier auch PHP Arrays oder Objekte an das Template übergeben können.

Damit haben wir als TYPO3 Full Stack Entwickler völlige Freiheit, denn hier können wir beliebigen PHP Code ausführen und somit beliebige Informationen an das Template weitergeben. 

Mit welchem Objekt kann man nun Menüs erstellen?

Navigationen, oder Menüs, lassen sich in TYPO3 mit TypoScript über das Objekt: MenuProcessor sehr einfach erstellen und an das Template übergeben. Die Definition des Objektes inklusive Bereitstellung für die View lässt sich mit dataProcessing sehr einfach umsetzen. Deshalb ist die dataProcessing - Eigenschaft die beste Lösung um Navigationselemente zu definieren und an die View übergeben.

Wie geht das konkret?

Der MenuProcessor

Wir definieren ein MenuProcessor, wie folgt:

page.10.dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor

Der MenuProcessor ist eine Klasse, welche auf das alte TypoScript - Objekt: HMENU basiert. TYPO3 Veteranen werden dieses Objekt kennen. Dementsprechend hat es viele der Eigenschaften von HMENU gemein. Alles weitere zu Erstellung und Bereitstellung eines Menüs ist nur noch ein Spiel mit den Parametern vom MenuProcessor.

Kurse Erläuterung der vorgestellten Eigenschaften:

specialVordefinition der Art wie die TYPO3 Seiten gefunden werden
levelsID der übergeordneten Seite
asName der Variable in Fluid (Template)
expandAllWenn 1, dann werden die Seiten aus den Ebenen direkt geladen und mitgeliefert
includeSpacerSollen Seiten mit dem TYP: Seperator / Trenner mit einbezogen werden
titleFieldID der übergeordneten Seite
asDatenbankfeld welches als Seitentitel fungieren soll

Im Folgenden ein paar Konfigurationsbeispiele

Menü aus allen Unterseiten der angegebenen Seite

page.10.dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
page.10.dataProcessing.10 {
   special = directory
   special.value = <ID der übergeordneten Seite>
   levels = 2
   as = mainMenu
   expandAll = 1
   includeSpacer = 1
   titleField = nav_title // title
}

Breadcrumb Menü ab Ebene 1 erstellen

page.10.dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
page.10.dataProcessing.10 {
   special = rootline
   special.range = 1|-2
   as = breadcrumbMenu
   titleField = title
}

special.range: <Startebene>|<Endebene>

In diesem 2 Beispielen erzeugst du zwei Fluidvariablen: mainMenu und breadcrumbMenu, welche der TYPO3 Entwickler direkt in den Templatedatei nutzen kann. Die Übergabe an die View übernimmt der MenuProcessor automatisch. Die Fluidvariable ist ein Array mit allen nötigen Informationen um einen Link zu den TYPO3 Seiten zu erstellen inklusive URI.

Diesen Artikel als Video für Mitglieder

Lass mich dir persönlich zeigen, wie du eine Breadcrumb und Navigation TYPO3 konfigurieren kannst. Logge dich dazu ein oder Registriere dich kostenfrei für den Mitgliederbereich des TYPO3 Campus und erhalte Zugriff zu diesem Video und noch weitere Inhalte exklusiv für die Mitglieder des TYPO3 Campus.

Nachdem du dich eingeloggt hast, kannst du diese Seite neuladen.

Bis gleich.