Handbuch oder Anleitung gesucht

**wudrich** · 28.08.2013, 17:31

Hallo zusammen,

ich habe die Erweiterung theme_plus auf Contao 2.11.11 installiert, um diverse CSS- und JS-Dateien zusammenzufassen und wenn möglich zu verkleinern.

Meine Vorstellung ist, dass im Idealfall jeweils nur eine CSS- und eine JS-Datei geladen werden muss anstatt mehrere. Soweit ich es verstanden habe, macht diese Erweiterung genau das. Allerdings komme ich nicht weiter. Ich verstehe nicht ganz, was ich wo machen muss, damit die verschiedenen JS- und CSS-Dateien auch wirklich zu einer Datei zusammengefasst und minimiert werden. Ich habe z.B. die Mootools Mediabox und auf einzelnen Seiten das Akkordeon im Seitenlayout aktiviert, auf einer Seite einen jquery Slider, und noch ein paar andere jquery-abhängige Scripts. Es funktioniert alles einwandfrei; aber ich möchte die Anzahl der geladenen Dateien reduzieren, und alles JS am Ende der Seite, sprich direkt vor dem schliessenden Body Tag haben.

Gibt es eine Anleitung oder ein Handbuch zu dieser Erweiterung?

Mit der Beschreibung unter http://de.contaowiki.org/ThemePlus kann ich leider kaum was anfangen, ich brauche mehr Details.

Ich bin dankbar für jeden Hinweis.

Gruss

**tril** · 29.08.2013, 10:03

Also es gibt noch http://www.theme-plus.org/ (wird aber bald überarbeitet).
Für Version 4 (ab Contao 3) könnte ich dir noch das anbieten: http://www.youtube.com/watch?v=jiOOZ...177A99&index=6

Die allerwichtigste Info für dich ist wohl, dass sobald du im Backend angemeldet bist der Designer Modus aktiv wird. Dabei werden die Dateien alle einzeln geladen. Allein durch das aktivieren von Theme+ sollte ein Großteil der Dateien zusammengefasst werden (alles was über TL_CSS und TL_JAVASCRIPT gesetzt wird). Dateien die direkt im HTML mittels <script> eingebunden werden, ignoriert Theme+. Schau dir den Unterschied "BE angemeldet" und "BE abgemeldet" einfach mal an

**wudrich** · 29.08.2013, 12:03

Herzlichen Dank. Ich werde mir die Links anschauen.
Die Seite läuft immer noch auf Contao 2.11, ein Update auf Contao 3 ist nicht geplant in nächster Zeit. Ich hab die Version 3 von Theme+ installiert.

Das mit dem Designer Modus hab ich nicht gewusst und es hat mich immer verwirrt, weil immer alle Dateien einzeln und mit einer Kommentarzeile im Quellcode erschienen. Darum hab ich gedacht, ich mach was falsch ;-)

Hab ich das richtig verstanden:
Scripts die irgendwo mit dem HTML Tag <script> geladen werden, muss ich mit Theme+ nun unter Layout > Themes > Symbol "Weitere Datein in das Theme IDxx einbinden" einfügen, aus den Templates, bzw. Seitenlayouts entfernen - danach erscheinen die Scripts in den Seitenlayouts, wo man sie per Kontrollkästchen aktivieren kann?

Gruss

**tril** · 29.08.2013, 12:16

Zitat von wudrich

Das mit dem Designer Modus hab ich nicht gewusst und es hat mich immer verwirrt, weil immer alle Dateien einzeln und mit einer Kommentarzeile im Quellcode erschienen. Darum hab ich gedacht, ich mach was falsch ;-)

Ja, das verwirrt viele am Anfang, in der jüngsten 4er Version ist es so, dass der Designer Modus optional ist und pro Backend Benutzer aktiviert werden muss.

Zitat von wudrich

Hab ich das richtig verstanden:
Scripts die irgendwo mit dem HTML Tag <script> geladen werden, muss ich mit Theme+ nun unter Layout > Themes > Symbol "Weitere Datein in das Theme IDxx einbinden" einfügen, aus den Templates, bzw. Seitenlayouts entfernen - danach erscheinen die Scripts in den Seitenlayouts, wo man sie per Kontrollkästchen aktivieren kann?

In einigen Template steht z.B. so was drin:

HTML-Code:

<script src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>

Du kannst es entweder so machen wie du gesagt hast, per Backend dem Layout hinzufügen und im Template den script Tag löschen oder du änderst das einfach folgendermaßen im Template ab:

PHP-Code:


<?php $GLOBALS['TL_JAVASCRIPT']['mediabox'] = 'plugins/mediabox/' . MEDIABOX . '/js/mediabox.js'; ?>

**wudrich** · 29.08.2013, 18:04

