Script cookie bar jQuery responsive semplice e completo

Oggi vi propongo uno script di mia realizzazione: cookie bar jquery responsive per gestire al meglio la cookie EU law obbligatoria per tutti i siti.

Con l’introduzione della cookie law europea praticamente l’80% dei siti deve obbligatoriamente disporre di una barra di notifica all’interno del sito che avverte il visitatore dell’uso di cookie di profilazione, tracciamento o segmentazione.

Di fatto il web si è pertanto “riempito” di barre – più o meno corrette  ai fini della cookie law stessa.  La soluzione che vi illustrerò di seguito è una soluzione semplice e completa per fronteggiare e districarsi dalla cookie law nel modo piu efficace possibile.

L’accettazione della cookie law avviene sia tramite la pressione del pulsante accetto che tramite lo scroll implicito della pagina.

Demo click:

Cookie_Click

Demo scroll:

Cookie

Download – 5€

Cookie Bar Script Responsive

 
 

Disclamer: Non sono responsabile per qualsiasi ripercussione legale dovuta all’uso dello script o a eventuali mancanze dello stesso.

Una volta pagato ti verrà inviato un link all’indirizzo email fornito nel pagamento. Qualora avessi problemi riceverai supporto su [email protected] oppure contattami tramite questo form.

NOTA: non viene fornito nessun supporto per bug, personalizzazione e implementazione dello script. Viene fornito supporto solo per eventuali problemi di reperimento dello script dopo aver effettuato il pagamento.

Uso dello script

CUSTOM / STATICO

Una volta scaricato lo script copiate il file trgcookiebar.js all’interno del vostro hosting. Dopodichè collegate il file all’interno del vostro sito:

<script src="percorso/al/file/trgcookiebar.min.js"></script>
<script type="text/javascript"> 
 //Sviluppata da Riccardo Mel
 //www.targetweb.it - riccardomel.com

 //Trigger - Dove far generare la cookiebar - default:body
 //Dominio - no http 
 //Link privacy estesa - no http
 //Framework - Scegli tra: bootstrap, custom - default:bootstrap
 //Position - Scegli tra: fixed, absolute, relative - default:fixed 
 //Custom CSS - Passa una variabile contenente i tuoi fix css  es. var customcss_fix = "#cookiebox{ background:blue;}";

 CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", ""); 
</script>

WORDPRESS

Se utilizzi WordPress aggiungi il codice sopra-indicato all’interno della cartella del tuo tema wp-content/themes/tuotema/js dopodichè usa il seguente codice:

<script src="<?php bloginfo('template_url'); ?>/js/trgcookiebar.min.js"></script>
<script type="text/javascript"> 
//Sviluppata da Riccardo Mel
//www.targetweb.it - riccardomel.com

//Trigger - Dove far generare la cookiebar - default:body
//Dominio - no http 
//Link privacy estesa - no http
//Framework - Scegli tra: bootstrap, custom - default:bootstrap
//Position - Scegli tra: fixed, absolute, relative - default:fixed 
//Custom CSS - Passa una variabile contenente i tuoi fix css  es. var customcss_fix = "#cookiebox{ background:blue;}";

CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", ""); 
</script>

NOTA: se utilizzi un child theme al posto di template_url usa get_stylesheet_directory_uri();

Et voilà! barra implementata. Continua a leggere per scoprire come personalizzare il plugin.

Guida alla personalizzazione della cookie bar jQuery

Di default la barra viene innestata automaticamente dentro il body del sito in modo completamente dinamico e viene renderizzata con un colore nero con opacità 0.7 in position fixed (ovvero rimane in sovra-impressione sopra il sito). E’ possibile tuttavia agire su tutta una serie di parametri che vi elenco qui sotto:

1) Trigger – Il primo parametro da passare alla funzione è l’elemento che permette di impostare dove far generare la cookiebar – Di default è il body ma -sopratutto nel caso impostiate il position relative  alla cookiebar – è consigliabile usare un trigger differente. Ad esempio possiamo posizione un div del tipo:

<div id="holder_cookiebar"></div>
[..RESTO DEL SITO..]

E passare alla cookie bar come primo parametro al posto di “body” “#holder_cookiebar”.

2) Dominio –  Il secondo parametro da inserire è il dominio. Di fatto serve per rendere l’accettazione persistente in tutto il dominio in esame, sottodomini compresi. Inserisci solo il dominio ad esempio : targetweb.it senza http:// davanti.

3) Inserisci il link alla privacy estesa senza http:// davanti. es: targetweb.it/privacy/

4) Framework – Scegli tra: bootstrap, custom – default:bootstrap

Il quarto parametro serve per comunicare allo script quale framework css state utilizzando. Qualora usaste “bootstrap” (che è la soluzione di default) il plugin sarà generato in modo automatico completamente responsivo e pronto all’uso. Potete però passare la variabile “custom” se usate un differente framework o un css personalizzato. In questo caso ecco la lista delle classi e ID css da usare per personalizzare la barra:

#cookiebox
#cookiebox p
#cookiebox span
.cookie-container
.cookie-row
#cookie-text
#cookie-controlbar
.close-cookiebar

5) Position – Scegli tra: fixed, absolute, relative – default:fixed

Il position è utile per variare il comportamento della barra a seconda del vostro progetto. In alcuni casi/progetti certi clienti non desiderano il position fixed in quanto la barra potrebbe coprire il logo o il menu. In questi casi prediligete la soluzione “relative” (impostando un opportuno trigger al punto #1).

6) Custom CSS – Di fatto il sesto parametro permette di passare una variabile contenente i tuoi fix css personalizzati e innestarli direttamente all’interno dello script. Per farlo vi basterà impostare una variabile contente le regole css da innestare:

var customcss_fix = "#cookiebox{ background:blue;}"; // in questo hook rendo la barra blu

Una volta impostata la variabile modificate la funzione in questo modo:

 CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", customcss_fix);

E’ tutto! dovreste avere tutto il necessario per implementare la barra cookie nel vostro sito/progetto web in modo professionale e altamente personalizzabile a seconda delle esigenze specifiche di ogni sito. E’ vietato eliminare il credits all’interno del codice dello script.

Se questo articolo ti è stato utile condividilo sui tuoi social network preferiti!

Image credits “Cookie” @Shutterstock

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

creare-immagini-ottimizzate-social-network
Up Next:

Creare immagini ottimizzate per i social network

Creare immagini ottimizzate per i social network