Aggiungere javascript e plugin JQuery in Contao

Possiamo inventarci molti modi diversi per aggiungere codice Javascript in Contao:

modificando diretatmente il Template fe_page (o anche gli altri)
usando lo spazio dedicato per l'head della pagina, in Layout
oppure lo spazio per i javascript addizionali, sempre in Layout
possiamo abilitare in configurazione generale il tag <script> e quindi aggiungere porzioni di codice tramite i moduli ed elementi "HTML personalizzato".

Spesso ho usato tutti questi metodi per inserire alcune funzionalità basate su JQuery: per fare slideshow, caroselli, menu, ecc...
Tuttavia ho scoperto un metodo più corretto e facile, sarebbe lo stesso che usa Contao per aggiungere le plugin fornite nel core (Colorbox, Media element, Accordion). Una volta preparate le nuove plugin, poi diventa facile abilitarle nei Layout, con un semplice click. Di seguito i passi da seguire.

1) Inserire i file js, .css ed eventuali immagini nella cartella del vostro tema, in questo modo non si rischia di perderderli anche aggiornando Contao, o migrando il sito. Per fare ordine è meglio dividere le varie plugin in cartelle.

2) creare un nuovo template, copiandolo da uno qualsiasi tra quelli previsti da Contao, le plugin di JQuery hanno il prefisso "j_" mentre quelle di Mootools hanno prefisso "moo_".

3) rinominare il template (nel mio caso lo chiamo "j_responsivenav"), cancellare il codice che si trova nel template ed inserirne uno simile al seguente, il quale carica il CSS, il javascript, ed eventualmente si inizializza lo script:

<?php
$GLOBALS['TL_CSS'][] = TL_FILES_URL . 'files/theme/responsivenav/responsive-nav.css||static';
// il file javascript può essere caricato in head della pagina come segue
// $GLOBALS['TL_JAVASCRIPT'][] = 'files/theme/responsivenav/responsive-nav.js';
// oppure alla fine del body, assieme agli altri script
?>
<script src="<?php echo TL_FILES_URL; ?>files/theme/responsivenav/responsive-nav.js"></script>
<script>
(function($) {
$(document).ready(function () {
   var navigation = responsiveNav("#mainmenu");
}); 
})(jQuery);
</script>

La riga di PHP che carica il CSS serve ad aggiungere gli stili nel file unico e compresso di Contao. Attenzione, se il CSS della plugin utilizza delle immagini, è bene verificare i percorsi, se le immagini si trovano nella stessa cartella correggere in modo che diventi ad esempio: background: url("toggleButton_white.png") no-repeat;
E' importante che siano virgolette doppie e non singole, così Contao sa intercettare i percorsi nelle sue elaborazioni.

il caricamento del file .js, ed eventualmente ogni altro codice che si scrive (può essere HTML, PHP, Javascript), viene messo nella parte finale della pagina, prima della chiusura del <body>.

4) in Layout, le nuove plugin del tema saranno presenti tra i checkbox originali, si potranno abilitare e riordinare come si preferisce.

Martedì 17 Settembre 2013

(0 commenti)

Contao