TYPO3 - Navigation mit DataProcessing

https://www.thomaskieslich.de/blog/132-typo3-8-menues-mit-fluid-und-menuprocessor-erstellen/

TODO

MenuProcessor Der MenuProcessor ist einer der neuen DataProcessoren und gibt ein gut auswertbares Menü Array and das Fluid Template weiter. Der Inhalte des Arrays ist über umfangreiche Optionen gut zu beeinflussen. Die meisten Einstellungen sind identisch zum TypoScript HMENU Objekt.

Erlaubte Settings vom HMENU: cache_period, entryLevel, special, minItems, maxItems, begin, alternativeSortingField, excludeUidList, excludeDoktypes, includeNotInMenu, alwaysActivePIDlist, protectLvar, addQueryString, if, levels, expandAll, titleField

Prozessor spezifisch sind: as, includeSpacer, dataProcessing

Ein paar Defaults gibt es auch:

levels = 1
expandAll = 1
includeSpacer = 0
as = menu
titleField = nav_title // title

Menu Item Array Der Menü Prozessor gibt für jede Seite im Menü ein Array mit folgenden Elementen zurück. Abhängig vom Menü Typ können diese unterschiedlich sein. Standard ist:

data = array mit allen Eigenschaften der Seite (Page Object) title = Titel oder Navigationstitel der Seite link = Link zur Seite target = Linkziel active = True wenn die Seite im aktiven Menü Zweig ist current = True wenn es die aktive Seite ist spacer = True wenn die Seite ein Menü Trenner ist children = array der Unterseite wenn welche vorhanden sind

TypoScript Settings Die Menü Objekte werden im page Objekt unter dataProcessing erstellt. Ein Beispiel aus dem Feature: #78672.

10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 10 {

  special = list
  special.value.field = pages
  levels = 7
  as = menu
  expandAll = 1
  includeSpacer = 1
  titleField = nav_title // title
  dataProcessing {
     10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
     10 {
        references.fieldName = media
     }
  }

}Copy Die Spezialität dieses Skripts ist es das die Dateien aus dem Ressourcen/Media Feld der Seite mit übergeben werden und im Template verwendet werden können. Eingebunden wird das ganze normalerweise im Fluidtemplate unter page.10.dataProcessing.

Screenshot der Menüs Screenshot der Menüs Hauptmenü mit Dropdown Das Menü besteht aus dem TypoScript für die Bereitstellung der Daten und dem Template. Die Klassen für das Menü sind für das Styling mit Zurb Foundation 6 benannt, können aber einfach an andere CSS Frameworks angepasst werden.

TypoScript einfach:

10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 10 {

 levels = 6
 as = menuMain

}Copy TypoScript mit Startverzeichnis und Trenner:

10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 10 {

 special = directory
 special.value = 1
 levels = 6
 includeSpacer = 1
 as = menuMain

}Copy Die Templates liegen bei mir im Partials Ordner unter Navigation. Um sie übersichtlich zu halten, gibt es extra Templates für den einzelnen Menü Eintrag und den Link.

Struktur der Partials Template erste Ebene:

<f:if condition="{menuMain}">

<f:for each="{menuMain}" as="mainItem"> <f:render partial="Navigation/Elements/Item" arguments="{item: mainItem}"/> <f:if condition="{mainItem.children}"> <f:render section="submenu" arguments="{submenu: mainItem.children}"/> </f:if> </f:for>

</f:if>Copy Wenn der Menü Eintrag Unterseiten (ifSub) enthält wird die submenu Section gerendert.

<f:section name="submenu">

<f:for each="{submenu}" as="subItem"> <f:render partial="Navigation/Elements/Item" arguments="{item: subItem}"/> <f:if condition="{subItem.children}"> <f:render section="submenu" arguments="{submenu: subItem.children}"/> </f:if> </f:for>

</f:section>Copy Im Item Partial wird berücksichtigt, ob für das Menü Element die Eigenschaften active, current oder spacer gesetzt sind.

<f:if condition="{item.spacer} || {item.current}"> <f:then>

