jQuery, Prototype oder Scriptaculous in TYPO3 korrekt einbinden
JavaScript Bibliotheken wie jQuery, Prototype, Scriptacuouls oder Mootools bindet man am besten über die von TYPO3 mitgebrachten Funktionen zur Einbindung von JavaScript-Dateien ein. Früher habe ich Extensions für diese Arbeit verwendet, im Laufe der Zeit aber gemerkt, dass die Handhabung mit der Zeit zu unübersichtlich wurde, weil sich die Versionen zu schnell ändern und man jedes Mal sowieso auf die Kompatibilität achten muss, zudem andere Extension, die JavaScript-Bibliotheken wiederum voraussetzen diese eh nicht nutzen. Außerdem ist das Einbinden von diesen eine 5 Minuten-Sache und unterm Strich schneller als sich erst mal eine spezielle Extension zu besorgen.
Meine empfohlene Vorgehensweise:
- In TYPO3 eine Seite vom Typ „Ordner“ anlegen, um die Templates übersichtlich verwalten zu können
- In die Listenansicht wechseln und ein Template mit beispielsweise dem Namen „jQuery 1.7“ anlegen.
- Das Template bearbeiten und in den setup-Bereich den folgenden Code eingeben. Es gibt hierfür verschiedene Befehle, die folgende Bedeutung haben.
includeJSlibs |
Fügt eine JavaScript Bibliothek im Head-Bereich der Website ein. |
includeJSFooterlibs |
Fügt eine JavaScript Bibliothek am Ende kurz vor </body> ein. Wenn man alle JavaScripts am Ende der Seite verankert, wird der Aufbau der Seite beschleunigt. |
- Anschließend das neue Template im Haupttemplate der Website einbinden.
Hier ein Beispiel um jQuery am Ende der Seite einzubinden:
page.includeJSFooterlibs {
jquery = fileadmin/pfad_zur_datei/jquery-1.7.min.js
jquery.forceOnTop = 1
}
jQuery direkt von Google einbinden:
page.includeJSFooterlibs {
jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
jquery.external = 1
jquery.forceOnTop = 1
}
JavaScript-Dateien einbinden
Normale JavaScript Dateien kann man über die Befehle includeJS und includeJSFooter einbinden.
Parameter
| disableCompression | JavaScript-Datei wird nicht komprimiert |
| forceOnTop | Wird vor den anderen Dateien geladen |
| allWrap | <script>-Befehl mit etwas umhüllen |
| excludeFromConcatenation | Datei wird nicht mit den anderen Dateien zu einer großen Datei zusammengefügt |
| external | Datei wird von einer anderen Domain geladen |
| type | Normalerweise ‚text/javascript‘ |
Komprimierung
Die neuen TYPO3 Versionen kommen mit Packern, die die Dateien zu einer großen Datei zusammenfügt, um so die Anzahl der Anfragen an den Webserver zu reduzieren, und die Dateien komprimiert.
Wunderbar, so einfach – und doch hat man danach gesucht und ist hier fündig geworden.
Vielen Dank! 🙂
Schöner Artikel !
Zur Einbindung der aktuellen jQuery Bibliothek dient folgender Pfad:
…
jquery = //code.jquery.com/jquery.js
jquery.external = 1
…
ich finde nirgends etwas darüber, dass Typo3 „die Dateien zu einer großen Datei zusammenfügt“ und das tut es bei mir auch nicht. Habe ich da etwas übersehen oder ist meine Version (4.5.22) nicht neu genug??
Auswendig weiß ich leider nicht, ob die Version 4.5 das Packen schon unterstützt. Es muss die Anweisungen im Template config.concatenateJs = 1 oder config.concatenateCss = 1 unterstützen.
habe gerade gesehen dass das feature ab version 4.6 verfügbar ist