Integrare Javascript in PHP

[willsmith7]

Salve, ho questo codice che serve a visualizzare il banner della cookie policy sul sito con tanto di bottone Accetta.

<?php
$gprd_desc       = cool_get_setting( 'cool_gprd_desc' );
$gprd_accept     = cool_get_setting( 'cool_gprd_btn_accept' );
$gprd_rmore      = cool_get_setting( 'cool_gprd_rmore' );
$gprd_rmore_link = cool_get_setting( 'cool_gprd_rmore_link' );
$cool_gprd_text = cool_get_setting( 'cool_gprd_policy_text' );
if ( get_theme_mod( 'cool_enable_cookie_law' ) && $gprd_desc && $gprd_accept ) :
    ?>
    <div class="cool-wrap-gprd-law cool-wrap-gprd-law-close cool-close-all" id="cookie-bar">
        <div class="cool-gprd-law">
            <p>
                <?php if ( $gprd_desc ): echo $gprd_desc; endif; ?>
                <?php if ( $gprd_accept ): echo '<a class="cool-gprd-accept" href="#">' . $gprd_accept . '</a>'; endif; ?>
                <?php if ( $gprd_rmore ): echo '<a class="cool-gprd-more" href="' . $gprd_rmore_link . '">' . $gprd_rmore . '</a>'; endif; ?>
            </p>
        </div>
        <?php if ( ! get_theme_mod( 'cool_show_cookie_law' ) ): ?>
            <a class="cool-gdrd-show" href="#"><?php echo $cool_gprd_text; ?></a>
        <?php endif; ?>
    </div>

<?php endif; ?>

Dovrei integrare il seguente codice Javascript al suo interno per permettere al banner della cookie policy di scomparire quando l'utente scrolla la pagina.

window.onscroll(function() {
   document.getElementById("cookie-bar").style.display = "none";
});

Come faccio di preciso? Grazie in anticipo a chi cercherà di aiutarmi!

 

[WmbertSea]

Ciao, lo script puoi aggiungerlo dentro un normalissimo elemento <script> che inserirai dove meglio credi, dentro head oppure dentro il body. In questo caso non è importante la posizione in cui lo inserisci perché l'oggetto window (al quale ti riferisci nello script) risulta essere già creato e quindi visibile da Javascript qualunque sia il punto in cui viene eseguito quello script, però deve necessariamente essere presente il div #cookie-bar nel momento in cui avviene lo scroll e quindi viene eseguita quella funzione, per cui sarebbe meglio che lo script sia messo dentro la stessa condizione che genera il div in questione.

Fai però attenzione perché quello script, così come lo hai scritto, non è valido. La proprietà onscroll non è una funzione e non puoi definirla in quel modo. Vedi documentazione https://www.w3schools.com/jsref/event_onscroll.asp

Tieni inoltre presente che una volta eseguita quella funzione, non servirà più continuare a richiamarla durante lo scroll (sarebbe un inutile spreco di risorse), per cui sarebbe magari meglio non farla più eseguire dopo che avviene la prima chiamata.

In questo caso può risultare opportuno definire la funzione come listener per l'evento scroll usando il metodo addEventListener e quindi, una volta eseguita, usare removeEventListener per rimuovere il listener.

Potresti quindi avere una cosa del genere:

