Ladezeiten und Code Optimierung in Contao für CSS und JS Dateien

Oft kommt es vor, das man für eine bestimmte Übersichtsseite oder Unterseite ein JS oder CSS zusätzlich einbinden muss, da es für eine bestimmte Funktion oder blinkeblike Umsetzung benötigt wird, man sich aber nicht global die Ladezeiten mit JS / CSS Code überladen möchte.

Dafür gibt es mit folgender Einbindung die Möglichkeit Code Optimierung in Contao anhand der Seiten ID sich per Include die Dateien in den HEAD zu laden.

Dazu legt ihr eine HTML5 Datei in das Templateverzeichnis für die jeweilige Installation.
Z.B. in /templates/DEINPROJEKT/ j_KUNDE-XYZ-css-js.html5

In die fügt ihr folgenden CodeSnippet ein. Unter Layout >Themes > KundenLayout > jQuery-Templates findet Ihr jetzt die einzubindende j_KUNDE-XYZ-css-js die euch die JS / CSS in den HEAD includiert. Wenn nichts erscheint vielleicht mal die Systemwartung mit dem Punkt Skriptcache leeren und Internen Cache leeren / ausführen.

Snippet für die Einbindung von CSS und JS Dateien in Contao

<?php

global $objPage;

if ($GLOBALS['objPage']->id == 5 OR $GLOBALS['objPage']->id == 93) {
$GLOBALS['TL_CSS'][] = 'files/design/css/bxslider.css|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.config.js';
}
?>

Um die JS / CSS mit den anderen zusammen zu fassen, kann das über den Parameter deine-datei.js|static oder deine-datei.css|static erfolgen.

Die Stellen die Ihr anpassen müsst ist die ID wie hier im Beispiel die 5 oder die 93. In der Zeile werden über das OR für beide Seiten die in der Klammer aufgelisteten CSS / JS Dateien geladen.

Wenn Ihr nur auf einer Seite die Einbindung benötigt, dann löscht einfach das "OR $GLOBALS['objPage']->id == 93" das nur noch "($GLOBALS['objPage']->id == 5)" als Bedingung steht.

Zurück