JQuery: Script Multilingua, the easy way


Deprecated: Function create_function() is deprecated in /var/www/vhosts/developercorsaro.it/httpdocs/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

Vi presento un Work-around molto semplice per eseguire i nostri Script a seconda della lingua visualizzata sulla pagina web. Se il nostro script deve fare cose diverse (o non fare nulla) a seconda della lingua che stiamo visualizzando sul browser, quello che possiamo fare è guardare quale è l’attributo LANG contenuto all’interno del tag html e utilizzarlo come selettore di JQuery, mi spiego meglio:

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
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.
Nello snippet che segue abbiamo assunto di voler inserire un testo tradotto per l’elemento EL quindi abbiamo sfruttato il selettore di JQuery TAG[ATTRIBUTE] in questo modo:

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
<script>
/**
* Developer Corsaro.it - JQuery Translate String
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


       jQuery('document').ready(function ($) {

           /*Assumendo ad esempio <html lang="en-US"> */
          $('html[lang="en-US"] #EL').text("eng TRANSLATED");

        });
    </script>

Utilizzi

Non è il modo migliore di farlo, ma è uno dei più furbi, con questo script possiamo andare ad esempio a tradurre alcuni elementi della pagina (ad esempio pulsanti, titoli, etc)

Lo hai trovato utile? Codividilo con i tuoi follower :)


JQuery: azioni con i Cookie

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.

Lo hai trovato utile? Codividilo con i tuoi follower :)