<script>
   function nascondiCookieBar(){
      document.getElementById("cookie-bar").style.display = "none";
      window.removeEventListener("scroll", nascondiCookieBar);
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

Questo blocco puoi inserirlo dove vuoi, come già spiegato, magari subito dopo il div #cookie-bar, così da mantenere tutto in un unico punto. A tal proposito puoi inserirlo nel tuo PHP esattamente dopo la chiusura di quel div all'interno di quella stessa condizione che genera appunto il div.

 

[willsmith7]

Ciao, lo script puoi aggiungerlo dentro un normalissimo elemento <script> che inserirai dove meglio credi, dentro head oppure dentro il body. In questo caso non è importante la posizione in cui lo inserisci perché l'oggetto window (al quale ti riferisci nello script) risulta essere già creato e quindi visibile da Javascript qualunque sia il punto in cui viene eseguito quello script, però deve necessariamente essere presente il div #cookie-bar nel momento in cui avviene lo scroll e quindi viene eseguita quella funzione, per cui sarebbe meglio che lo script sia messo dentro la stessa condizione che genera il div in questione.

Fai però attenzione perché quello script, così come lo hai scritto, non è valido. La proprietà onscroll non è una funzione e non puoi definirla in quel modo. Vedi documentazione https://www.w3schools.com/jsref/event_onscroll.asp

Tieni inoltre presente che una volta eseguita quella funzione, non servirà più continuare a richiamarla durante lo scroll (sarebbe un inutile spreco di risorse), per cui sarebbe magari meglio non farla più eseguire dopo che avviene la prima chiamata.

In questo caso può risultare opportuno definire la funzione come listener per l'evento scroll usando il metodo addEventListener e quindi, una volta eseguita, usare removeEventListener per rimuovere il listener.

Potresti quindi avere una cosa del genere:

<script>
   function nascondiCookieBar(){
      document.getElementById("cookie-bar").style.display = "none";
      window.removeEventListener("scroll", nascondiCookieBar);
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

Questo blocco puoi inserirlo dove vuoi, come già spiegato, magari subito dopo il div #cookie-bar, così da mantenere tutto in un unico punto. A tal proposito puoi inserirlo nel tuo PHP esattamente dopo la chiusura di quel div all'interno di quella stessa condizione che genera appunto il div.

Grande! Grazie mille, funziona perfettamente e senza sprecare risorse inutilmente! Ora, nel caso volessi fare questi 2 perfezionamenti al codice:

1. Invece di un semplice "display:none" vorrei proprio togliere il banner esattamente come succede quando si clicca il tasto Accept
2. Vorrei che l'azione della funzione venisse fatta quando si scrolla di 100 pixel e non appena si scrolla la pagina

Come potrei modificare il codice per ottenere ciò?

 

[WmbertSea]

Grande! Grazie mille, funziona perfettamente

Bene, mi fa piacere

Invece di un semplice "display:none" vorrei proprio togliere il banner esattamente come succede quando si clicca il tasto Accept

Puoi usare il metodo elementoDaRimuovere.remove() anziché impostare lo style per quell'elemento. Fai solo attenzione, questo metodo funziona sulla maggior parte degli odierni browser, per cui è escluso il "vecchio caro" IE. Se ti serve il supporto anche per IE dovrai usare il metodo elementoGenitore.removeChild(elementoDaRimuovere) che però va applicato al genitore dell'elemento da rimuovere o in alternativa è necessario usare una sequenza del tipo elementoDaRimuovere.parentNode.removeChild(elementoDaRimuovere)

Nel caso tu utilizzassi la libreria jQuery puoi comunque adoperare il suo proprio metodo .remove()

Vorrei che l'azione della funzione venisse fatta quando si scrolla di 100 pixel e non appena si scrolla la pagina

Ci sono diversi sistemi per farlo. In generale, nel listener dello scroll, andrà inserita una condizione che verifichi il valore di scorrimento della pagina, quindi, se raggiunto un certo valore, eseguire il resto dello script.

Per ottenere il valore di scorrimento verticale della pagina è possibile usare window.pageYOffset.

Secondo le tue indicazioni, lo script potrebbe quindi essere impostato in questo modo:

<script>
   function nascondiCookieBar(){
      if(window.pageYOffset >= 100){
         document.getElementById("cookie-bar").remove();
         window.removeEventListener("scroll", nascondiCookieBar);
      }
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

 

[willsmith7]

Spiegazione perfetta e anche questo codice funziona in modo eccellente, quindi grazie mille. C'è un ultimo problema che purtroppo non avevo previsto: a differenza di quando il messaggio cookie scompare cliccando Accetta, con lo scroll poi riappare quando si visitano altre pagine del sito... Questo però non so se sia possibile risolverlo solamente avendo il pezzo di codice che ho postato, che ne pensi? In ogni caso nel caso non si può vorrà dire che me lo terrò in questo modo che è comunque ottimo!

 

[WmbertSea]

Spiegazione perfetta e anche questo codice funziona in modo eccellente, quindi grazie mille.

Bene, figurati

C'è un ultimo problema che purtroppo non avevo previsto: a differenza di quando il messaggio cookie scompare cliccando Accetta, con lo scroll poi riappare quando si visitano altre pagine del sito...

Se la scomparsa/accettazione viene già gestita al click di un pulsante allora puoi semplicemente effettuare un trigger del click di quel pulsante, cioè in sostanza forzarne il click via script in modo che anche allo scroll avvenga comunque tutto il resto che avviene proprio come se avessi cliccato col mouse sul pulsante.

Puoi sostituire la riga che rimuove l'elemento cookie-bar con una cosa del genere:

document.getElementById("pulsante-accetta").click();

dove al posto di pulsante-accetta dovrai chiaramente specificare l'id del relativo pulsante. Se tale pulsante non ha un id (e non puoi/vuoi applicargliene uno) potrà comunque essere identificato in qualche altro modo, ad esempio impostando un qualche selettore col metodo document.querySelector(), in questo caso però è necessario vedere il codice html dell'intero cookie-bar per capire come poter impostare il selettore.


... Scusami, rivedendo il tuo primo post in effetti il codice che hai postato è sufficiente per capire come si può fare. Precisiamo comunque che non si tratta di un pulsante ma di un link, il quale possiede la classe .cool-gprd-accept

In tal caso puoi fare una cosa del genere:

<script>
   function nascondiCookieBar(){
      if(window.pageYOffset >= 100){
         document.querySelector("#cookie-bar a.cool-gprd-accept").click();
         window.removeEventListener("scroll", nascondiCookieBar);
      }
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

Dovrebbe funzionare.

 

[willsmith7]

Bene, figurati


Se la scomparsa/accettazione viene già gestita al click di un pulsante allora puoi semplicemente effettuare un trigger del click di quel pulsante, cioè in sostanza forzarne il click via script in modo che anche allo scroll avvenga comunque tutto il resto che avviene proprio come se avessi cliccato col mouse sul pulsante.

Puoi sostituire la riga che rimuove l'elemento cookie-bar con una cosa del genere:

document.getElementById("pulsante-accetta").click();

dove al posto di pulsante-accetta dovrai chiaramente specificare l'id del relativo pulsante. Se tale pulsante non ha un id (e non puoi/vuoi applicargliene uno) potrà comunque essere identificato in qualche altro modo, ad esempio impostando un qualche selettore col metodo document.querySelector(), in questo caso però è necessario vedere il codice html dell'intero cookie-bar per capire come poter impostare il selettore.


... Scusami, rivedendo il tuo primo post in effetti il codice che hai postato è sufficiente per capire come si può fare. Precisiamo comunque che non si tratta di un pulsante ma di un link, il quale possiede la classe .cool-gprd-accept

In tal caso puoi fare una cosa del genere:

<script>
   function nascondiCookieBar(){
      if(window.pageYOffset >= 100){
         document.querySelector("#cookie-bar a.cool-gprd-accept").click();
         window.removeEventListener("scroll", nascondiCookieBar);
      }
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

Dovrebbe funzionare.

Grazie. Questo funziona sulla prima pagina, tuttavia se l'utente visita un'altra pagina funziona al contrario, ossia il banner invece di restare assente riappare allo scroll. In parole più semplici alla prima pagina che uno visita il banner appare e scompare allo scroll, mentre alla seconda pagina e alle successive il banner non c'è ma appare allo scroll. Non mi viene proprio in mente quale metodo si possa utilizzare per non far triggerare l'evento quando il banner non c'è...

 

[WmbertSea]

Questo effetto collaterale non era prevedibile vedendo il solo codice che hai postato. Evidentemente avviene una sorta di "toggle" al click su quel link, cioè il banner viene nascosto e mostrato in modo alternato ogni volta che si fa click su accetta.

Sicuramente si può intervenire in qualche modo ma a questo punto dovrei vedere l'esatto html del banner dopo che è stato nascosto. L'idea è quella di verificare se al div contenitore gli venga applicata qualche classe (che ne determina la scomparsa) e a quel punto impostare il selettore dell'elemento <a> in modo che sia esclusa la selezione quando il banner è già nascosto.

Nel caso, puoi postare il link a quel sito, così che io possa ispezionarlo opportunamente?
In alternativa, sei in grado di ispezionare il codice tramite la console web e copiaincollare la parte esatta di html relativa al div #cookie-bar quando questo è nascosto?
Oppure mi basterebbe anche solo sapere se a questo gli viene applicata qualche classe diversa da quelle che possiede quando è visibile, cioè queste: "cool-wrap-gprd-law cool-wrap-gprd-law-close cool-close-all"

 

[willsmith7]

Questo effetto collaterale non era prevedibile vedendo il solo codice che hai postato. Evidentemente avviene una sorta di "toggle" al click su quel link, cioè il banner viene nascosto e mostrato in modo alternato ogni volta che si fa click su accetta.

Sicuramente si può intervenire in qualche modo ma a questo punto dovrei vedere l'esatto html del banner dopo che è stato nascosto. L'idea è quella di verificare se al div contenitore gli venga applicata qualche classe (che ne determina la scomparsa) e a quel punto impostare il selettore dell'elemento <a> in modo che sia esclusa la selezione quando il banner è già nascosto.

Nel caso, puoi postare il link a quel sito, così che io possa ispezionarlo opportunamente?
In alternativa, sei in grado di ispezionare il codice tramite la console web e copiaincollare la parte esatta di html relativa al div #cookie-bar quando questo è nascosto?
Oppure mi basterebbe anche solo sapere se a questo gli viene applicata qualche classe diversa da quelle che possiede quando è visibile, cioè queste: "cool-wrap-gprd-law cool-wrap-gprd-law-close cool-close-all"

Certo, questo è il codice che appare sul sito quando il div è nascosto:

<div id="fb-root"></div>
    <div class="cool-wrap-gprd-law cool-wrap-gprd-law-close cool-close-all" id="cookie-bar" >
        <div class="cool-gprd-law">
            <p>
                This website uses cookies to improve your experience. We&#039;ll assume you&#039;re ok with this, but you can opt-out if you wish.                <a class="cool-gprd-accept" href="#">Accept</a>                <a class="cool-gprd-more" href="#">Read More</a>            </p>
        </div>
            </div>
   
<script>
   function nascondiCookieBar(){
      if(window.pageYOffset >= 100){
         document.querySelector("#cookie-bar a.cool-gprd-accept").click();
         window.removeEventListener("scroll", nascondiCookieBar);
      }
   }
   window.addEventListener("scroll", nascondiCookieBar);
</script>

Purtroppo non riesco mostrarti il sito perchè essendo che è in fase di test non è puntato ad un DNS

 

[macus_adi]

Basterebbe salvarsi in modo persistente un dato attraverso
window.localStorage... soluzione veloce ed indolore....

function nascondiCookieBar(){
    if(window.pageYOffset >= 100){
        if(window.localStorage.getItem('cookie_bar')===null){
            //run code
            document.querySelector("#cookie-bar a.cool-gprd-accept").click();
            window.removeEventListener("scroll", nascondiCookieBar);
            window.localStorage.setItem('cookie_bar',true);

        }else{
            //cookie bar is present
        }

    }
}
window.addEventListener("scroll", nascondiCookieBar);

 

[willsmith7]

Basterebbe salvarsi in modo persistente un dato attraverso
window.localStorage... soluzione veloce ed indolore....

function nascondiCookieBar(){
    if(window.pageYOffset >= 100){
        if(window.localStorage.getItem('cookie_bar')===null){
            //run code
            document.querySelector("#cookie-bar a.cool-gprd-accept").click();
            window.removeEventListener("scroll", nascondiCookieBar);
            window.localStorage.setItem('cookie_bar',true);

        }else{
            //cookie bar is present
        }

    }
}
window.addEventListener("scroll", nascondiCookieBar);

Ma in questo caso che succede se si esce dal sito o dal browser e poi lo si riapre? Il dato rimane salvato oppure il comando non c'entra nulla con tutto ciò? Perchè nel caso della cookie policy il compoortamento del messaggio dovrebbe durare fino alla fine della sessione o comunque finchè vale il messaggio di accettazione dei cookie.

 

[WmbertSea]

Certo, questo è il codice che appare sul sito quando il div è nascosto:

Bene, non noto differenze nelle classi applicate sul div principale o su altri elementi, tuttavia (rispetto al codice che hai postato sul primo post, che dovrebbe darmi un'idea di quella che è la situazione del div quando è visibile) noto che l'id cookie-bar è passato dal div esterno a quello più interno. Puoi confermarmi che è effettivamente così nella situazione attuale? Non vorrei che nel frattempo tu abbia modificato il codice in qualche modo e non corrisponda più a quello postato inizialmente.

Nel caso, puoi postarmi anche l'esatto codice html del div quando questo è visibile (così come hai fatto per quello in cui è nascosto)?

Basterebbe salvarsi in modo persistente un dato attraverso
window.localStorage

Sì, può essere una soluzione ma, dal momento che esiste già una qualche gestione di quell'elemento (forse lato server) che lo mostra o lo nasconde a seconda dei casi, penso sia meglio sfruttare tale impostazione; altrimenti ho l'impressione che due gestioni differenti eseguite contemporaneamente possano creare possibili conflitti.

Ma in questo caso che succede se si esce dal sito o dal browser e poi lo si riapre? Il dato rimane salvato oppure il comando non c'entra nulla con tutto ciò?

L'uso del localstorage è a se stante e prescinde da eventuali azioni che possono avvenire con la gestione originale di quell'elemento. In questo caso macus_adi lo ha impostato in modo permanente (cioè resta salvato sul proprio client) per evitare che sia ripetuta l'azione che forza il click su accetta (e che quindi esegua l'azione originale mostra/nascondi); ma, come ho accennato sopra, questo potrebbe creare conflitti nel caso in cui la gestione originale, per un qualche motivo, sia impostata in modo da rendere nuovamente visibile l'elemento... così come hai supposto tu stesso:

dovrebbe durare fino alla fine della sessione o comunque finchè vale il messaggio di accettazione dei cookie.

In tal caso non c'è alcuna relazione tra la gestione col localstorage e quella originale, impostata magari con un'eventuale scadenza della sessione.

 

[willsmith7]

Bene, non noto differenze nelle classi applicate sul div principale o su altri elementi, tuttavia (rispetto al codice che hai postato sul primo post, che dovrebbe darmi un'idea di quella che è la situazione del div quando è visibile) noto che l'id cookie-bar è passato dal div esterno a quello più interno. Puoi confermarmi che è effettivamente così nella situazione attuale? Non vorrei che nel frattempo tu abbia modificato il codice in qualche modo e non corrisponda più a quello postato inizialmente.

Nel caso, puoi postarmi anche l'esatto codice html del div quando questo è visibile (così come hai fatto per quello in cui è nascosto)?


Sì, può essere una soluzione ma, dal momento che esiste già una qualche gestione di quell'elemento (forse lato server) che lo mostra o lo nasconde a seconda dei casi, penso sia meglio sfruttare tale impostazione; altrimenti ho l'impressione che due gestioni differenti eseguite contemporaneamente possano creare possibili conflitti.


L'uso del localstorage è a se stante e prescinde da eventuali azioni che possono avvenire con la gestione originale di quell'elemento. In questo caso macus_adi lo ha impostato in modo permanente (cioè resta salvato sul proprio client) per evitare che sia ripetuta l'azione che forza il click su accetta (e che quindi esegua l'azione originale mostra/nascondi); ma, come ho accennato sopra, questo potrebbe creare conflitti nel caso in cui la gestione originale, per un qualche motivo, sia impostata in modo da rendere nuovamente visibile l'elemento... così come hai supposto tu stesso:

In tal caso non c'è alcuna relazione tra la gestione col localstorage e quella originale, impostata magari con un'eventuale scadenza della sessione.

Ok va bene. Per quanto riguarda l'id spostato scusami, avevo modificato io il codice per fare una prova, adesso ho modificato nuovamente il mio ultimo messaggio con il codice rimettendo l'id cookie-bar al suo posto.

 

[macus_adi]

Basterebbe salvarsi in modo persistente

Ossia se apri e chiudi il browser il dato non viene cancellato, a meno che l'utente non lo cancelli volutamente!

 

[WmbertSea]

Ok va bene. Per quanto riguarda l'id spostato scusami, avevo modificato io il codice per fare una prova, adesso ho modificato nuovamente il mio ultimo messaggio con il codice rimettendo l'id cookie-bar al suo posto.

Bene, ho visto. Purtroppo non riesco a vedere differenze utili per applicare quanto accennato precedentemente.

Quello che ci servirebbe è capire come si può stabilire che quel div viene nascosto. Nella maggior parte dei casi si utilizza il css (ad esempio con un display:none) applicando solitamente una qualche classe. Questa "qualche classe" può risultare applicata all'elemento stesso (ma non sembra il nostro caso) o magari ad un elemento genitore che potrebbe essere anche il body o l'elemento html... purtroppo non potendo vedere la pagina in azione mi viene difficile capire come avviene la cosa, posso giusto andare alla cieca.

Facciamo giusto un altro tentativo. Mi pare di capire che tu sia capace nell'utilizzare la console web del tuo browser. Mi interessa risalire all'esatto selettore css in cui (presumibilmente) viene applicato un display:none per quell'elemento.

Prova a fare in questo modo: una volta che il div risulta nascosto, aperta la console web vai nella scheda di analisi della struttura html, cerca e seleziona il nodo relativo a quel div (cioè <div class="..." id="cookie-bar" >). Ora, nella scheda delle regole css, che dovresti trovare sulla destra, verifica se c'è un qualche selettore in cui è riportata la regola "display: none". Se c'è, copia l'intero selettore e riportalo qui.

Ripeto, sto andando alla cieca, per cui la situazione potrebbe anche essere totalmente differente; magari andiamo per gradi.