Tuto compte à rebours d’une promotion sur shopify (date butoir)

Nous allons créer un compte à rebours fictif d’une promotion sur une date limite

En gros vous allez renseigner 3 variables pour donner la date butoir de validité de la promotion

Vous pouvez voir l’exemple ici: https://dgeodev.com/compteur2/

N’oubliez pas de sauvegarder votre thème avant d’installer un tuto !

Partie CSS

Rendez vous dans online store – actions – edit code – assets

Trouvez votre fichier .scss.liquid

En général c’est theme.scss.liquid ou timber.scss.liquid ou default.scss.liquid ou style.scss.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

 

#countdownv2 {
 display:block;
 clear:both;
 margin:15px 0;
}
#countdownv2 span {
 font-weight:bold;
 color:#ff0000; 
}

Partie JS

Rendez vous dans online store – actions – edit code – assets

Trouvez le fichier .js.liquid

En général c’est theme.js.liquid ou timber.js.liquid ou default.js.liquid ou style.js.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Vous pouvez changer les valeurs des variables suivantes:

« dd » pour modifier le jour au format numérique (1,2,3… 28 …)

« mm » pour modifier le mois au format aphabétique en anglais (junuary, february, march, april, etc…)

« yyyy » pour modifier l’année au format numérique (2018, 2019 etc…)

ATTENTION ! il faut impérativement garder les doubles quotes afin d’éviter les catastrophes !!!

(function (e) {
e.fn.countdownv2 = function (t, n) {
function i() {
 eventDate = Date.parse(r.date) / 1e3;
 currentDate = Math.floor(e.now() / 1e3);
 if (eventDate <= currentDate) {
 n.call(this);
 clearInterval(interval)
 }
 seconds = eventDate - currentDate;
 days = Math.floor(seconds / 86400);
 seconds -= days * 60 * 60 * 24;
 hours = Math.floor(seconds / 3600);
 seconds -= hours * 60 * 60;
 minutes = Math.floor(seconds / 60);
 seconds -= minutes * 60;
 days == 1 ? thisEl.find(".timeRefDays").text("jour") : thisEl.find(".timeRefDays").text("jrs");
 hours == 1 ? thisEl.find(".timeRefHours").text("hr") : thisEl.find(".timeRefHours").text("hrs");
 minutes == 1 ? thisEl.find(".timeRefMinutes").text("min") : thisEl.find(".timeRefMinutes").text("mns");
 seconds == 1 ? thisEl.find(".timeRefSeconds").text("sec") : thisEl.find(".timeRefSeconds").text("secs");
 if (r["format"] == "on") {
 days = String(days).length >= 2 ? days : "0" + days;
 hours = String(hours).length >= 2 ? hours : "0" + hours;
 minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
 seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
 }
 if (!isNaN(eventDate)) {
 thisEl.find(".days").text(days);
 thisEl.find(".hours").text(hours);
 thisEl.find(".minutes").text(minutes);
 thisEl.find(".seconds").text(seconds)
 } else {
 alert("Mauvais format de date.... Example: 1 mars 2018");
 clearInterval(interval)
 }
}
var thisEl = e(this);
var r = {
 date: null,
 format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
$(document).ready(function () {
function e() {
 var e = new Date;
 e.setDate(e.getDate() + 60);
 dd = e.getDate();
 mm = e.getMonth() + 1;
 y = e.getFullYear();
 futureFormattedDate = mm + "/" + dd + "/" + y;
 return futureFormattedDate
}
var today = new Date();

/*#############################################
Début des Options à modifier / Jour / Mois / Année
Ne toucher à rien d'autre !
##############################################*/

var dd = '28'; // jour en chiffre (1,2,3 etc...)
var mm = 'April'; // mois en US (January, February, March, April, May, June, July, August, September, October, November, December) 
var yyyy = '2018'; // année en format yyyy

/*#############################################
Fin des Options à modifier 
Ne toucher à rien d'autre !
##############################################*/

$("#countdownv2").countdownv2({
 date: " " + dd + " " + mm + " " + yyyy + " 0:00:00", // Change this to your desired date to countdownv2 to
 format: "off"
});
});

Partie HTML

C’est la partie ou vous allez placer votre barre d’information

Rendez vous dans online store – actions – edit code – sections – product-template.liquid ou product.liquid

Si vous voulez mettre ce compte à rebours sur un seul produit vous pouvez mettre la partie HTML dans le descriptif de votre fiche produit en cliquant sur </> de votre éditeur 😉

Trouvez le zone du panier et Copiez/collez le bout de code ci-dessous avant la fermeture du </form> ou juste après

 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
<div id="countdownv2">
<div class="cont-countdownv2"><i class="fa fa-clock-o" aria-hidden="true"></i> Il reste 
<span class="days">00</span><span class="timeRefDays cdtext">jours</span>
<span class="hours">00</span><span class="timeRefHours cdtext">heures</span>
<span class="minutes">00</span><span class="timeRefMinutes cdtext">minutes</span>
<span class="seconds">00</span><span class="timeRefSeconds cdtext">secondes</span>
pour profiter de la promotion !
</div>
</div>

Surtout… n’oubliez pas d’enlever le compte à rebours lorsque la date limite est atteinte 😉

Sauvegardez bien vos modifications  !

21 commentaires sur “Tuto compte à rebours d’une promotion sur shopify (date butoir)

  1. Ben

    Merci pour le tuto, ca fonctionne parfaitement !
    Je souhaiterai reproduite le meme genre de ligne en indiquant d’autre info mais je n’arrive pas a changer le logo (le timer actuellement)…
    La modif se passe sur cet ligne d’après ce que j’ai compris mais je suis bloqué :/

    Comment faire ? merci 🙂

  2. jm dmx

    Bonjour, moi je suis sur wordpress, et j’ai un compteur qui marche pas en direct mais lorsque j’actualise la page, le compteur décompte, vous pourrez me mettre sur des pistes pour modifier cela ? j’ai des notions de code je sais vraiment pas d’ou pourrait venir le problème. quand je dis wordress jespere que vous comprenez « plugin installé », je suis du genre a retouché au code ect..

    Et j’ai une question les compteurs sont pas stokés quelque part ?

  3. skippeur83

    Bonjour,
    j’ai suivi le tuto et ça fonctionne mais …
    je suis dans le cas du HTML dans la fiche produit .
    Comment faire pour que le décompte se trouve au niveau de l’ajout au panier ?
    Merci

  4. Alex

    j’ai tout installé y a le bandeau avec marquer » sur notre site vous aurez » mais ce n’est pas dynamique sa ne bouge pas les textes en orange n’apparaissent pas.
    j’aimerais garder la barre Free shipping aussi, dans quel endroit je devrais mettre la barre dynamique ailleurs du coup ?

  5. Florian

    Hello,

    Merci pour tous ces tutos qui sont vraiment pratiques et super bien expliqués. J’ai une suggestion pour ce bout de code pour renforcer le coté urgent et que j’ai vu sur certains sites : pourquoi ne pas rajouter une variable en plus montrant les centièmes de seconde ?

  6. Skyler

    Bonjour ! Tout d’abord merci beaucoup pour tous tes tutos, ils me sont vraiment très utile ! Bravo à toi.
    J’aurai voulu savoir ce que je pouvais modifier dans le code pour faire en sorte que le compte à rebours tourne en boucle ? Merci à toi ! Et encore bravo à toi !

    1. Dgeo Dev

      Bonsoir, ce n’est pas spécialement évident de faire ce genre de chose, mais je vais bientôt adapter le tuto pour qu’il soit plus cohérent avec un système de cookies

Laisser un commentaire

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

*
*