Création d'un compteur evergreen

Pascal29992 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   -  
Pascal29992 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je cherche à créer un compteur moi-même, comme dans cette URL: https://www.tresor-ethnique.com/collections/austronesien/products/collier-amazonite-perles-tete-taureau
et l'intégrer dans la 5 ème ligne (à la place du texte en rouge "quelques heures".
Il remplacerait alors le gros compteur du dessus.

Donc j'aimerais qu'il démarre à mettons 0j 17h 22min 36s, mais surtout qu'il ne se réintialise pas lorsque l'utilisateur part ou rafraîchit la page.
Donc lié à un cookie ou autre.
Bonus : il repart une fois qu'il est tombé à zéro

Comment je peux mettre ça en oeuvre ?

Merci :)

A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour
En utilisant du setTimeout et en lisant/stockant la valeur dans un cookie en effet.

Mais si l'utilisateur vidr sin cache... Ca répartira à zero....

Le mieux alors serait de stocker dans une bdd et daller lire/enregistrer la valeur en ajax.

0
Pascal29992 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   4
 
Merci pour les conseils, comme je ne sais pas trop comment gérer la BDD et la valeur en ajax, je vais m'en cantonner à la première valeur pour l'instant

J'ai recopié le code de cette URL qui affiche un timer : http://ww25.pancake-malin.com/

Ce qui donne ce que j'ai inséré dans le champ du thème : 

Plus que <strong><font color="#ff0000"><div class=”clockNew”>0jours 10hrs 36mins 29secs</div>
</font></strong> pour profiter de la promotion !
<div class="timmer_data" data-date="03/06/2017 10:1 AM" data-restart="86400" data-stock_min_count="5" data-stock_max_count="15" data-stock_reset_time="5"></div>



Il affiche la valeur statique mais il ne s'update pas
Il manque du code ?

Merci encore, joyeux Noël
Pascal
0
Pascal29992 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   4
 
J'ai eu une réponse en parallèle, j'ai créé un code complet : 

Plus que <strong><font color="#ff0000">
<div id="clockdiv">
<span class="days"></span><div class="smalltext">jours</div>
<span class="hours"></span><div class="smalltext">hrs</div>
<span class="minutes"></span><div class="smalltext">mins</div>
<span class="seconds"></span><div class="smalltext">secs</div>
</font></strong> pour profiter de la promotion !
</div>
<script type="text/javascript">

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = ('0' + t.days).slice(-2);
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
var timeInDays = 12;
var timeInMinutes = 4;
var timeInSeconds = 26;
var currentTime = Date.parse(new Date());
if(document.cookie && document.cookie.match('myClock')){
  var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}
else{
var deadline = new Date(currentTime + timeInDays*60*60*1000 + timeInMinutes*60*1000 +  timeInSeconds*1000);
  document.cookie = 'myClock=' + deadline + '; path=/; domain=. https://www.tresor-ethnique.com/';
initializeClock('clockdiv', deadline);
}
</script>


J'ai un petit problème avec ce code :


1) Il affiche le résultat avec des sauts de ligne (8 lignes) au lieu d'une
Normalement il ne devrait rien y avoir avec les balises <div> et <span>, une idée ?

2) Dans la fin du code, le but est d'utiliser un cookie pour sauvegarder la durée si l'utilisateur navigue entre les pages.
Ici le cookie est 'myClock' mais je n'ai pas bien compris comment je pouvais repérer sur mon site avec quel cookie je pouvais conserver cette valeur ?

3) Avec ce code actuel, j'imagine qu'une fois le timer à 0, il ne reviendra pas à sa valeur initiale.
Comment paramétrer un evergreen countdown timer ?

Merci :)
0