Mit Fluid lässt sich viel Logik aus Typoscript und PHP in die Frontend-Templates auslagern. Aber auch Fluid sind Grenzen gesetzt. Für Funktionalitäten, die nicht nativ in Fluid vorhanden sind, gibt es die TYPO3 Erweiterung vhs (das External Manual der Erweiterung findet ihr hier). Diese wurde 2012 das erste Mal im TER bereitgestellt und zählt mittlerweile über 30.000 Dowloads. Ich setze die Erweiterung mittlerweile selbst in fast jedem Projekt ein.
Einmal über den Extensionmanager installiert, lässt sie sich fast sofort im Template verwenden. Hierzu muss man lediglich den Viewhelper über den Namespace im Template bekannt machen. Das kann man auf zwei Arten erledigen.
Einbindung 1:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<!-- Your code -->
Einbindung 2:
<div xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
v:schemaLocation="https://fluidtypo3.org/schemas/vhs-master.xsd">
<!-- Fluid goes here -->
</div>
Und schon kann man loslegen. Aber für was braucht man die Erweiterung? Für alles, was man sonst über Typoscript lösen und erst dann dem Template übergeben würde. Aus meiner Sicht lassen sich manche Anforderungen nicht so leicht im Typoscript erledigen. Weiterhin ist aus meiner Sicht die Lesbarkeit von FLUID für Einsteiger besser geeignet.
Beispiel 1:
Gruppierte Ausgabe einer Liste
Im folgenden Beispiel soll eine Nachrichtenliste (aus der Erweiterung „news“) ausgeben werden. Diese Liste soll durch den jeweiligen Monat, in dem sie einstellt wurde, getrennt werden. Also eine klassische Gruppierung nach Monat.
Dazu merkt man sich der Einfachkeit halber einfach den Monat der Nachricht und vergleicht ihn mit der vorherigen. Geht aber nicht. Die nächste Variante wäre es den Monat der aktuellen News in einer Variablen zu speichern und beim nächsten Durchlauf mit dem aktuellen Monat zu vergleichen. Geht so aber auch nicht (eine Korrektur falls diese Aussagen nicht stimme ist erwünscht). Dafür kann vhs aber Variablen anlegen, speichern und abrufen.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:variable.set name="oldMonth" value="00"></v:variable.set>
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:if condition="{oldMonth} != {f:format.date(date: newsItem.datetime, format: 'F')}">
<div class="event-month row">{f:format.date(date: newsItem.datetime, format: 'F')}</div>
</f:if>
<f:render partial="List/EventsItem" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
<v:variable.set name="oldMonth" value="{f:format.date(date: newsItem.datetime, format: 'F')}"></v:variable.set>
</f:for>
Zunächst wird per variable.set der Monatsname auf 00 gesetzt.
Innherhalb der for-each-Schleife wird nun der Monat der zuvor gesetzten Variablen mit dem Monat der aktuellen Nachricht verglichen. Ist dieser nicht identisch, wird der Monatsname ausgegeben. Anschliessend wird die Variable auf den Monat der aktuellen News.
Beispiel 2:
Ausgabe der Inhalte aller untergeordneten Seiten (Onepager)
Mit ein paar Zeilen lässt sich ein einfacher Onepager einrichten, der alle Inhalte der (in erster Ebene) untergeordneten Seiten ausgibt.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:page.menu pageUid="{pageUid}" as="sections">
</v:page.menu>
pageUid übermittelt dem Viewhelper, welche Seite aus dem Menu ausgegeben werden soll. Das kann man statisch hinterlegen oder über Typoscript dynamisch an die variables des Templates übergeben.
Nun durchläuft man in einer Schleife alle Menupunkte, zur Kontrolle kann man schon mal den Titel der jeweiligen Seite ausgeben.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:page.menu pageUid="{pageUid}" as="sections">
<f:for each="{sections}" as="section" iteration="iteration">
<div class="section" id="section{section.uid}">
<div class="content">
<h2>{section.title}</h2>
</div>
</div>
</f:for>
</v:page.menu>
Jetzt benötigt man nur noch den in der jeweiligen Seite gepflegten Inhalt. Auch hier gibt es ein kleines Helferlein namens „content.render“ in der Erweiterung. Durch Übergabe der pageUid werden die Inhalte der Seite ausgelesen und gerendert. In meinem Fall hat das Template nur eine Spalte im Backend, weswegen keine zusätzlichen Argumente übergeben werden.
Das fertige Snippet kann dann so aussehen:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:page.menu pageUid="{pageUid}" as="sections">
<f:for each="{sections}" as="section" iteration="iteration">
<div class="section" id="section{section.uid}">
<div class="content">
<h2>{section.title}</h2>
<v:content.render pageUid="{section.uid}" />
</div>
</div>
</f:for>
</v:page.menu>
Natürlich kann die Erweiterung noch Vieles mehr als nur die beiden oben genannten Beispiele – ein Blick in die Dokumentation der Extension lohnt sich eigentlich immer.