Tuto Compte à rebours fictif d’une promotion limitée dans le temps + stock disponible sur shopify

Nous allons apprendre à créer un Countdown timer comme Hurrify mais en gratuit

Stock aléatoire entre 2 et 20 et décroit de 1 toutes les 11 secondes

Le Compte à rebours commence à 20mn pour donner un sentiment d’urgence

Exemple en image:

timer

1 Rendez vous sur votre administration et cliquez sur « online store »

2 Cliquez sur le bouton Action puis Edit HTML / CSS

3 Trouvez le dossier Sections et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient

4 Trouvez le fichier product-template.liquid ou product.liquid selon le thème et cliquez dessus

5 Trouvez la partie de code suivante: {{ product.description }} et copiez/collez le code ci-dessous juste avant

{{ product.description }}

<div id="gdcdtimer"><br />
<style>#progress_bar{margin-top:25px;max-width:550px;margin:0 auto;}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));background-size:40px 40px}.items-count{margin-top:0px;margin-bottom:0px}.count{color:#a94442;padding:1px}.items-count p{padding-bottom:5px;margin:0;text-transform:uppercase;font-weight:700;text-align:center;font-family:"Open Sans",Arial,sans-serif}.progressbar{position:relative;display:block;background-color:#ca0000;border:1px solid #ddd;margin-bottom:15px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000;width:0;margin-bottom:0;height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block;margin-bottom:15px}#clock-ticker .block{position:relative;color:#000;font-weight:bold;float:left;text-align:center;width:25%}#clock-ticker .block .flip-top{width:100%;height:39px;line-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:100%;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="items-count" id="progress_bar"></div><div id="clock-ticker" class="clearfix"><div class="block"><span class="flip-top" id="numdays">0</span><br><span class="label">Jours</span></div><div class="block"><span class="flip-top" id="numhours2">0</span><br><span class="label">Heures</span></div><div class="block"><span class="flip-top" id="nummins2">20</span><br><span class="label">Minutes</span></div><div class="block"><span class="flip-top" id="numsecs2">36</span><br><span class="label">Secondes</span></div>
<p class="progress-bar-texte" style="text-align:center;padding-top:15px;clear:both;">La promotion expire à la fin du compte à rebours !</p></div><br /></div> 
<div>  

Attention il se peut suivant votre thème que vous ayez 2 {{ product.description }} donc mettez le code au 2 endroits !

6 Retournez dans Assets et trouvez votre fichier .js (theme.js, timber.js, style.js selon le thème) et cliquez dessus, rendez vous tout en bas du fichier et copier/coller ce code:

