Joomla! - Come fare eseguire codice Javascript da una voce di menu

google-plus Scritto da . Postato in Joomla!

avatar ideaIn questo ultimo periodo, devo ammettere che il blog sembra piuttosto abbandonato e tutto ciò si deve al fatto che non ci sto più lavorando essendo questa versione del blog oramai messa da parte in virtù del passaggio a Joomla! 4, operazione che mi sta costando molto in termini di tempo, che già esiguo, non mi consente di dedicare tutto il tempo che desidero per la sua realizzazione.

Con il passaggio del blog a Joomla! 4, sto anche cercando il modo migliore di adattare il sito alla nuova legge sulla privacy e le modifiche sulla GDPR introdotte a giugno 2021.

Come infatti saprete, non è più sufficiente avvisare il visitatore che il sito usa i cookie. Bisogna anche concedergli di decidere quali cookie accettare, senza per questo impedirgli di navigare il sito qualora decidesse di ignorare l'avviso.

Noto che molti siti, ancora precaricano tutti i banner e le pubblicità possibili prima di mostrare al visitatore il banner che gli consentirebbe di estrometterne una buona parte cosa che sicuramente porterà in futuro ad ulteriori restrizioni da parte del garante.

Per piccoli blogger come me che battagliano per farsi rimborsare il costo del mantenimento del sito dalla pubblicità, è semplicemente una complicazione che rende ancora più oneroso il mantenimento stesso del blog.

Tutto ciò è dovuto alla pubblicità aggressiva che molti adottano sui più disparati siti e che impediscono il più delle volte di leggere un semplice articolo senza incappare in un involontario click su qualche banner o video sorto all'improvviso.

Comunque sia è inutile recriminare. La legge è esistente e bisogna trovare il modo di sottostare alle richieste del garante al meglio delle proprie possibilità.

In un altro articolo, parlerò delle varie soluzioni da me vagliate con i pro e i contro che ne sono derivate in fase di sperimentazione e/o uso.

In questo post invece, condivido la soluzione da me trovata nel cercare di far eseguire del codice Javascript sul click di una voce di menu in Joomla!

Eseguire codice Javascript sul click di un Menu item

Perché cercare di far eseguire del codice Javascript ad un click di una menu item? Proprio per quanto discusso pocanzi. Una delle imposizioni del garante, è quella di consentire al visitatore di poter richiamare in qualunque momento il sistema di preferenze sui cookie e di poterle modificare e salvare.

Uno dei plugin da me sperimentati per la prossima versione del blog, è scritto in Javascript. Il sistema è abbastanza completo e consente di richiamare il banner delle preferenze sui cookie con un semplice click su di un pulsante o link grazie al metodo showSettings incluso nel plugin.

Per integrare al meglio questa funzionalità in Joomla! senza creare moduli con pulsanti che avrebbero reso più complesso il footer del blog, ho dunque cercato la miglior soluzione al dilemma:

Creare la voce di menu

La prima cosa da fare è ovviamente creare una voce di menu di tipo URL mettendo nell'attributo "Link" il carattere "#".

voce menu tipo url

Successivamente, nella scheda Opzioni link, all'attributo "Classe CSS del link" inseriamo il nome di una classe che verrà utilizzata solo a questo scopo. Nel mio caso la classe avrà nome "cookie-settings" ricordando lo scopo per la quale è utilizzata.

menu item classe css

Una volta impostata la voce di menu così come sopra descritto, salvatela. Ora è da mettere mano al codice Javascript.

Javascript event listener

Il codice Javascript che aggiungerà "l'ascolto" da parte del browser di un click su di un elemento con la classe che abbiamo scelto può essere inclusa direttamente nel tag <head> del codice del vostro template, in modo tale da essere presente su tutte le pagine del vostro sito Joomla!

Nel mio caso, ho incluso il codice Javascript in un file .js che ho poi integrato nel tag <head> del template da me utilizzato per il blog.

// JAVA CODE
 0  if(document.addEventListener){  1       document.getElementsByClassName("cookie-settings")[0].addEventListener('click', function(e){  2       e.preventDefault();  3       cc.showSettings(0); //cambiate il codice con ciò che necessitate sia eseguito al click della voce di menu  4  }); 

Spiegazione del codice

Il metodo document.addEventListener() collega un gestore di eventi al documento. Se l'operazione ha esito positivo, la riga successiva aggiunge l'evento mettendo in condizione il sistema di percepire un click su di un oggetto identificato dalla classe CSS "cookie-settings".

Nel caso si verificasse l'evento click sulla voce di menu "cookie-settings", viene eseguita la funzione inclusa quale parametro del metodo addEventListener la quale, nella prima riga (e.preventDefault()) evita che venga eseguita l'azione di default, ovvero il ricaricarsi della pagina (voce di menu impostata con il simbolo "#" nell'attributo link) ed esegue invece la riga successiva, nel mio caso l'esecuzione del metodo showSettings dell'oggetto cc.

Quest'ultima riga di codice, nel mio caso specifico, si riferisce al richiamo del metodo che apre la finestra delle impostazioni dei cookie del plugin da me impiegato per la gestione dei consensi da parte dell'utente. Tuttavia al suo posto, potrebbe essere sostituita dalla funzione, metodo o codice che avete bisogno venga eseguita dopo il click sulla voce di menu creata appositamente.

Se volete dare un'occhiata, per la soluzione qui sopra riportata mi sono ispirato al post JavaScript click event listener on class su Stackoverflow.

Se avete suggerimenti o domande, scrivete nei commenti qui sotto!


 

Se hai gradito l'articolo, condividilo, basta un click:
Aggiungi commento
I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 10/06/2021). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):