Danke, ich glaube, ich hab nun das Wichtigste begriffen. Die Erweiterung funktioniert (bis auf ein paar Kleinigkeiten) und ich bin schon ziemlich begeistert davon ;-)

folgende Kleinigkeiten funktionieren bei mir noch nicht:

Wenn ich LazyLoad Javascript im Seitenlayout aktiviere, funktionieren die Mootools (Mediabox, Akkordeon) nicht mehr. Ohne LazyLoad funktionieren sie. Das Mediabox- und Akkordeon-Template schreibt JavaScript-Code mit dem HTML Tag <script> direkt in die Seite. Vielleicht liege ich falsch, aber ich vermute, dass mit LazyLoad die benötigte Mootools Core Datei noch gar nicht geladen ist, wenn der Browser auf das Inline Script trifft und dieses ausführen will.
Gibts dazu eine Lösung?
Ich nutze die Erweiterung [ac_search_index] auf der Suchen-Seite. Die Erweiterung lädt passende Begriffe aus dem Suchindex per ajax nach, und zeigt sie beim Tippen unter den Suchfeld an.
Das Problem: Seit ich Theme+ installiert habe, und alles Javascript in den body-Bereich verschoben habe, funktioniert [ac_search_index] nicht mehr. Die Erweiterung schreibt JS-Code in den Headbereich der Seite:
Code:
```
document.addEvent('domready',function(){new Autocompleter.Request.JSON('ctrl_keywords_256','SimpleAjax.php?mode=ac&acid=ctrl_keywords_256',{'indicatorClass':'autocompleter-loading','minLength':'2','width':'inherit','maxChoices':'10','zIndex':'42','delay':'100','autoSubmit':'1','selectFirst':'','multiple':'','separator':'','autoTrim':'','relative':'1'});});
```
Vermutlich sollte der Code im Body-Bereich stehen, ich bin aber nicht sicher. Die Chrome Dev-Tools zeigen mir folgende Fehlermeldung:
Code:
```
Uncaught TypeError: Object #<HTMLDocument> has no method 'addEvent'
```
Ich weiss leider nicht, wo ich den Fehler suchen muss.

Gruss

**tril** · 29.08.2013, 18:24

Letzteres Problem wird wohl mit ersterem zusammen hängen.

Zum Thema LazyLoad: Dafür muss man viel Anpassen, vor allem Templates. Es darf kein <script> Tag mehr geben, weil der ja nicht lazy geladen wird. Für einen Einsteiger empfehle ich, diese Funktion nicht zu nutzen.

Zum Thema ac_search_index: Der Fehlermeldung zu Urteilen ist Mootools einfach noch nicht ready wenn das Script gestartet wird. Schau mal in den Quellcode, ob Mootools da überhaupt schon geladen wurde? Wenn du die Scripte "am Ende des <body>" laden lässt, ist Mootools im Header natürlich nicht verfügbar, weil es erst am Ende der Seite geladen wird.

Kurzum: weder LazyLoad noch Scripte "am Ende des <body>" laden können out of the box funktionieren. Das muss auch von den jeweiligen Erweiterungen bzw. vom Web-Entwickler berücksichtigt werden.

**wudrich** · 29.08.2013, 19:45

Verstehe.

In Theme+ 4 gibts anscheinend die Möglichkeit Code aus Templates oder .php Dateien in das Array $GLOBALS[TL_JAVASCRIPT] einzufügen:

PHP-Code:


$asset = new \Assetic\Asset\StringAsset('alert("Hello World!");');

$GLOBALS['TL_JAVASCRIPT'][] = $asset;

in der von mir genutzten Version 3 scheint das aber nicht zu funktionieren. Gibt es eine andere Lösung?

Nachtrag 2: hab gerade in der PageRegular.php gesehen warum das so nicht geht.

------------
Nachtrag:
Ich konnte inzwischen die Probleme mit den Mootools beheben: In den Templates von Mediabox und Akkordeon ist Javascript-Code, den ich in in eine separate Datei kopiert habe, und diese dann im Template eingebunden:

PHP-Code:


$GLOBALS['TL_JAVASCRIPT'][] = 'tl_files/meintheme/scripts/accordion_zusatz.js';

Beim [ac_search_index] ist etwas schwieriger: der Javascript Code wird dynamisch in einer php Datei unter /modules/ac_core/ gebildet, und ist als variable vorhanden. Diese müsste ich wie oben beschrieben einbinden können. Vorläufig habe ich es in folgender art gemacht (weil es wie oben beschrieben eben nicht funktioniert):

PHP-Code:


$GLOBALS['TL_MOOTOOLS'] = '<script> ' . $variable . '</script>';

so wird das Javascript im Body eingefügt, und funktioniert - ausser natürlich mit LazyLoad. LazyLoad würde ich schon gerne einsetzen, denn damit bekomme ich einige Punkte mehr beim PageSpeed Index. möglichst nahe an 100 Punkte zu kommen ist das Ziel meiner Arbeit, und darum habe ich u.a. Theme+ installiert ;-)