$( document ).ready(function() {
 function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}
 // Settings are here
 var total_items = 50;
 var d = new Date();
 var min_items_left = 12;
 var max_items_left = 20;
 var remaining_items = randomIntFromInterval(min_items_left, max_items_left);
 var min_of_remaining_items = 2;
 var decrease_after = 0.27; 
 var decrease_after_first_item = 0.23; 
 (function($){$.fn.progressbar=function(){var a="<p>Dépêchez-vous : seulement <span class='count'>"+remaining_items+"</span> en stock.</p>"+"<div class='progressbar'><div style='width:100%'></div></div>";this.addClass('items-count');this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find('.progressbar div:first').addClass('less-than-ten')}a.find('.progressbar').addClass('active progress-striped');setTimeout(function(){myanimate(a.find('.progressbar div:first'),b);a.find('.progressbar').removeClass('active progress-striped')},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest('.progressbar').css('width'));var e=Math.floor(100*parseInt(a.css('width'))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css('width',c+'%');if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours2");var theMinsBox=$("#nummins2");var theSecsBox=$("#numsecs2");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=59; var nmin=19; var nhrs=0; var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("0");theMinsBox.html("00");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});});
});

7 Il ne vous reste plus qu’a cliquer sur le bouton Save en haut à droite pour valider vos modifications !

Merci de me contacter pour toute question ou demande particulière

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

72 commentaires sur “Tuto Compte à rebours fictif d’une promotion limitée dans le temps + stock disponible sur shopify

    1. dgeo22

      Bonjour, Non ce code est générique sur tous les produits cela dit si vous vous y connaissez un peu en code je peux vous expliquer comment le faire apparaitre sur tel ou tel produit mais c’est assez délicat à expliquer ici meme

    1. dgeo22

      Salut, c’est un peu complexe mais en gros il faut aller dans le fichier .scss et mettre #gdcdtimer { display:none; }
      Ensuite aller sur le site et sur la fiche produit et appuyer sur F12 pour ouvrir la console du navigateur ensuite repérer dans la balise body l’ID=….
      Prendre l’identifiant genre outil-de-cuinse-genial le copier et retourner dans le .scss
      Coller le outil-de-cuinse-genial rajouter le # devant et rajouter le #gdtimer pour avoir un code comme ca:
      #outil-de-cuinse-genial #gdtimer { display:block; }
      Bonne chance 😀

      1. Gaël

        Bonjour, je vois un peu comment faire ta manip, mais je ne vois pas du tout l’ID de la page dans le Body 🙁 y’en a tellement, je ne sais pas lequel prendre, et pour être honnête j’ai essayé un peu tous et cela n’a rien fait. 😀 ou se trouve cet ID dans le body ? ^^ Merci pour ton aide

      2. test

        Bonjour et merci pour tes astuces.
        J’ai pu faire apparaître le compteur que sur certaines pages grâce à tes conseils (avec quelques modifications).
        Saurais tu comment diminuer la taille du compteur. Je le trouve vraiment très gros.

        Merci

  1. Zoé

    Bonjour!
    Un gros merci! J’aurai voulu enlever juste le nombre en stock Soit la ligne :  » Dépêchez vous : il en reste TELNUMERO en stock! » Mais impossible avec mes petites bases de HTML… C’est possible de l’enlever?

  2. Flo

    Salut,

    Ton travail est simplement formidable ! je t’ai fait un don de 5€ pour t’encourager
    Cela pourrait devenir régulier par la suite !

    J’ai donc mis ces lignes de codes et tout est niquel… sauf que le timer est en bas
    Possibilité de le positionner sous « ajouter au panier » ?

    Merci à toi !

    1. dgeo22

      Salut 🙂 Non c’est un code gratuit :p il est possible d’en faire un avec cookies et compagnie mais la c’est du développement specifique, peut etre un jour 😉

  3. Pascale

    Bonjour, Je voudrais mettre ce code mais j’ai un doute!
    On doit coller l’ensemble indiquer avant cette ligne ;
    ou apres « item »?

    Merci pour tous vos tutoriels!

  4. Styven

    Salut, j’adore se que tu fait !
    Mai j’ai un petit soucis, le compte a rebour est affiché mai elle reste bloqué je ne comprend pas et la barre {{ product.description }} je ne trouve pas sur les source de code

    1. dgeo22

      Salut, en jouant avec les valeurs, diminue
      var min_items_left = 12;
      var max_items_left = 20;
      var min_of_remaining_items = 2;
      var decrease_after = 0.27;
      var decrease_after_first_item = 0.23;

  5. Samy

    salut,
    j’ai un problème avec le code, il fonctionne mais le menu déroulant permettant de choisir une option pour un produit donné reste bloqué donc impossible de choisir une taille pour un vêtement par exemple. Sais-tu comment régler ce problème ? Pour info j’ai un thème custom.

  6. Gael

    Salut,
    un nouveau message pour malheureusement te dire que ça ne fonctionne pas avec le thème Narrative…Il n’y a pas {{ product.description }} et il y a 2 fichiers .js dans Assets… Je ne sais pas comment faire là c’est dommage!
    Tu sais si ce thème Narrative est différent des autres thèmes?

    Merci pour ton retour et pour ce que tu fais!

  7. Benjy

    Tes astuces nous aides beaucoup, alors Grand Merci pour tous ce que tu fais
    Stp, est ce que tu peut nous expliquer comment faire pour augmenter la durée du compte a rebours par exemple 8 heurs ou 24 heures.

    Merci bcp

        1. dgeo22

          Le temps est malheureusement un luxe que je n’ai plus :p mais fait ctrl + f dans le fichier et trouve ce0201 ensuite remplace le par ff6600 pour orange, 00ff00 pour vert etc 😉

  8. Pirard

    Bonjour Geoffrey,

    Merci pour tous les excellents tutos qui tu nous offres gratuitement. Je voudrais seulement afficher le nombre d’exemplaires restant en stock sans afficher le timer. Quelles lignes de code dois-je retirer ?

    1. dgeo22

      Bonjour et merci pour le message
      Va dans assets – theme.scss.liquid ou timber.scss.liquid ou autre .scss.liquid et tout en bas colle ca
      #clock-ticker { display:none !important; }

    1. dgeo22

      Salut, dans votre fichier assets – theme.scss.liquid ou timber.scss.liquid ou style.scss.liquid tout en bas copiez/collez ceci:
      #clock-ticker { display: none !important; }

  9. Julien

    Bonjour,
    Tout d’abord un grand merci pour tes tutos !
    J’ai une question : je souhaiterais que le temps de ce compteur soit défini en fonction d’une date butoir. De manière à pouvoir avoir la même date que dans ma bannière qui est parametrée grâce à un autre de tes tutos (« TUTO COMPTE À REBOURS D’UNE PROMOTION SUR SHOPIFY (DATE BUTOIR) »).
    Peux-tu me donner une piste pour que j’essaye de mettre ca en place ?
    Merci d’avance.
    Julien

    1. Dgeo GD

      Bonjour et merci pour le com
      Trop complexe pour mixer les 2 sans un gros développement. il faut donc choisir le date buttoir et adapter le style pour qu’il ressemble à l’autre 😉

  10. Ludwig

    Bonjour,

    Merci pour le code, ça fonctionne par contre mon menu déroulant ne fonctionne plus …

    Thème : Venture

    Si tu sais comment faire pour le rétablir, je te remercie.

    1. Dgeo GD

      Bonjour,

      Supprime ce que tu as copié/collé et recommence bien étape par étape. si ca fonctionne tjs pas c’est que le thème n’est pas compatible avec mes codes

  11. Guillaume BRUNET

    Bonjour,

    Pour pouvoir afficher le compte à rebours sur seulement quelque produit je n’ai pas réussi malgré votre réponse plus haut dans les commentaires.

    Vous dites : « Salut, c’est un peu complexe mais en gros il faut aller dans le fichier .scss et mettre #gdcdtimer { display:none; } »

    Le fichier .scss est bien le fichier timber.scss ?
    Et on doit coller simplement le #gdcdtimer { display:none; } tout en bas avec le #Nom du produit devant ?

    Je te remercie pour tout ce que tu fais et apporte c’est vraiment très utile merci

    En te souhaitant une bonne journée

    1. Dgeo GD

      Bonsoir, merci pour le com
      Oui c’est le timber. non #gdcdtimer { display:none; } tout en bas et juste en dessous #nomduproduit #gdcdtimer { display:block; } pour que celui ci soit visible

  12. agostino

    slt Geo! Merci pour ce tuto je cherchais justement un bon stock countdown! Par contre une petite question, est-ce possible d’empêcher que lorsque que le stock descend jusque 2, le stock countdown ne se reset pas ? (qu’il reste à 2 en gros :p )

    merci!

  13. mickael

    Bonjour, un petit truck me dérange il i a marquer 5 en stock puis quand on actualise la page cela revient a 15 en stock a t’il une solution pour éviter cela avec ip par exemple ? Un client qui voit 5 en stock, il actualise puis la 15 , « il va voir que c’est du fack puis ils risque tout simplement de partir !

    1. Dgeo GD

      Bonjour, certes et d’ailleurs sur Speedfly 1.09 qui sortira en Mai, le compte à retours aura ces options 😉
      Etant assez complexe à mettre en place je dois mettre ce tuto et le code à jour mais dés qu’il sera terminé côté Speedfly (courant Mai)
      La liste des améliorations à venir:
      Prise en compte du temps lorsque le client part et revient (jours, heures, minutes)
      Stock bloqué à 2

      Bonne journée

  14. dylan

    Bonjour,

    En ayant mit votre code : #clock-ticker { display:none !important; } , Mon slideshow est devenu tout blanc.
    j’ai mis votre code dans ‘theme.js’ tout en bas.
    Je ne comprends pas… je ne peux rien faire..
    Aidez moi s’il vous plait ! merci beaucoup

    1. Dgeo GD

      Bonjour, non surtout pas dans un .js, la vous l’avez mis dans theme.js.liquid il faut le mettre dans un fichier .scss.liquid ou .scss ou .css
      Donc retirez le code mis et mettez le dans le bon fichier theme.scss.liquid /timber.scss.liquid / style.scss.liquid ou autre selon le theme

  15. Matthieu

    Bonjour, merci pour vos tutos c’est top.

    Malheureusement j’ai essayé d’installer plusieurs de vos codes et notamment celui ci mais cela ne fonctionne pas. On ne voit aucun changement sur la page. J’utilise le thème Fastlane

    Cordialement.

  16. Cindy

    Salut 🙂
    Merci pour tous ces tutos super ! Tout est parfaitement expliqué et clair.

    Peut être pourrais tu m’aider pour un problème déjà cité plus haut, mais resté sans réponse précise.

    J’ai ajouté le code simulant un nombre de personnes sur la page (« il y a actuellement *** sur cette page »). Le problème est que mon compteur n’est pas du tout rationnel, il passe de 2 à 956 et en terminant par -12645… :-/

    Plus haut tu indique que ce genre de problème survient lorsque l’on a ajouté un de tes autre code en parallèle seulement après verification je n’est pas trouvé ce fameux code dans ma structure..

    J’espère avoir été clair 😉

    Merci par avance,
    Cindy

  17. franck

    Salut et merci pour ton aide!
    j ai un soucis j ai voulu mettre le compte a rebours, j ai un peu galéré et quand j ai sauvegarder je me suis rendu compte que mon diaporama n est plus affiché sur mon site . Et je n arrive pas a le remettre alors qu il est affiché comme etant present dans les settings merci ..

  18. Louis

    Bonjour, j’aimerais savoir comment faire pour modifier la le temps du décompte s’il vous plaît.
    J’ai vu qu’une personne vous l’avez demandé, mais que vous étiez passer en MP donc pas de moyen pour moi de voir 🙂

    J’attends votre réponse ! merci bien.

    Au fait ! Merci pour le code !!

  19. yann

    Bonjour,
    Un grand grand merci pour tes tutos. Je me demandais s’il était possible de laisser le compteur à 2 pour le stock, une fois qu’il a décrémenter.
    Si le client actualise, il va voir qu’il y a un souci.
    Tu peux parler d’une maj au mois de mai en ce qui concerne ce souci.
    Peux t’on prendre en compte une adresse ip pour rester crédible face au client ?
    Encore merci

  20. david

    Bonjour,

    J’ai le thème Debut.
    Je me suis aperçu d’une chose, tous fonctionne correctement sur la version ordi par contre sa crée des bugs sur la version smartphone.

    Impossible de supprimé l’article sélectionné, le bouton ne fonctionne plus. Après plusieurs test cela vient du code collé dans thème.js

    Une idée car le compte à rebours est bien pratique.

  21. viomode

    Bonjour !
    un grand merci pour ton tuto et pour l’outil.

    il existe UN PROBLEME avec moi, quand j’installe tout comme indiqué , le bouton de barre de recherche ne fonctionne plus, et même le menu déroulant du catalogue ne marche pas.
    et ça c’est juste après l’ajout du dernier code dans theme.js

    pour quoi ça ?

  22. Georgi Iliev

    bonjour , comme sur les autres tuto des compteurs … des que jinstale les codes je perds tout mes photos du produit , et les secondes bougent pas … help ?? merciii

Laisser un commentaire

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

*
*