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.

Sven Wappler

Webentwickler, TYPO3ler, Hobby-Fotograf

Das könnte Dich auch interessieren …

5 Antworten

  1. EmmEss sagt:

    Wunderbar, so einfach – und doch hat man danach gesucht und ist hier fündig geworden.

    Vielen Dank! 🙂

  2. Schöner Artikel !

    Zur Einbindung der aktuellen jQuery Bibliothek dient folgender Pfad:


    jquery = //code.jquery.com/jquery.js
    jquery.external = 1

  3. Andreas sagt:

    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??

  4. Sven Wappler sagt:

    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.

  5. Andreas sagt:

    habe gerade gesehen dass das feature ab version 4.6 verfügbar ist

Schreibe einen Kommentar