Aggiungere JavaScript esterno in Joomla!
L'articolo descrivere in dettaglio le modalità su come aggiungere un file JavaScript esterno nella sezione <head>...</head> del file index.php di un template facendo ricorso alle API di Joomla!
Inserire il codice PHP per richiamare un file JavaScript
La prima operazione da compiere è quella di aprire il file index.php del template ed inserire il codice di seguito riportato; si faccia attenzione ad individuare la sezione <head> </head> della pagina:
<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/NomeDelFile.js' );
?>
NomeDelFile.js, in questo esempio, un nome a caso che va sostituito con il nome vero e proprio del file interessato.
Una volta scritto il piccolo snippet di codice, uplodare via FTP il file javascript nella cartella "js" la quale si trova al seguente percorso: /media/system/js/
Quello che si vuole ottenere, nella header del sito, è il seguente risultato:
<script type="text/javascript" src="/media/system/js/NomeDelFile.js"></script>
Una volta fatti i due passaggi descritti, aggiornare la pagina del sito, aprirla in vista codice ed accertarsi che nella parte superiore (<head>...</head>) sia presente quanto inserito da noi, precedentemente, vale a dire:
<script type="text/javascript" src="/media/system/js/NomeDelFile.js"></script>
A questo punto possiamo dire che il tutto è andato come speravamo ed il file JavaScript esterno è pronto per essere integrato nel sito Joomla!
Non sarebbe consigliabile aggiungere direttamente il codice <script type="text/javascript"></script> direttamente nel file del template in quantolo snippet riportato all'inizio aggiunge correttamente il richiamo al file.js nella header del sito in quanto nella index.php è previsto:
<jdoc:include type="head" />
Il suddetto snippet di codice lo si può aggiungere sia nella header della pagina, sia nella parte della pagina in cui è necessario il richiamo al file javascript.
Aggiungere un file Javascript attraverso JHTML
Oltre al metodo visto sino ad ora, possiamo anche inserire nella header del file index.php un file esterno attraverso JHTML.
JHTML è l'acronimo di Java HTML ed è una estensione dell'HTML classico. Il JHTML permette di inserire istruzioni dinamiche all'interno di pagine html, mediante il tag <servlet></servlet>. Tali istruzioni, poi, vengono eseguite dal server. Tale tecnologia è molto efficace in quanto, essendo Java, non dipende dalla piattaforma hardware e può essere installato ovunque.
Tornando alla nostra applicazione, JHTML rappresenta una classe di Joomla! alla quale fanno riferimento le altre nel Framework di Joomla stesso.
Vediamo come poter impiegare tale classe e come scrivere il suo codice:
<?php
$filename = 'NomeDelFile.js';
$path = 'percorso/file/'; // aggiungere il percorso esatto se è differente da 'media/system/js/'
JHTML::script($filename, $path);
?>
C'è anche la possibilità di aggiungere un terzo parametro, da passare allo script; esso ha un valore booleano (true / false). Possiamo impostarlo su true se volessimo anche caricare, per esempio, MooTools. Vediamo il codice:
<?php
$filename = 'filename.js';
$path = 'percorso/file/'; // aggiungere il percorso esatto se è differente da 'media/system/js/'
JHTML::script($filename, $path, true); // in questo modo MooTools viene caricato
?>
Conclusioni
Abbiamo visto come poter sfruttare al meglio anche questa risorsa che ci viene messa a disposizione da Joomla! In questo modo è molto più semplice "importare" dei files esterni se dovessero essere di supporto per qualche applicazione particolare nel sito.
| < Prec. | Succ. > |
|---|
Commenti
le informazioni che hai scritto non sono esaurienti.
Quale template stai utilizzando? Uno creato da te? Uno free o commerciale?
La sezione "head" nel file index.php deve esserci per forza.
Guarda meglio.
Saluti
ho appena provato sul sito che sto creando in Joomla, ma ho qualche problema. Per prima cosa nel file index.php del template non c'è una sezione head ma la trovo dentro la cartella layouts nel file template.php. Ho provato ad aggiungere il codice ma poi se visualizzo da browser non lo vedo... ho 2 javascript da inserire. Come posso fare?
Grazie in anticipo!
Beatrice
innanzitutto non ci sono, in Joomla!, tante pagine quanti sono gli articoli. Il tutto "si svolge" attraverso il solo file 'index.php' del template. Una voce di menu "genera", in virtù della query, una pagina.
Se tu hai una applicazione che ha bisogno di un file "xx.js" ed un'altra che si serve di "yy.js", in base a quanto scritto nell'articolo, vanno inseriti i richiami a tali files nella head di index.php e trasferire via FTP i file .js, nella cartella "media/system/js.
Saluti
devo crearmi un plugin così che alla creazione del contenuto io possa scegliere il js che voglio usare?
Mi spiego meglio: in una pagina (static content) metto un piccolo drag and drop con Mootools. Ovviamnete nel js si fa riferimento ad oggetti del DOM proprio di quella pagina.
Ora in un'altra pagina ho un altra applicazione Mootools, ma per fare la preview di alcune immagini con effetti custom che voglio io. Ovviamnete nella prima pagina dovrò inserire draganddrop.js e nella seconda slideshow.js.
Come faccio?
Grazie per l'aiuto
Andrea
RSS feed dei commenti di questo post.