TYPO3 Powermail und jQuery ohne t3jquery

Heute hatte ich ein TYPO3 Problem mit Powermail und dem jQuery Framework, das mich fast in den Wahnsinn getrieben hat. Recherchen bei Google brachten mich immer zum gleichen Ergebnis: t3jquery installieren. Genau das wollte ich aber nicht, da ich bei dem aktuellen Projekt so wenige Extensions wie möglich verwenden möchte. Nach durchexerzieren etlicher Tutorials, durchreiten von mehreren Dokumentationswüsten und durchwandern des üblichen Quellcode-Dschungels bin ich letztlich an der Workaround Oase angekommen. Aber wie immer erstmal zum Problem:

jQuery nicht per t3jquery Extension einbinden

Auf dem TYPO3 Extension Markt findet sich für alles und jeden etwas mehr oder weniger gut passendes um sein gerade aktuelles Problem zu erschlagen. In Projekten mit vielen solcher Problemen endet man dann am Schluß mit einem Wust an Extensions, die sich im schlimmsten Fall gegenseitig negativ beeinflussen. Der Wartungsaufwand für den Administrator steigt natürlich auch mit jeder weiteren Extension. Aus diesem Grund versuche ich mit möglichst wenigen Extensions auszukommen.
Im konkreten Fall geht es nun um Grundfunktionalität, die an vielen Stellen der Webseite verwendet wird und ohne die heute kaum noch eine moderne Webseite herum kommt: jQuery (o.ä.). Das Javascript-Framework ist im Grunde recht einfach eingebaut, eine Skript-Anweisung im HTML genügt bereits um das Paket dynamisch von einem CDN laden zu lassen. Oder aber man installiert die Extension t3jquery die neben der Einbindung noch andere Funktionalität mit sich bringt, die man oft braucht, naja, wenn man viele Extensions verwendet, die auf jQuery angewiesen sind.
Viele dieser Extensions bringen netterweise gleich eine eigene jQuery-Datei mit und bauen die ein. So wie Powermail das auch tut. Bemerkt Powermail, dass t3jquery installiert ist, dann wird aber auf das von dieser Extension angebotene Paket zurück gegriffen.
Was ist aber nun, wenn ich das Framework über den oben erwähnten Einzeiler im HTML einbaue? Richtig, Powermail feuert seine Variante mit in die Ausgabe. Plötzlich hat man gleich mehrere jQuery Varianten, die der User sich beim Seitenaufruf runter lädt und wie zu erwarten irgendwas kaputt machen, weil sie sich gegenseitig ins Gehege kommen.
Eine Lösung muss her und die ist ganz klar formuliert: Von jedem Framework (jQuery, jQuery Tools, anythingslider etc…) darf am Ende nur ein Eintrag im ausgelieferten Quelltext stehen.

Idee 1: Powermail Ausgabe unterdrücken

Mein erster Gedanke war: “Die Frameworks per Hand einbinden und Powermail sagen es soll sich nicht einmischen”.
Gesagt getan. Es gibt recht simple Anweisungen um Powermail unmissverständlich klar zu machen, dass man seine jQuery und jQuery Tools Frameworks bitte nicht verwenden möchte:

page.includeJSlibs {
  powermail_jQuery >
  powermail_jQueryTools >
  powermail_jQueryToolsTabs >
}

Danach macht Powermail allerdings auch unmissverständlich klar, dass es die von Hand eingebundenen Frameworks auch nicht verwenden möchte. Ohne tiefer in den Code geschaut zu haben, vermute ich ein Feature statt eines Bugs. Denn wenn kein JS zur Verfügung steht, wird die Validierung der Felder wie früher auf der nächsten Seite angezeigt. Eine Option mit der man Powermail sagen kann, dass es sich drauf verlassen soll, dass da schon das richtige eingebunden ist, habe ich nicht gefunden.
Lösungsversuch gescheitert.

Idee 2: Powermail liefert jQuery

Zweite Idee: Wir lassen Powermail die Frameworks einbinden, wenn es denn unbedingt will.
Hier stoße ich auf das Problem, dass Powermail sich zwar leicht die entsprechenden Dateien unterschieben läßt, diese dann allerdings nur einbindet, wenn sich auf der Seite auch ein Powermail Formular befindet. Nun wird der geneigte Leser sicher verstehen, dass ich auf der Startseite mit Slidern und Bannern kein Powermail-Formular platzieren möchte.
In den Untiefen der Dokumentation finde ich allerdings noch ein Flag, mit dem man Powermail sagen kann, dass es immer liefern soll, auch wenn es selbst nicht zum Einsatz kommt. Also schnell mal alles zusammengebaut und getestet. Und siehe da, es funktioniert.

Die Lösung

Sollte mal jemand vor einem ähnlichen Problem stehen, so sollte er sich folgenden Code mal anschauen:

[userFunc = user_powermailOnCurrentPage(1)] && [userFunc = user_powermailCheckT3jquery(false)] && [globalVar = LIT:1 > {$plugin.powermail.js.toHeader}]

