Dieser Text zeigt, wie man in Contao ein eigenes Inhaltselement mit eigenen Feldern erstellt, die Daten verarbeitet und im Frontend ausgibt. Als Beispiel soll ein Inhaltselement dienen, in dem man für ein Produkt eine Überschrift, ein Freitext, eine Liste mit Eigenschaften und einen Preis pflegen kann.

Zunächst legen wir einen Ordner unter TL_ROOT/system/modules/ an. Dieser enthält unsere Erweiterung. Alles was wir tun findet in diesem Ordner statt. Man kann für den Ordner einen beliebigen Namen wählen, in diesem Tutorial heißt er esitcontent. In dem Verzeichnis legen wir als erstes die obligatorischen Ordner einer Contao-Erweiterung an. Es ergbit sich folgende Ordnerstruktur:

Config

Damit wir unser Inhaltselement im Auswahlfeld Elementtyp auswählen können, müssen wir es in der Konfiguration bekannt geben. Hierzu erstellen wir die Datei config/config.php im Verzeichnis unserer Erweiterung, mit folgendem Eintrag: Der zweite Key des Arrays (esit) ist die Gruppe, in der der Eintrag angezeigt wird. Der dritte Key gibt den Namen der Palette an (myproduct). Wenn wir nun ein Inhaltselement aufrufen, sollte dort bereits der Eintrag angezeigt werden. Die Einträge werden später natürlich noch übersetzt, so dass dort brauchbare Begriffe stehen.

DCA

Nun erweitern wir das DCA der Tabelle tl_content, da in dieser Tabelle die Daten der Inhaltselemente gespeichert werden. Wir erstellen unsere drei Felder und eine entsprechende Palette: Wir verwenden in unserer Palette die erstellten Felden und einige die Contao mitbringt.

Languages

Bevor wir uns nun mit der Verarbeitung und Ausgabe der Daten beschäftigen, wollen wir noch die deutschen Begriffe einfügen. Wir legen die Datei languages/de/tl_content.php an. Damit auch der Eintrag und die Gruppe im Auswahlfeld Elementtyp einen vernünftigen Namen bekommen, legen wir noch die Datei languages/de/default.php an. Wir legen hier einen Eintrag, für die (in der Datei config/config.php angelegte) Gruppe [esit] und einen für die Palette [myproduct] an.

Autoload

Nun greifen wir etwas vor und erstellen einen Eintrag für unsere Ausgabeklasse in der Datei config/autoload.php. Den Namen haben wir bereits in der Datei config/config.php weiter oben festgelegt. Bei dieser Gelegenheit registrieren wir auch gleich das Template, welches wir später anlegen werden. In Zeile 23 registrieren wir unsere Klasse und in Zeile 31 das Template.

Die Ausgabeklasse

Nun erstellen wir die Ausgabeklasse unter classes/elements/ContentProduct.php. Da die Klasse von \Contao\ContentElement erbt muss sie eine Methode mit dem Namen compile implementieren. Diese ist für die Ausgabe zuständig. Ich splitte an dieser Stelle immer in zwei Methoden auf, eine für die Backend- und eine für die Frontend-Ausgabe. Die Methode genBeOutput ist für die Ausgabe im Backend zuständig. Uns interessiert aber mehr die Methode genFeOutput. Diese erstellt die Ausgabe für das Frontend. Die Eigenschaften werden von Contao als serialisiertes Array gespeichert. In Zeile 49 werden sie deshalb deserialisiert, damit wir sie nutzen können. Wir speichern das Array in $this->Template->arrProperties und haben dann im Template über $this->arrProperties zugriff darauf.

Template

Nun fehlt nur noch die Ausagabe. Wir legen das Template unter templates/ce_product.html5 an.

Wir können im Template einfach über $this gefolgt vom Feldnamen auf die im Inhaltselement eingegebenen Werte zugreifen (z.B. $this->productdescription für die Produktbeschreibung). Die Eigenschaften haben wir ja in unserer Ausgabeklasse deserialisiert und in der Variable arrProperties gespeichert. Nun gehen wir das Array in Zeile 19 durch und geben die Texte in Zeile 20 aus.

Das war schon der ganze Zauber. Hier zum Abschluss noch eine Übersicht der erstellte Dateien.