JavaScript-Framework VueJS in Contao CMS nutzen
Für ein kürzlich zu realisierendes Projekt bestand eine Teilaufgabe darin, einen Produktkatalog zu realisieren, welcher später zu einem Online-Shop umgebaut werden kann. Die Herausforderung lag in der Tatsache, dass die einzelnen Produkte nicht in Contao CMS gepflegt werden sollen, sondern in einem zentralen Produktverzeichnis eines Fremdanbieters. Der Anbieter bietet eine Schnittstelle an, um Daten in Form von XML oder JSON abzurufen. Diese Gegebenheiten waren für mich der Grund den Produktkatalog als VueJS-Applikation zu realisieren und diesen in Contao zu implementieren. Hierbei wurde ich mit ein paar Problemen konfrontiert, deren Lösung ich in diesem Beitrag beschreiben möchte.
JavaScript-Framework in Contao
Grundsätzlich kann natürlich jedes JS-Framework in Contao eingebunden werden. Waren es früher noch Bibliotheken wie jQuery oder MooTools sind es heutzutage React oder VueJS. Diese bieten den Entwicklern noch mehr Möglichkeiten vom einfachen ein- und ausblenden von Inhalten bis hin zum Rendern einzelner Views, welche über eine eigene URL angesprochen werden können. Weiter haben sich die Voraussetzungen, mit JavaScript ganze Applikationen zu bauen, deutlich verbessert. Mit ES6 und speziell den ES6-Modules können nun gekapselte Module für einen bestimmten Anwendungsfall zur Verfügung gestellt werden und durch das Zusammenstecken weiterer Module entsteht eine saubere Applikation.
Konzeption der Applikation
Meine Anwendung soll, wie schon beschrieben, innerhalb einer Contao-Seite laufen und eine Übersicht aller Produkte der jeweiligen Kategorie sowie eine Detailansicht eines einzelnen Produktes darstellen. Die Klickpfade sollen als URL angezeigt werden, so dass Besucher die Browsernavigation zum Vor- und Zurücknavigieren verwenden können oder bspw. um Produkte direkt zu Verlinken. Das Neuladen der Website sollte die Applikation auch mitmachen.
Stolperstein: Routing der Applikation
Für VueJS gibt es den VueRouter, welcher genau für die oben genannten Anwendungsfälle entwickelt wurde. Das bedeutet, dass nicht Contao sondern der VueRouter sich um das Routing innerhalb der Applikation kümmert. Hierfür musste ich in Contao ein paar Einstellungen anpassen.
Zuerst habe ich eine neue, reguläre Seite mit dem Namen "Products" angelegt, in welche die Applikation geladen werden soll. Den Seitenalias habe ich abgeändert, was jedoch nur aus persönlicher Präferenz heraus geschehen ist. Diese Seite ist ein Kindelement der Seite "Produkte" und ist im Menü versteckt, damit die beiden Seiten "Products" und "Produkte" nicht gleichzeitig erscheinen.
Anschließend habe ich die übergeordnete Seite "Produkte" zum Seitentyp "Externe Weiterleitung" abgeändert und als Link-Adresse den zuvor angepassten Seitenalias der Seite "Products" eingetragen. Dadurch zeigt sich Contao nicht mehr für das Routing verantwortlich und die VueJS-Applikation kann dies von dort an übernehmen.
Im VueRouter kann für das Routing zwischen den Modis hash
(Standard), history
und abstract
gewählt werden. Ich nutze den Hashmode und habe aus diesem Grund den Eintrittspunkt in der Link-Adresse der Weiterleitungsseite schon dementsprechend durch den Hash #/products
ergänzt.
Anpassungen innerhalb der VueJS-Applikation
In der VueRouter-Instanz habe ich dem Property base
den Wert des oben geänderten Seitenalias produkte/index.html
gegeben. Weiter müssen natürlich die für die Applikation benötigten Routen dem routes
-Property übergeben werden, so dass VueRouter das Routing übernehmen kann.
Templates
VueJS bietet mehrere Möglickeiten für das Templating an. Ich habe mich für die X-Templates entschieden. Hierfür wird das Template in ein Script-Element vom Typ text/x-template
umschlossen. In VueJS wird das Template über die Script-Element-ID referenziert und geladen. Die Templates sind im Contao-Template-Verzeichnis abgelegt und werden über das Insert Tag file
in die Seite eingebunden. Das ist sicherlich nicht die schönste Art, aber über diese Methode können im Template auf Werte von Contao zugegriffen werden und das Template lässt sich direkt im Contao Backend bearbeiten.
Zusammenfassend
Contao lässt sich problemlos durch moderne JavaScript-Frameworks erweitern. Es sind lediglich ein paar Kniffe notwendig, damit innerhalb der Applikation navigiert werden kann, aber ausgenommen davon, kann eine bestehende Applikation nach kürzester Zeit implementiert werden. Solche Art von Applikationen bieten sich gerade dann an, wenn die benötigten Daten extern liegen und nicht doppelt gepflegt werden sollen. jQuery werden die neuen Libraries und Frameworks in Contao kurz bis mittelfristig nicht ersetzen können, da zu viele Erweiterungen davon abhängig sind.