Bootstrap Accoridon als Nodetype in Neos hinzufügen

Neue Nodetypes in Neos sind einfach zu schreiben und bieten unendliche Möglichkeiten. Man sollte aber „klein“ anfangen um sich mit der Materie vertraut zu machen. Ein Beispiel auf Stufe 2 findet ihr hier:

Ein Bootstrap Accordion in Neos entwickelt man am einfachsten in 2 Schritten. Man benötigt für ein fertiges Accordion zwei Nodetypes: Einen Wrapper (AccordionWrapper) und die einzelnen Tabs (AccordionTabs). Die Accordion-Tabs alleine funktionieren schon gut, durch das zusammenfassen in einem Wrapper kann man schicke selbstschließende Accordions bauen.

Ich gehe hier davon aus, dass Bootstrap (CSS und JS) schon in die Neos-Seite eingebunden ist, so dass nur noch HTML erzeugt werden muss und der Rest separat (später) angepasst wird.

Die Nodetypes dürfen in jedem Paket eurer Wahl angelegt werden. Ich mache das oft in den Site-Packages direkt (wenn passend), sonst lege ich mir schnell ein allgemeines Package an.

Hier werde ich mit dem Package „Js.Bootstrap“ arbeiten, das folgendermassen in der Konsole angelegt werden kann:

./flow kickstart:package --package-key="Js.Bootstrap"

Vorarbeit

Um in den Nodetypes einen eigene Abschnitt zur Verfügung zu haben lege ich erst die Datei Configuration/Settings.yaml an, die befüllt wird mit

Das Anlegen der Gruppe bootstrap, in die wir unsere Elemente schmeißen ist hier zweitrangig. Viel wichtiger ist der autoinclude-Befehl, der unser Typoscript überhaupt in Neos einbindet.

1. Die Accorion-Tabs / Panels anlegen

Das die einzelnen Accordion-Tabs am besten als Bootstrap-Panels angelegt werden werden wir hierfür ein Panel-NodeType definieren.

In der Datei Configuration/NodeTypes.yaml (falls die Datei nicht existiert einfach anlegen) fügt man den NodeType erstmal ganz einfach ein:

Hierbei werden die beiden ganz einfachen Eigenschaften title und body hinzugefügt.

Das würde ich so mal stehen lassen und testen, ob im Neos schon der neue NodeType zur Verfügung steht (einmal Backend neuladen).

Ihr solltet einen neuen Bereich in der Nodetype-Auswahl vorfinden (bei mir „Bootstrap 3 Elements“) in dem ein Element „Panel“ angeboten wird.

Sollte das nicht passen prüft euren Code jetzt! 😉
Häufige Fehler bis zu dieser Stelle sind:

  1. Das Package ist nicht aktiviert (per Neos-Packageverwaltung oder via Konsole: ./flow package:activate --package-key="Js.Bootstrap")
  2. Einrückung ist nicht korrekt. YAML-Dateien müssen immer korrekt mit 2 Leerzeichen eingerückt sein!
  3. Sonstige Tippfehler (prüft einfach Zeile für Zeile nochmal)

Dann benötigen wir für das Panel noch 2 weitere Dateien. Natürlich ein Fluid/Html-Template und per Typoscript2 wird das Verhalten und die Properties des NodeTypes festgelegt.

Template-Datei

In der Datei Resources/Private/Templates/NodeTypes/Panel.html wird das Aussehen des Elements festgelegt.

Hierbei werden die beiden Bereiche title und body festgelegt. Diese werden wir gleich per Typoscript zuweisen.

Typoscript-Datei

In der TypoScript Resources/TypoScript/Root.ts2 Datei legt man folgende Eigenschaften fest:

Damit haben wir ein vollfunktionsfähiges Bootstrap-Panel, das wir noch beliebig erweitern können (z.B. mit den Bootstrap-Klassen default, info, warning, …).

Wrapping Element

Der Accordion-Wrapper ist etwas einfacher als das Panel-Element – auf den ersten Blick zumindest!

Den zweiten NodeType fügen wir in der Configuration/NodeTypes.yaml hinzu:

Damit wird ein neuer NodeType angelegt, der als Property eine weitere ContentCollection beinhaltet. Diese darf nur aus Js.Bootstrap:Panel-Nodes bestehen.

Als HTML-Template nutzen wir die neue HTML-Datei Resources/Private/Templates/NodeTypes/Accordion.html, die einfach aus einem Wrapper und der einem Mapper für die ContentCollection accordionTabs besteht:

Nun müssen wir noch – wie zuvor und damit bekannt – die TypoScript2-Zuordnung der Eigenschaften für den NodeType machen. Hierbei kommt eine Neuerung hinzu: Wir wollen für Panels, die in einem Accordion Node stehen ein anderes Template verwenden, um das Accordion-Verhalten zu gewährleisten:

Außerdem wird das Eltern-Element per EEL und Flowquery mit durchgereicht. Das HTML-Template legen wir an der im TS2 hinterlegten Stelle ab:

Fertig.


Kommentar: Das hier angelegte Accordion ist brauchbar, dennoch etwas beschränkt. Die folgenden Funktionen werden nicht gewährleistet, lassen sich aber nachbessern

  • Da Neos die innere ContentCollection (accordionTabs) selbst in einen eigene Wrap pakt ist der Bezug auf das Elternelement im Accordion nicht gewährleistet – das wird sich vllt. in kommenden Bootstrap Versionen ändern. Per Neos könnte man hier den Wrap um die Contentcollection entfernen, was nicht ganz „einfach“ ist, da er im Backend benötigt wird.
  • Die Inline-Editierbarkeit im Backend lässt zu wünschen übrig, da per JS ja das Accordion getoggelt werden soll. Abhilfe würden 3 Möglichkeiten schaffen: Im BE ein anderes JS einbinden, den Inspector zusätzlich für die title und body Properties einrichten, einen Editing-Mode für die Accordions („Accordions offen“) anlegen, der alle Inhalte darstellt und zum Editieren anbietet.