Pensate per un attimo a questo scenario: volete creare un pop-up di iscrizione alla newsletter da mettere in home page del vostro sito web: mostrarlo ad ogni refresh diventa davvero troppo invaso e fastidioso per i nostri utenti, tant’è che il più probabile risultato è che nessuno si iscriverà alla nostra lista, o che se ne andrà infastidito verso qualche altro sito web. La cosa migliore da fare questi casi è mostrare il pop-up solo una volta per sessione, e per fare questo ci viene in aiuto la librearia di JQuery: JQuery Cookie. Questa libreria ci fornisce tutte le funzionalità necessarie per creare un cookie in Javascript e di manipolarlo.
Come funziona questo Snippet?
Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery (in questo caso abbiamo linkato in prima riga JQuery Cookie da remoto, ma potete facilmente includerlo nel progetto).
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.
Viene effettuato un controllo su ‘cookie-name’ per vedere se il nostro cookie è già stato creato in precedenza, ciò vorrebbe dire che abbiamo già eseguito questa azione e che quindi non deve essere ripetuta. Se NON esiste il cookie allora vado libero con la mia esecuzione (in questo esempio mostriamo una modale Bootstrap ma potete inserire una qualsiasi funzione). Finita l’esecuzione dei comandi viene creato il cookie e gli viene settata anche una durata (7 giorni in questo caso), in questo modo al prossimo refresh non sarà di nuovo eseguita nessuna istruzione finchè questo resta valido.
LO SNIPPET
Di seguito lo snippet, pronto per il copia-incolla 🙂
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script> /** * Developer Corsaro.it - JQuery Cookie Check * Website: https://developercorsaro.it * cesare@developercorsaro.it */ jQuery('document').ready(function ($) { if ($.cookie('cookie-name') == null) { setTimeout(function() { $('#modal-shop').modal('show'); // doStuff }, 10000); $.cookie('cookie-name', '7'); } }); </script> |
Utilizzi
Script estremamente versatile, può essere incluso in qualsiasi punto del DOM, per effettuare i test basterà eliminare i cookie dal browser svuotando la cronologia.