Typo3 und jQuery mit t3jquery
Die meisten Extensions bringen eigene JavaScript-Bibliotheken (jQuery, Mootools, etc.) mit. Dies führt oft dazu, dass diese Erweiterungen sich gegenseitig blockieren. Oft bieten die Extensions Möglichkeiten entsprechende JavaScript-Einbindungen zu deaktivieren bzw. zu steuern, jedoch ist es nicht immer der Fall. Eine Abhilfe schafft die Extension t3jquery. Mit dieser Extension lassen sich die Einbindungen der JavaScripts zentrall verwalten.
Bei unserem letzten Projekt haben wir einen recht umfangreichen Slider im Header der Seite entwickelt, welcher sich über Typo3 komplett steuern lies. Für die Umsetzung des Sliders haben wir jQuery 1.5.2 verwendet. Nach der Installation der Extensino "powermail" (Version 1.6.3) mussten wir feststellen, dass unser Slider auf der Kontaktseite nicht mehr richtig aufgeführt wurde.
Nach kurzer Suche im Netz konnten wir das Problem lokalisieren: powermail verwendet seit der Version 1.6.0 standardmäßig jQuery für die Validierung der Pflichtfelder. Und arbeitet mit der Extension t3jquery für die Einbindung des JavaScripts. Findet der die t3jquery-Extension nicht, so bindet er selber die jQuery-Bibliothek (Version 1.4.0) im Footer der Seite ein. Dies war für uns der Grund die besagte Extension t3jquery auszuprobieren und siehe da, wir waren begeistert ;)
Was bietet die Extension
Nach der Installation der Extension erscheint ein neues Werkzeug unter der Rubrik "Tools / Adminwerkzeuge" im Typo3-Backend. Unter diesem Menüpunkt kann man nun folgendes tun:
- eine eigene jQuery-Bibliothek erstellen, dabei wählt man zwischen den mitgelieferten Komponenten (jQuery-Core, jQuery-UI und jQuery-Tools)
- Überprüfen welche Komponenten für die installierten Extensions benötigt werden
- Eigene Scripts Komprimieren, um so die Ladezeit der Seite zu verbessern
Installation und Konfiguration
Installieren Sie die Extension wie gewohnt über das Werkzeug "Erweiterungen". Details zur Installation können Sie dem Extension-Manual entnehmen.
Um die Extension zu Konfigurieren müssen Sie nun auf das neue Werkzeug "T3 jQuery" gehen und hier zunächst alle benötigten Komponenten aktivieren. Sie sollten auch kontrollieren, welche Komponenten für die anderen Extensions benötigt werden. Dazu bietet t3jquery eine entsprechende Funktion.
Nach dem Sie nun eine eigene jQuery-Bibliothek erstellt haben ist es u.U. noch notwendig eigene JavaScripts in die Seite zu laden. Dies erreichen wie folgt mit TypoScript.
includeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.php
temp.addJs = COA
temp.addJs {
# eigene Datei
10 = USER
10 {
userFunc = tx_t3jquery->addJS
jsfile = fileadmin/templates/scripts/mein-javascript.js
compress = 1
tofooter = 0
}
# externe Datei
20 = USER
20 {
userFunc = tx_t3jquery->addJS
jsurl = http://domain.de/scripts/externer-script.js
compress = 1
tofooter = 0
}
# eigener JavaScript
30 = USER
30 {
userFunc = tx_t3jquery->addJS
jsdata = alert("Hallo Welt!");
compress = 1
tofooter = 0
}
}
page = PAGE
page.10 < temp.addJs
Nachteile / Probleme
Die Version 1.10.0 von t3jquery bietet jQuery 1.4.2 als höchste Version an. Die aktuelle Version 1.5.2 steht leider nicht zur Auswahl.
t3jquery (1.10.0) - jQuery-Version aktualisieren
Um die jQuery-Version auf den aktuellen Stand zu bringen ist ein kleiner Eingriff in die Extension nötig.
- Dazu laden wir die aktuellste jQuery-Version von http://jquery.com/ runter und laden sie in das folgende Verszeichnis der Extension hoch: typo3conf/ext/t3jquery/res/jquery
- Damit alles reibungslos funktioniert müssen wir nun die Datei umbenennen. Der neue Name muss wie folgt lauten jquery-x.x.x.js (x.x.x durch die ensprechende Versionsnummer austauschen). In meinem Fall heißt die Datei jquery-1.5.2.js
- Als nächstes müssen wir der Extension mitteilen, dass es eine neue Version zur Auswahl gibt. Dazu welchseln wir ins folgende Verzeichnis: typo3conf/ext/t3jquery und editieren die Datei: ext_conf_template.txt
- In der Zeile 12 der Datei ext_conf_template.txt erweitern wir nun die type=options um die neue Versionsnummer
Vorher:# cat=basic/typo/10; type=options[1.4.2,1.4.1,1.4.0,1.3.2,1.3.1,1.3.0,1.2.6]; label=jQuery Version: Select the jQuery Version
Nachher:# cat=basic/typo/10; type=options[1.5.2,1.4.2,1.4.1,1.4.0,1.3.2,1.3.1,1.3.0,1.2.6]; label=jQuery Version: Select the jQuery Version