T3 Campus T3 Campus

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.

Wie 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 heißt, man kann 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 assoziativen Arrays 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 ein 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 Eigenschaften: settings und variables, ist es, dass 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 = menu

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:

special Vordefinition der Art, wie die TYPO3 Seiten gefunden werden
levels ID der übergeordneten Seite
as Name der Variable in Fluid (Template)
expandAll Wenn 1, dann werden die Seiten aus den Ebenen direkt geladen und mitgeliefert
includeSpacer Sollen Seiten mit dem TYP: Seperator / Trenner, mit einbezogen werden
titleField ID der übergeordneten Seite
as Datenbankfeld, welches als Seitentitel fungieren soll


Im Folgenden ein paar Konfigurationsbeispiele

Menü aus allen Unterseiten der angegebenen Seite

page.10.dataProcessing.10 = menu
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 = menu
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 das TYPO3 Backend in einem Video vorstellen. Logge dich dazu ein oder registriere dich kostenfrei für den Mitgliederbereich des T3 Campus und erhalte Zugriff zu diesem Video und noch weitere Inhalte exklusiv für die Mitglieder des T3 Campus.

Nachdem du dich eingeloggt hast, kannst du diese Seite neu laden.

Bis gleich.

Bereit mehr zu lernen?

Dann komme in meine TYPO3 Onlineschule

Als Mitglied des T3 Campus für TYPO3 Schulungen erhältst du eine einzigartige Lernplattform, um professionelle Webseiten mit TYPO3 zu erstellen. Egal, ob du ein Einsteiger, Umsteiger oder bereits erfahren bist – hier findest du die passenden Lernvideos für dich.

Kevin Chileong Lee

Gründer vom T3 Campus, TYPO3 Experte mit 10+ Jahren Erfahrung, TYPO3 Liebhaber.

Ich helfe dir dabei, deine Projekte in TYPO3 umzusetzen.

Insbesondere für TYPO3 Einsteiger biete ich zahlreiche kostenfreie Tutorials und kostenpflichtige Kurse rund um TYPO3 an.
Damit kannst du in wenigen Tagen auch ohne Vorkenntnisse deine erste TYPO3 Webseite erstellen und Erweiterungen programmieren.

Auf meinem YouTube-Kanal findest du viele praktische Beispiele und Videotutorials als auch allgemein Videos zu diversen TYPO3 Themen.

Neber den TYPO3 Tutorials und Kopiervorlagen, schreibe ich auch Artikel auf meinem Blog über diverse Themen und Fragen, die die meisten TYPO3 Einsteiger, haben.

Falls du ein TYPO3 Coaching suchst, dann stehe ich dir in einer 1:1 Trainingssession zur Verfügung.

Wenn du auf dem Laufenden sein möchtest über meine Projekte, dann abonniere den Newsletter.