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

includeJSFooterlibs

• 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

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.