Ma quanto è odiosa quell’icona che rimane fissa nell’angolo in basso a sinistra (o a destra) dello schermo?
Se anche tu usi CookieYes sul tuo sito, ti sarai probabilmente chiesto se non esista un modo per mantenere più pulito il suo funzionamento senza intaccare la “compliance GDPR”.
Premessa
Nella realtà quell’icona potrebbe benissimo rimanere nascosta, il punto è che per rimanere “compliance” al GDPR bisognerebbe trovare il modo di rendere disponibile la funzione di modifica delle preferenze ai Cookie, in un altra maniera.
Siccome però CookieYes non fornisce un link diretto per arrivare a quella sezione, spesso è bene far vedere che non nascondiamo volutamente questa possibilità all’utente.
La soluzione
Ho ragionato ad una soluzione molto semplice: lasciare quell’icona ben visibile al primo caricamento di pagina, in modo tale che sia presente e ben visibile in tutte le pagine, ma rendendola gradualmente trasparente all’avanzare dello scroll. In questo modo non finirà per andare sopra ad altri elementi importanti per la nostra pagina, come testi, immagini e altri pulsanti (CTA).
Il risultato lo puoi vedere proprio su questa pagina.
- Scorri tutto in alto –> l’icona di CookieYes si vede.
- Scorri verso il basso –> l’icona va in trasparenza fino a scomparire.
Come si ottiene questo risultato? con questo semplice snippet di codice:
#CSS
/* transizione morbida */ .cky-btn-revisit-wrapper { transition: opacity .2s linear; }
/* JS + jQuery */jQuery.noConflict()(function($){
"use strict";
$(document).ready(function(){
console.log("Hide CookieYes floating button --> ready!");
/* hide Cookie yes button after scroll */ var $win = $(window);
var $btn = null;
var fadeDistance = 300; // px: a 300px di scroll -> opacity 0
var ticking = false;
function setOpacity() {
if (!$btn || !$btn.length) { ticking = false; return; }
var sc = $win.scrollTop();
var t = Math.min(Math.max(sc / fadeDistance, 0), 1); // clamp 0..1
var op = 1 - t;
// se vuoi evitare click quando è trasparente:
$btn.css({ opacity: op, 'pointer-events': op > 0.05 ? 'auto' : 'none' });
ticking = false;
}
function onScroll() {
if (!ticking) {
ticking = true;
requestAnimationFrame(setOpacity);
}
}
function hookIfPresent() {
var found = $('.cky-btn-revisit-wrapper');
if (found.length) {
$btn = found;
// bind scroll/resize una sola volta
$win.off('.ckyfade').on('scroll.ckyfade resize.ckyfade', onScroll);
setOpacity(); // stato iniziale
return true;
}
return false;
}
// 1) Tenta subito
if (!hookIfPresent()) {
// 2) Osserva il DOM perché l'elemento è generato dopo
var obs = new MutationObserver(function () {
if (hookIfPresent()) { obs.disconnect(); }
});
obs.observe(document.documentElement || document.body, { childList: true, subtree: true });
// 3) Fallback: un check unico dopo 1.5s (se l’Observer venisse bloccato)
setTimeout(hookIfPresent, 1500);
}
});
});
Conclusioni
Inserendo questo codice nel tuo tema child, potrai ottenere l’effetto desiderato senza alcun effetto collaterale dal punto di vista legale.
