Come creare un contatore alla rovescia in un negozio online

Spesso per vendere di piu commercianti utilizzano un trucco che sta nel fatto che lo sconto applicato dura soltanto un certo periodo per esempio soltanto un giorno. La stessa cosa posiamo realizzare anche per il nostro negozio online oppure su una Landing page o sulla pagina di iscrizione,

Offrendo per esempio qualcosa gratuito in cambio della registrazione o che sconto sul prodotto indicato e valido soltanto prossimi 12 ore. Oppure che bonus gratuito indicato dura soltanto 24 ore per esempio e quindi per realizzare questo dobbiamo inserire sulla nostra pagina web un contatore alla rovescia.

 

ClassyCountdown  è un plugin jQuery per creare rapidamente contatori alla rovescia. Per la visualizzazione di quadrante viene utilizzato elemento canvas di HTML5. Abbiamo 12 temi alla nostra disposizione posiamo dire che abbiamo soluzioni per tutti i gusti.

Parametri del conattore che posimo modificare

theme sono temi del contatore. Puo prendere valore: flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide o white-black.

end -

now -

labels – visualizzare il testo days/hours/minutes/seconds o no .

style – propri stili per contatore.

labelsOptions - parametro, dove posiamo inserire il proprio valore del labels in italiano. Per esempio:

labelsOptions: {
    lang: {
        days: 'Giorni',
        hours: 'Ore',
        minutes: 'Minute',
        seconds: 'Secondi'
    },
    style: 'font-size:0.5em; text-transform:uppercase;'
}

 

Come funziona contatore

Metodi di funzionamento

onEndCallback() – una funzione di azione opposta, che comincia dopo la fine del conteggio.
Realizzazione

1.Per prima cosa è necessario collegare libreria  jQuery alla nostra pagina:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

2.Poi è necessario collegare il plug-in jQuery classycountdown, foglio di stile CSS e le rispetive librerire (jQuery knob и jQuery throttle)

<script src="/js/jquery.classycountdown.min.js"></script>
<script src="/js/jquery.knob.js"></script>
<script src="/js/jquery.throttle.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.classycountdown.min.css" />

3.Dopo di che è necessario creare un blocco HTML, dove sara sulla pagina creato il nostro conattore .

<div class="countdown"></div>

4.L'ultimo passo - inizializzare il plugin applicandolo all'blocco che abbiamo appena creato.

 $('.countdown').ClassyCountdown({
    theme: "flat-colors",
    end: $.now() + 10000
});

+ 10000 quantita di tempo indicata in secondi per questo che nel esempio il tempo alla rovescia parte dal 2 ore 46 minute e 38 secondi qui dovresti indicare il valore voluto.

 codice finale

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="www.ioeweb.it" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/js/jquery.classycountdown.min.js"></script>
    <script src="/js/jquery.knob.js"></script>
   <script src="/js/jquery.throttle.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.classycountdown.min.css" />
    <title>Senza nome 2</title>
</head>
<body>
<div class="countdown3"></div>
<script>
 $('#countdown3').ClassyCountdown({
    theme:"flat-colors-black" ,
    end: '868325',
now: '400',
labels: true,
labelsOptions: {
    lang: {
        days: 'Giorni',
        hours: 'Ore',
        minutes: 'Minute',
        seconds: 'Secondi'
    },
    style: 'font-size:0.5em; text-transform:uppercase;'
}
});
</script>
</body>
</html>

Risultato:

Potete anche notare che quando la pagina viene ricaricata, il conteggio ritorna al suo stato iniziale. La cosa che non dovrebbe sucedere perche il conteggio dovrebbe procedere indipendentemente dal numero di volte che è stata ricaricare la pagina. Vediamo di modificare  il codice in jQuery.

Nel fail jquery.classycountdown.js, che si trova nella cartella  js, trovi la stringa

secondsLeft = settings.end - settings.now;

e sostituisci con questa:
date = new Date(settings.end.split(' ').join('T'));
timestamp = date.getTime();
secondsLeft = (timestamp - settings.now) / 1000;

Al momento di inizializzazione del tuo contatore il parametro end deve essere cosi:

end: "2015-01-16 21:30:00"

Atenzione! Data nel formato aaaa-mm-gg oo:mm:ss, cioe al inizo abbiamo mese e solo dopo giorno. Viene contato il tempo rimasto uguale per tutti sia per abitanti della USA sia per quelli della Cina: unica cosa che per americani questo conto alla rovescia finirà per esempio a mezzanotte secondo il loro fuso orario e per un cinese al mattino (causa differenza nel fuso orario). Se volete che per ogni visitatore il conteggio finirà in un certo orario per esempio alle 00:00 secondo il suo fuso orario indipendente dove si trova dovremo cambiare questa stringa

timestamp = date.getTime();

e sostituire con segente
timestamp = date.getTime() + (date.getTimezoneOffset() * 60 * 1000);

nel codice sopra. Non dimenticate anche d’ immettere la data giusta nel parametro end al momento di inizializzazione  del contatore.

 
Letto 1158 volte