{item.title} </f:then> <f:else if="{item.active}">

<f:render partial="Navigation/Elements/Link" arguments="{item: item}"/> </f:else> <f:else>

<f:render partial="Navigation/Elements/Link" arguments="{item: item}"/> </f:else> </f:if>Copy Im Partial für den Link werden die verschiedenen Möglichkeiten für das Link Ziel berücksichtigt. <f:if condition="{item.data.target}"> <f:then> <a href="{item.link}" target="{item.data.target}" title="{item.data.title}"> </f:then> <f:else if="{item.target}"> <a href="{item.link}" target="{item.target}" title="{item.data.title}"> </f:else> <f:else> <a href="{item.link}" title="{item.data.title}"> </f:else> </f:if> {item.title} </a>Copy Meta Menü Diese Menü wird häufig für Dinge wie Kontakt und Impressum verwendet. Die Page IDs für das Listen Menü kommen aus den Konstanten im Root. 20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 20 { special = list special.value = {$template.pidMeta} levels = 1 as = menuMeta }Copy Das Template ist sehr übersichtlich da die Partials für Item und Link wieder verwendet werden. <f:if condition="{menuMeta}">

<f:for each="{menuMeta}" as="item"> <f:render partial="Navigation/Elements/Item" arguments="{item: item}"/> </f:for>

</f:if>Copy Sub Menü In diesem Fall gibt es die Unterseiten der jeweiligen Hauptkategorie aus. Mit entryLevel = -1 nur die Unterseiten der aktuellen Seite. Das Template ist mit dem Haupt Menü nahezu identisch, nur das TypoScript ist anders.

TypoScript

30 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 30 {

 levels = 4
 entryLevel = 1
 expandAll = 0
 includeSpacer = 1
 as = menuSub

}Copy Template

<f:if condition="{menuSub}">

<f:for each="{menuSub}" as="mainItem"> <f:render partial="Navigation/Elements/Item" arguments="{item: mainItem}"/> <f:if condition="{mainItem.children}"> <f:render section="submenu" arguments="{submenu: mainItem.children}"/> </f:if> </f:for>

</f:if>

<f:section name="submenu">

<f:for each="{submenu}" as="subItem"> <f:render partial="Navigation/Elements/Item" arguments="{item: subItem}"/> <f:if condition="{subItem.children}"> <f:render section="submenu" arguments="{submenu: subItem.children}"/> </f:if> </f:for>

</f:section>Copy Sprach Menü Wenn das Menü vom Typ language ist, werden pro Eintrag zusätzlich die Eigenschaften available und languageUid ausgegeben. Wenn available gesetzt ist gibt es die aktuelle Seite in der gewünschten Sprache.

TypoScript

40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 40 {

 special = language
 special.value = {$template.languages}
 as = menuLanguage

}Copy Das Template ist etwas umfangreicher und sollte für die verwendeten Sprachen angepasst werden.

<f:if condition="{menuLanguage}">

<f:for each="{menuLanguage}" as="item">
• <f:switch expression="{item.languageUid}"> <f:case value="1"> <f:variable name="languageTitle">En</f:variable> <f:variable name="hreflang">en-GB</f:variable> </f:case> <f:defaultCase> <f:variable name="languageTitle">De</f:variable> <f:variable name="hreflang">de-DE</f:variable> </f:defaultCase> </f:switch> <f:if condition="{item.available}"> <f:then> <a href="{item.link}" hreflang="{hreflang}" title="{languageTitle}"> {languageTitle} </a> </f:then> <f:else> {languageTitle} </f:else> </f:if>
</f:for>

</f:if>Copy Breadcrumb Menu Dieses Menü basiert auf dem Menü Typ rootline. Die Formatierung erfolg mit Foundation Standards.

50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 50 {

 special = rootline
 special.range = 0|-1
 includeNotInMenu = 1
 as = menuBreadcrumb

}Copy Template

<f:if condition="{menuBreadcrumb}">

<f:for each="{menuBreadcrumb}" as="item"> <f:render partial="Navigation/Elements/Item" arguments="{item: item}"/> </f:for>

</f:if>