Bei der GoogleMaps Erweiterung hakt auch noch etwas. Wenn man die Seite das erste Mal aufruft, erscheint keine Karte mehr seit Theme+ läuft, erst wenn man Reload im Browser gedrückt hat!? Es scheint keinen Unterschied zu machen, ob ich alles Javascript im Head oder im Body habe (mit ausgeschaltetem LazyLoad).

**tril** · 30.08.2013, 10:30

Zitat von wudrich

In Theme+ 4 gibts anscheinend die Möglichkeit Code aus Templates oder .php Dateien in das Array $GLOBALS[TL_JAVASCRIPT] einzufügen:
...
in der von mir genutzten Version 3 scheint das aber nicht zu funktionieren. Gibt es eine andere Lösung?

siehe http://www.theme-plus.org/#/step-62

Zitat von wudrich

Ich konnte inzwischen die Probleme mit den Mootools beheben: In den Templates von Mediabox und Akkordeon ist Javascript-Code, den ich in in eine separate Datei kopiert habe, und diese dann im Template eingebunden:

PHP-Code:


$GLOBALS['TL_JAVASCRIPT'][] = 'tl_files/meintheme/scripts/accordion_zusatz.js';

Jap, genau so muss man es im Prinzip machen.

Zitat von wudrich

Bei der GoogleMaps Erweiterung hakt auch noch etwas. Wenn man die Seite das erste Mal aufruft, erscheint keine Karte mehr seit Theme+ läuft, erst wenn man Reload im Browser gedrückt hat!? Es scheint keinen Unterschied zu machen, ob ich alles Javascript im Head oder im Body habe (mit ausgeschaltetem LazyLoad).

Mh, hab ich ewig nicht mehr in Kombination eingesetzt... kann da also gerade nix zu sagen

**wudrich** · 30.08.2013, 10:58

Zitat von tril

siehe http://www.theme-plus.org/#/step-62

Super! Damit hat es auf Anhieb geklappt! Ich bin begeistert!

Danke für die Hilfe und Daumen hoch für diese Erweiterung!

**wudrich** · 30.08.2013, 16:24

Wegen der GoogleMaps Erweiterung hab ich mal im entsprechenden Forumsteil https://community.contao.org/de/foru...dlh_googlemaps einen Beitrag geschrieben, vielleicht weiss dort jemand was.

Was mir aufgefallen ist: das PageSpeed Tool beanstandet immer noch dass ich css minimieren soll. Allerdings habe ich die Erweiterung yui-compressor installiert, und in den Einstellungen diese als Standard CSS- / Javascript-Minimierer ausgewählt.
Ich habe auch den cssMinimizer ausprobiert, aber damit wird das ganze Layout zerstört. Allerdings ist mit diesem Minimizer die CSS Datei deutlich kleiner als mit yui.

Ein Blick in die Error.log zeigt u.a. folgende Einträge:

Code:

[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: proc_open() has been disabled for security reasons in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 123
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: fwrite() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 132
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: fclose() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 135
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: stream_get_contents() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 137
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: fclose() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 138
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: stream_get_contents() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 140
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: fclose() expects parameter 1 to be resource, null given in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 141
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: proc_close() has been disabled for security reasons in /contao/system/modules/yui-compressor/AbstractYuiCompressor.php on line 143
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: Missing argument 1 for ThemePlus::wrapJavaScriptLazyInclude(), called in /contao/system/modules/theme_plus/ExternalJavaScriptFile.php on line 110 and defined in /contao/system/modules/theme_plus/ThemePlus.php on line 760
[30-Aug-2013 15:42:11 Europe/Zurich] PHP Warning: Missing argument 1 for ThemePlus::wrapJavaScriptLazyInclude(), called in /contao/system/modules/theme_plus/ExternalJavaScriptFile.php on line 110 and defined in /contao/system/modules/theme_plus/ThemePlus.php on line 760
[30-Aug-2013 15:42:20 Europe/Zurich] PHP Warning: Missing argument 1 for ThemePlus::wrapJavaScriptLazyInclude(), called in /contao/system/modules/theme_plus/ExternalJavaScriptFile.php on line 110 and defined in /contao/system/modules/theme_plus/ThemePlus.php on line 760
[30-Aug-2013 15:42:20 Europe/Zurich] PHP Warning: Missing argument 1 for ThemePlus::wrapJavaScriptLazyInclude(), called in /contao/system/modules/theme_plus/ExternalJavaScriptFile.php on line 110 and defined in /contao/system/modules/theme_plus/ThemePlus.php on line 760
[30

bedeutet das, dass der yui-minimierer gar nicht arbeitet? kannst du damit etwas anfangen?