Tuto comment mettre un Timer Countdown sur le checkout de shopify

Nous allons créer un Compte à rebours de 10mn de réservation de la commande au niveau du Checkout

Un système d’anotation de commentaire vous permettra de vous repérer et de ne pas faire de bétise sur cette zone très sensible !

N’oubliez pas que c’est la zone de script de la page de paiement de Shopify donc ne faites pas n’importe quoi 😉

Vous devez avant ce tuto mettre votre code de suivi coogle analytics sinon cela ne fonctionnera pas

Code à copier/coller dans Préférences – zone google analytics – la zone de script

Code:

// Timer code de réservation de la commande

function createCookie(a,b,c){if(c){var d=new Date;d.setTime(d.getTime()+c*60*1e3);var e="; expires="+d.toUTCString()}else var e="";document.cookie=a+"="+b+e+"; path=/"}function readCookie(a){for(var b=a+"=",c=document.cookie.split(";"),d=0;d<c.length;d++){for(var e=c[d];" "==e.charAt(0);)e=e.substring(1,e.length);if(0==e.indexOf(b))return e.substring(b.length,e.length)}return null}function eraseCookie(a){createCookie(a,"",-1)}function crtmedir(a){var b=document.createDocumentFragment(),c=document.createElement("div");for(c.innerHTML=a;c.firstChild;)b.appendChild(c.firstChild);return b}function startTimer(start, duration, display){var diff,minutes,seconds;function timer(){diff=duration-(((Date.now()-start)/1000)|0);minutes=(diff / 60)|0;seconds = (diff % 60)|0;minutes = minutes < 10 ? "0" + minutes : minutes;seconds = seconds < 10 ? "0" + seconds : seconds;display.textContent = minutes + ":" + seconds; if (diff <= 0){clearInterval(inti);document.getElementById("countdownhere").innerHTML = "La réservation de la commande est terminée.";start = Date.now() + 1000;}};timer();var inti = setInterval(timer, 1000);}var pdm = crtmedir('<div class="countdownholder"><div id="countdownhere" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:20px 0px">Votre commande est réservée pour <span id="time"></span> minutes!</div></div>');if(window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1 && document.location.href.indexOf('orders') === -1){window.onload = function () { document.getElementsByClassName('main__header')[0].appendChild(pdm);var dolzina=10;var ten=60*dolzina;var starttime=Date.now();var xcnt=readCookie('prtcntdwn');if(xcnt){if(starttime<xcnt){ten=(xcnt-starttime)/1000;}else{eraseCookie('ptcntdwn');createCookie('prtcntdwn',Date.now()+(ten*1000),ten+1);}}else{createCookie('prtcntdwn',Date.now()+(ten*1000),ten+1);}display=document.querySelector('#time');startTimer(starttime, ten, display);};}

// Fin du code du timer de réservation de la commande

Si vous souhaitez la version avec les images de sécurité prenez plutôt le bout de code ci-dessous

// Début du code - timer + image de sécurité au niveau du checkout

function createCookie(a, b, c) {
 if (c) {
 var d = new Date;
 d.setTime(d.getTime() + c * 60 * 1e3);
 var e = "; expires=" + d.toUTCString()
 } else var e = "";
 document.cookie = a + "=" + b + e + "; path=/"
}

function readCookie(a) {
 for (var b = a + "=", c = document.cookie.split(";"), d = 0; d < c.length; d++) {
 for (var e = c[d];
 " " == e.charAt(0);) e = e.substring(1, e.length);
 if (0 == e.indexOf(b)) return e.substring(b.length, e.length)
 }
 return null
}

function eraseCookie(a) {
 createCookie(a, "", -1)
}

function crtmedir(a) {
 var b = document.createDocumentFragment(),
 c = document.createElement("div");
 for (c.innerHTML = a; c.firstChild;) b.appendChild(c.firstChild);
 return b
}

function startTimer(start, duration, display) {
 var diff, minutes, seconds;

 function timer() {
 diff = duration - (((Date.now() - start) / 1000) | 0);
 minutes = (diff / 60) | 0;
 seconds = (diff % 60) | 0;
 minutes = minutes < 10 ? "0" + minutes : minutes;
 seconds = seconds < 10 ? "0" + seconds : seconds;
 display.textContent = minutes + ":" + seconds;
 if (diff <= 0) {
 clearInterval(inti);
 document.getElementById("countdownhere").innerHTML = "La réservation de votre commande a expirée.";
 start = Date.now() + 1000;
 }
 };
 timer();
 var inti = setInterval(timer, 1000);
}
var pdm = crtmedir('<div class="countdownholder"><div id="countdownhere" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:20px 0px">Votre commande est réservée pour <span id="time"></span> minutes!</div><div style="display:table;width:100%"><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/scanalert.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/paypalverified.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/mcafeesecured.png" style="margin:0 auto"></div></div></div>');
if (window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1 && document.location.href.indexOf('orders') === -1) {
 window.onload = function() {
 document.getElementsByClassName('main__header')[0].appendChild(pdm);
 var dolzina = 10;
 var ten = 60 * dolzina;
 var starttime = Date.now();
 var xcnt = readCookie('prtcntdwn');
 if (xcnt) {
 if (starttime < xcnt) {
 ten = (xcnt - starttime) / 1000;
 } else {
 eraseCookie('ptcntdwn');
 createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
 }
 } else {
 createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
 }
 display = document.querySelector('#time');
 startTimer(starttime, ten, display);
 };
}

// Fin du code - timer + image de sécurité au niveau du checkout

12 commentaires sur “Tuto comment mettre un Timer Countdown sur le checkout de shopify

  1. Chris

    Merci Geoffrey pour ce bout de code ! C’est top !
    J’ai une question, est-ce que je peux ajouter dans ce code une image ( ) avec un code promo et plutôt mettre comme texte : « votre code promo spécial expire dans 10min » ?

  2. Théophile

    Salut,

    Je suis désolé mais je n’arrive pas à trouver où il faut insérer ce bout de code…
    Lorsque je le met dans Préférences>Zone Google Analytics (dans les préférences du thème), cela ne fonctionne pas et Shopify m’indique qu’il y a une erreur et que le code google Analytics n’est pas du bon format…
    Serait-il possible de m’aider?

    Merci beaucoup.

  3. Luc

    salut geo !
    J’ai un problème, dans  » préférences  » ensuite  » google analytics  » une foi le code mis ça me met « il y a 1 erreur; L’extrait d’analyse ne semble pas valide (UA-xxxx-x)  »
    Merci

  4. jam

    Salut,
    super comme d’habitude ! c génial ce que tu fais !
    J’ai remarqué que quand t’arrives sur le checkout, le bouton payal apparaît brievement avant de disparaître, c’est possible de corriger ça ?

  5. Jul

    Bonjour, dans l’optique d’ajouter de l’urgence dès l’ajout au panier et non pas seulement à page de checkout : comment faire pour mettre ce timer sur la page du panier (la cart page) ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*