// remove jQuery and jQueryTools libraries from header
page.includeJSlibs {
  powermail_jQuery >
  powermail_jQueryTools >
  powermail_jQueryToolsTabs >
}

// Include jQuery and jQuery Tools in footer
page.includeJSFooterlibs {
  powermail_jQuery.external = 1
  powermail_jQuery =  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js  powermail_jQueryTools.external = 1
  powermail_jQueryTools = / fileadmin/js/jquery.tools/jquery.tools.form.min.js  powermail_jQueryToolsTabs.external = 1
  powermail_jQueryToolsTabs = / fileadmin/js/jquery.tools/jquery.tools.tiny.min.js}
[end]

# At this point we only add another bunch of JS frameworks
# fancybox, easing and sliding needed on some pages
page.footerData.10 = TEXT page.footerData.10.value (   
<!-- scripts-->
<script src="/fileadmin/js/jquery.fancybox-1.3.4.pack.js?x67451" type="text/javascript"></script>
<script src="/fileadmin/js/jquery.anythingslider.min.js?x67451" type="text/javascript"></script>
<script src="/fileadmin/js/script.js?x67451" type="text/javascript"></script>
<!-- .scripts-->
)

Der obere Teil ist in leicht abgewandelter Form auch im mitgelieferten Powermail TS-Setup zu finden. Was hier interessant ist, ist die userFunc user_powermailOnCurrentPage(1). Diese prüft nämlich, ob powermail auf der aktuellen Seite aktiv ist. Als Parameter kann man mitgeben ob powermail-Javascript auf allen Seiten angezeigt werden soll. Im zweiten Teil fügen wir dann noch wie üblich alle anderen Frameworkteile hinzu.

Der gezeigte TS-Code funktioniert jetzt so wie er soll. Sicherlich kann man diesen noch ein wenig optimieren, was aber hier im Blog vermutlich eher zu Lasten des Verständnis gehen würde.

Feedback

Sollte ich mal wieder zu kompliziert gedacht haben und jemand anderes hat hier einen Einzeiler oder dergleichen parat. Immer gerne in die Kommentare posten.

4 Comments

  1. Ich habs mit einem Eintrag im Konstanten-Feld geschafft:
    plugin.powermail.js.includeJquery = 0
    jQuery wird nicht geladen, die Validierung funktioniert trotzdem. (Powermail v. 1.6.6)

    Reply
  2. Unser geliebtes Typo3… 
    Noch immer muss man sich mit so einem Sch… rumschlagen. Jedes mal die gleichen Probleme, Reihenfolge der Scripte stimmt nicht, doppelt geladene Bibliotheken in verschiedenen Versionen … Datepicker funktioniert nicht in powermail, Validierung funktioniert nicht und recht schnell landet man hier… 

    Nein, ich bin kein Typo3 Anfänger und meine Kollegen kämpfen regelmäßig mit dem gleichen Unfug.

    Ich finde die Verwaltung der JS Bibliotheken sollte zentral von Typo3 verwaltet werden und zwar so das man nichts falsch machen kann. Von Extensions benötigte JS Bibliotheken werden automatisch aktiviert und zwar in der richtigen Reihenfolge. Probleme mit den JavaScript Abhängigkeiten werden beim installieren der Extensions gemeldet und der User kann entscheiden wie es weiter gehen soll.

    Ein frustrierter Typo3 Entwickler… 

    Reply
    • Hallo N.,

      ja, die von dir beschriebenen Probleme laufen wohl jedem über den Weg, der echte Projekte in TYPO3 umsetzt. Ob ich allerdings TYPO3 den schwarzen Peter zuschieben würde, weiß ich nicht. Es gab mit der jQuery Extension ja schonmal Bestrebungen hier eine Zentrale Instanz zu schaffen, von der alle weiteren Extensions partizipieren können. Aus meiner Sicht wurde das allerdings – vermutlich aus verschiedensten Gründen – nicht wirklich genutzt.

      Hinzu kommt, dass ich schon mehrfach festgestellt habe, dass jQuery Libs nicht wirklich Versionskompatibel sind. Das führt dazu, dass man immer eine jQuery Version finden muss, die mit den in den Extensions verwendeten Versionen kompatibel ist. Das ist für mich aber eher ein jQuery Problem. Grundsätzlich verstehe ich, dass man irgendwann mal alte Zöpfe abschneiden muss, aber ein bisschen mehr Rückwärtskompatibilität würde ich mir schon manchmal wünschen.

      Ich glaube eine zentrale JS Steuerung in TYPO3 würde das Problem nicht wirklich lösen, da hier auch alle Extension-Entwickler akribisch mitziehen müssten. Das sehe ich in der aktuellen Landschaft nicht. Ich bin dazu übergegangen, die JS Bibs in den Extensions über TypoScript zu deaktivieren (das lassen die meisten zu) und dann ein Set an kompatiblen Bibliotheken von Hand einzubinden. Denn letztendlich sind es ja meist die gleichen Erweiterungen die die Probleme bereiten. Wenn man so will, ist das eine eigene zentrale Steuerung. Zugegeben, man muss es selber machen.

      Grüße,
      Thorsten

      Reply

Leave a Comment.