Possiamo inventarci molti modi diversi per aggiungere codice Javascript in Contao:
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.
Aggiungi un commento