Nous allons voir dans ce tutoriel comment faire un système de chiffres qui s’auto-incrémentent au moment ou l’internaute arrive sur cette section. Cet effet est très tendance pour afficher le nombres de clients satisfait et d’autres informations chiffrées.

Comment fonctionne le système ?

Vous allez devoir créer une section HTML spécifique sur votre thème et au moment ou le client va scroller et arriver sur cette section. Alors des chiffres vont partir de 0 et arriver à une valeur que vous aurez choisie.

Comment le mettre en place ?

Partie HTML

Rendez-vous dans la personnalisation de votre thème et essayez de trouver une section Custom HTML et mettez le code ci-dessous tel quel:

<section class="sectionNumbers">
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number1"></div>
  Clients satisfaits
</div>
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number2"></div>
  Nombre de commandes  
</div>
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number3"></div>
  Autres
</div>
</section>

Nous supposons que vous allez mettre 3 zones de chiffres dans une section ! Vous pouvez au besoin rajouter un:

<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number4"></div>
  textes...
</div>

En changeant bien évidemment le number3 par 4, 5, 6 etc…

Partie CSS

Besoin de modifier le design ? dans ce cas rendez-vous dans Boutique en ligne – Actions – Modifier le code. Trouvez le dossier Assets et un fichier .scss.liquid, css.liquid ou la même chose mais sans le .liquid ! bref généralement theme, style, timber…

Mettez-vous tout en bas et copiez/collez le code suivant:

.sectionNumbers {  
  text-align:center; 
}
@media screen and (min-width: 768px) {
  .sectionNumbers {  
    width:100%; 
    display:flex;
    align-items:center;
    justify-content:space-around;
  }
}

.sectionNumbers__item {
  padding:25px;
  font-size:21px;
  min-width:28px;
}
.sectionNumbers__item p {
  margin-top:1rem;
}
.sectionNumbers__number {  
  font-size:61px;
  font-weight:bold;
}

Partie Javascript

Dans le même fichier trouvez cette fois ci le même type de nomenclature mais avec un .js et copiez/collez le code ci-dessous:


(function() {
  function incrementNumber(node,nb) {

    let sectionNumbers = document.querySelector('.sectionNumbers');   
    let sectionCounter = 0;
    let numbers = document.querySelector("."+node);

    let n = nb;
    let cpt = 0; 
    let delay = 1000; 
    let delta = Math.ceil((delay * 15000) / n);

    function countdownNumbers() {
      numbers.innerHTML = ++cpt;
      if( cpt < n ) { 
        setTimeout(countdownNumbers, numbers);
      }
    }

    document.addEventListener('scroll', function() {
      sectionCounter++;        
      if(sectionCounter == 1) {
        setTimeout(countdownNumbers, numbers);
      }
    }), {passive:true};
  }
  setTimeout(function(){ 
    incrementNumber("number1", 156);
    incrementNumber("number2", 456);
    incrementNumber("number3", 678);
  }, 2000);
})();

Fonctionnement du système

Vous devez et pouvez uniquement modifier les choses suivantes:

incrementNumber("number1", 156);
incrementNumber("number2", 456);
incrementNumber("number3", 678);

La on suppose que vous n’avez que 3 zones de chiffres ! supprimez ou ajoutez-en selon vos besoins.

La valeur à modifier et le dernier chiffre de chaque ligne (fonction).

Vous pouvez bien évidemment modifier les textes dans la partie HTML !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 11 commentaires

  1. Je laisse jamais de commentaire mais tu le mérite merci pour tes tutos simple et bien expliquer

    1. Hello, merci c’est sympa 😉

  2. Hellooo ! franchement merci ! j’ai demandé à deux dev les gars ont jamais su le faire correctement … je test ton tuto et c’est good … Un grand Merci !

    1. Hello 🙂 merci pour le com 😉 oui c’est pas évident à coder :p

  3. Encore un super tuto, merci beaucoup pour ton travail.
    Grâce à toi fini les applications payante pour faire des modifs basique sur son thème.

    Avez-vous une newsletter pour recevoir chaque nouveau tuto direct par e-mail ?

    Merci encore !
    Bertrand

    1. Hello, merci c’est gentil 😉 Non pas de newsletter car je n’aime pas trop spammer les gens mais les tutos sont publiés toutes les semaines le lundu à 7h 😉

  4. Salut Super cool ce tuto 🙂
    Tu pense que on peut faire interagir le numéro JS avec l url ? 🙂

    1. Hello et merci pour le com 🙂 par contre je n’ai pas compris la question 🙁

  5. pour ma part ne fonctionne pas, les chiffres ne s’affiche pas, j’ai peut être trop abusé de tes tutos 😉
    en tous cas merci

  6. Merci beaucoup pour le tuto, est-ce possible de me dire comment faite pour changer la couleur des chiffres svp ?

    1. Bonjour, oui dans la partie CSS sectionNumbers__item { rajouter un color:#couleurhexadecimalevoulue; }

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine