Eigenes jQuery einbinden

**eindruck** · 21.07.2015, 14:06

Hallo,

wir setzen gerade eine neue Seite auf un haben dafür ein eigene jQuery erstellt sowie ein paar js Dateien.
Wie kann ich diese im Seitenlayout bei "iQuery laden"...iQuery-Templates verfügbar machen?

Gruß

Stefan

**Kahmoon** · 21.07.2015, 14:12

Bei der Templateauswahl erscheinen nur Dateien die mit j_ Anfangen und im Ordner /templates liegen. Man kann im Layout aber auch direkt Pfade zum JS im Bereich "Zusätzliche <head>-Tags" hinzufügen.

**eindruck** · 22.07.2015, 07:17

Vielen Dank, funktioniert.

**seamuc** · 29.03.2017, 10:40

Bei mir funktioniert das mit den zusätzlichen head-Tags überhaupt nicht.

Für alle Interessierten, ich habe ein jQuery-Plugin folgend eingebunden:
Javascript/jquery-Script einbinden:

1. Für das Plugin einen eigenen Ordner in:
...\htdocs\contao\assets\jquery\EIGENERNAMEFUERJSO RDNER

mit EIGENERNAME.js erstellen/kopieren

2. Dann ein eigenes Template erstellen (z.B.: notepad++):
Ort:contao\templates\RadioOnkologie

Name: j_EIGENERNAME.html5
Inhalt dieser .html5-Datei:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/EIGENERNAMEFUERJSORDNER/EIGENERNAME.js"></script>
<script>
Hier eigenen JS-Code kopieren/schreiben.
</script>

3. Ins Contao-Backend, zu: Themes ->Layout bearbeiten:

(Wenn eine CSS für das JS zusätzlich benötigt wird, dann diese dort aktivieren (vorher in entsprechenden Template/files CSS-Ordner kopieren))

Unter der Rubrik "jQuery-Templates" sollte die j_EIGENERNAME auftauchen. Dies aktivieren.

Fertig

**Kahmoon** · 29.03.2017, 11:17

Also...zu allererst mal: Im Ordner assets erstellt man überhaupt nichts. Das ist ein temporärer Ordner von Contao und kann/wird regelmäßig bereinigt.

Zu 1.
Leg es unter /files ab und binde es im Bereich zusätzliche Head Tags ein

Code:

<script type="text/javascript" src="/files/meinscript.js"></script>
<script>Dein Code hier</script>

Zu 2 & 3.
Ein Template j_xxxx.html5 erscheint nur dann im Layout (Bereich jQuery) zur Auswahl wenn es im Ordner /templates liegt. Deshalb auch die Namensvorgabe für das Template.

**Andreas** · 29.03.2017, 15:55

Über die HEAD-Tags bindet man es im HEAD ein und über das Template am Ende von BODY. Kommt also drauf an, welche Möglichkeit du nutzen möchtest.

Über ein Template kannst du es auch im HEAD einbinden, andersherum geht das nicht.

CSS-Dateien kannst du auch über das Template reinbringen. Schau dir dazu andere Templates an wie das geht.

Mit dem Flag "|static" kannst du die Dateien auch in die eine kombinierte Datei bringen.

**Spooky** · 29.03.2017, 16:10

Zitat von Kahmoon

Also...zu allererst mal: Im Ordner assets erstellt man überhaupt nichts. Das ist ein temporärer Ordner von Contao und kann/wird regelmäßig bereinigt.

Du meinst /assets/js, /assets/css und /assets/images. Der /assets Ordner generell ist kein Temporärer Ordner. In den /assets Ordner installieren auch manche Extensions ihre... Assets

.

**Kahmoon** · 30.03.2017, 08:27

Ja, da hast du Recht. Als Otto-Normal-User aber Finger weg von dem Order assets

**Bennie** · 30.03.2017, 09:19

Zitat von Andreas

Über die HEAD-Tags bindet man es im HEAD ein und über das Template am Ende von BODY. Kommt also drauf an, welche Möglichkeit du nutzen möchtest.

Die Aussage irritiert mich gerade. Sowohl über "Zusätzliche <head>-Tags" wie auch per j_xxx.html5 eingebundenes JS wird doch über die <?= $this->head ?> in der fe_page ausgegeben und die ist doch standardmäßig im <head> eingebunden, oder hab ich da was übersehen?

**Andreas** · 30.03.2017, 14:41

Die j_- und moo_-Templates werden über

PHP-Code:


<?= $this->mootools ?>

eingebunden.

**Andreas** · 30.03.2017, 14:46

Ich würde das auch nicht in assets/ sondern in files/ ablegen. Ressourcen von Erweiterungen, welche in assets/ abgelegt sind kann man bei einem Update schnell wieder herstellen, wenn man den Core z.B. mal komplett ausgetauscht hat. In files/ sieht man (auch fremde Helfer) sofort, dass da was eigenes programmiert wurde.

**Bennie** · 30.03.2017, 15:09

Zitat von Andreas

Die j_- und moo_-Templates werden über

PHP-Code:


<?= $this->mootools ?>

eingebunden.

Hm, bei mir wird aber die js Datei (j_-template) dort ausgegeben wo ich <?= $this->head ?> stehen habe , selbst wenn ich <?= $this->mootools ?> lösche ändert sich da nichts.
Ich fände es gut wenn es anders ginge dann müsste ich das JS was zwingend in den head muss nicht direkt in die fe_page schreiben (weil ich normalerweise <?= $this->head ?> nach unten in den body setze) - was jetzt kein Problem ist, aber so wie Du das beschrieben hast müsste es ja mit "Bordmitteln" gehen?

**Spooky** · 30.03.2017, 15:46

Zitat von Bennie

Hm, bei mir wird aber die js Datei (j_-template) dort ausgegeben wo ich <?= $this->head ?> stehen habe

Dann verwendest du wahrscheinlich

PHP-Code:


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

**Andreas** · 30.03.2017, 15:55

Zitat von Bennie

Hm, bei mir wird aber die js Datei (j_-template) dort ausgegeben wo ich <?= $this->head ?> stehen habe , selbst wenn ich <?= $this->mootools ?> lösche ändert sich da nichts.

Das kann nicht sein, dann musst du da irgendwo dran rumgeschraubt haben.

Über ein Template kannst du die Ressourcen übrigens an verschiedenen Stellen einbinden

PHP-Code:


<?php



$GLOBALS['TL_HEAD'][]          = 'code';

$GLOBALS['TL_BODY'][]          = 'code';

$GLOBALS['TL_CSS'][]           = 'path|static'; // |static is optional

$GLOBALS['TL_JAVASCRIPT'][]    = 'path|static';

$GLOBALS['TL_USER_CSS'][]      = 'path|static'; // ?

$GLOBALS['TL_FRAMEWORK_CSS'][] = 'path|static'; // ?



?>

Edit: sorry copy and paste Fehler

**Bennie** · 30.03.2017, 15:56

@spooky
Ach deshalb,, ja das verwende ich.

$GLOBALS['TL_JAVASCRIPT'][] = 'path|static'; verwende ich und ich habe sonst nix rumgeschraubt ...?

**Andreas** · 30.03.2017, 16:01

Trotzdem wird dein j_-Template nicht mit $this->head ausgegeben. Wenn doch, dann hast du rumgeschraubt.

**Spooky** · 30.03.2017, 16:03

Zitat von Bennie

$GLOBALS['TL_JAVASCRIPT'][] = 'path|static'; verwende ich und ich habe sonst nix rumgeschraubt ...?

Alles was du in das $GLOBALS['TL_JAVASCRIPT'] hinzufügst, wird in $this->head ausgegeben.

Der Inhalt von j_… Templates wird in $this->mootools ausgegeben.

**Bennie** · 30.03.2017, 19:35

Dann verhält es sich doch wie es soll

@Andreas
da haben wir wohl nur ein wenig aneinander vorbeigeredet.
Ich habe meine JS scripte alle über $GLOBALS['TL_JAVASCRIPT'][] = 'path|static'; eingebunden und <?= $this->head ?> vor </body> gesetzt.
Mir ist klar dass ich dann im Layout "Zusätzliche <head>-Tags" nicht so nutzen kann wie eigentlich gedacht, aber das nehme ich in Kauf, da ich die scipts gerne alle zusammengefasst haben wollte.
Das ist sozusagen die Stelle wo ich rumgeschraubt habe. Die Möglichkeit über $GLOBALS['TL_BODY'][] hatte ich noch nicht in Betracht gezogen. Man könnte das JS ja auch selbst komprimieren und einbinden.
ALso alles so wie erwartet

Vielen Dank für eure Hinweise dazu

**Andreas** · 30.03.2017, 21:51

TL_BODY macht im j_template keinen Sinn, da das j_template ja sowieso schon am Ende vom BODY ausgegeben wird.

Du kannst also $this->head wieder nach oben verfrachten und deine Scripts, welche du am Ende vom BODY ausgeben willst in ein j_template packen.

Contao komprimiert nicht. Es kombiniert aber die Ressourcen, welche mit |static eingefügt werden in die eine große JS-/CSS-Datei.

Wenn du noch mehr machen möchtest, z.B. auch komprimieren, dann kannst du dir mal die Erweiterung theme_plus ansehen.

**Bennie** · 31.03.2017, 07:19

Ja sorry ich meinte das Zusammenfassen der Skripte.
Prinzipiell hast du ja recht, dann müsste ich einfach alles per <script="path"></script> ins Template einbinden. Das Zusammenfassen muss nicht Contao übernehmen, kann man ja auch selbst machen.
Mir war nicht klar, dass es da den Unterschied gibt zu $GLOBALS['TL_JAVASCRIPT'] bzgl. der Ausgabe im FE.

Thema: Eigenes jQuery einbinden

Themen-Optionen

Thema durchsuchen

Eigenes jQuery einbinden

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher