Menu

Création d'un compteur evergreen

Pascal29992 24 Messages postés lundi 6 novembre 2017Date d'inscription 3 février 2018 Dernière intervention - 18 déc. 2017 à 00:31 - Dernière réponse : Pascal29992 24 Messages postés lundi 6 novembre 2017Date d'inscription 3 février 2018 Dernière intervention
- 27 déc. 2017 à 22:41
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 :)

Afficher la suite 

Votre réponse

3 réponses

jordane45 21128 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 mai 2018 Dernière intervention - 18 déc. 2017 à 08:14
0
Utile
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.

Pascal29992 24 Messages postés lundi 6 novembre 2017Date d'inscription 3 février 2018 Dernière intervention - 24 déc. 2017 à 23:34
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 : https://www.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
Pascal29992 24 Messages postés lundi 6 novembre 2017Date d'inscription 3 février 2018 Dernière intervention - 27 déc. 2017 à 22:41
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 :)
Commenter la réponse de jordane45