- Tempo di lettura: 5 minuti
La più semplice soluzione possibile per un banner di allerta cookie
Questa cosa dei cookie, del GDPR, delle policy, ormai ha un po’ rotto le scatole a tutti. Vere soluzioni complete non esistono e ci sono requisiti spesso impossibili da soddisfare.
Comunque, spesso non c’è bisogno di complicarsi la vita e un alert, magari molto semplice e discreto, assolve al suo compito e ci semplifica la vita.
Ecco la mia proposta.
Il markup
Un semplicissimo blocco di codice html da piazzare fuori da qualsiasi altro contesto. Io l’ho messo come primissima cosa dopo l’apertura del body.
Un contenitore, un testo e un bottone: fine!
<div id=”cookie”> | |
<div id=”cookie-wrapper”> | |
<div id=”cookie-content”>Questo sito <em>potrebbe</em> usare i cookie</div> | |
<button id=”cookie-ok”>Ok</button> | |
</div> | |
</div> |
view rawcookie-markup.html hosted with ❤ by GitHub
Lo stile
Io l’ho scritto in SCSS ma è molto semplice.
Lo piazziamo in basso, in buon contrasto con lo sfondo della pagina; posizione fissa e centrale; flexbox per organizzare gli elementi; pulsante pulito e minimale: fine!
#cookie{ | |
display: none; | |
position: fixed; | |
bottom: 2rem; | |
left: 50%; | |
transform: translateX(-50%); | |
background: #212529; | |
color: #dee2e6; | |
max-width: 90%; | |
z-index: 1090; | |
font-size: .8rem; | |
#cookie-wrapper{ | |
display: flex; | |
flex-direction: row; | |
padding: .6rem 0; | |
#cookie-content, | |
#cookie-ok{ | |
padding: 0 .6rem; | |
} | |
#cookie-content{ | |
border-right: 1px solid #dee2e6; | |
} | |
#cookie-ok{ | |
border: 0; | |
background: none; | |
color: inherit; | |
} | |
} | |
} |
view rawcookie-style.scss hosted with ❤ by GitHub
Da far notare. Di standard il blocco sarebbe nascosto grazie dall’istruzione display: none
ma poi ci penserà il codice Javascript a decidere se l’utente deve vederlo o meno.
Lo script
Ok, giusto questo è qualcosa di interessante.
Dobbiamo decidere se mostrare o meno il banner. Inoltre dobbiamo salvarci il fatto che l’utente abbia cliccato l’ok e quindi “basta banner”.
Usiamo quindi jQuery per le azioni (tanto c’è dappertutto) e, in questo caso, ho deciso di salvare l’informazione del click nel localStorage
così da non dover presentare più il banner per questo utente.
(function($){ | |
$(document).ready(function() { | |
var consent = localStorage.getItem(‘cookie-consent’); | |
if(consent != ‘true’){ | |
$(‘#cookie’).fadeIn(); | |
} | |
$(‘#cookie-ok’).click(function(event){ | |
localStorage.setItem(‘cookie-consent’, ‘true’); | |
$(‘#cookie’).fadeOut(); | |
}); | |
}); | |
})(jQuery); |
view rawcookie-script.js hosted with ❤ by GitHub
Per “storare” il dato potete in alternativa potete usare i cookie o anche il sessionStorage
ma la logica rimane la stessa.
Le funzioni fadeIn
e anche fadeOut
aiutano a gestire un po’ meglio la transizione del banner. Ma anche qui ci sono molte soluzioni alternative.
Ok, lo so: la soluzione non è propriamente _compliance_ ma è un buon punto di partenza per analizzare il tutto no?! Il codice completo lo trovate su questo Gist di Github (a proposito: se vi va, date un occhio anche alle altre mie repo e fatemi sapere che ne pensate).
Credits: Photo by Food Photographer | Jennifer Pallian on Unsplash