Comment Faire Défiler des Chiffres au Scroll sur Shopify

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]

Cet article a 9 commentaires

  1. Ustad

    27 Mar 2021 Répondre

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

    1. Dgeo Dev

      28 Mar 2021 Répondre

      Hello, merci c’est sympa 😉

  2. joe

    29 Mar 2021 Répondre

    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. Dgeo Dev

      29 Mar 2021 Répondre

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

  3. Bertrand

    31 Mar 2021 Répondre

    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. Dgeo Dev

      1 Avr 2021 Répondre

      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. Guerniou

    1 Avr 2021 Répondre

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

    1. Dgeo Dev

      1 Avr 2021 Répondre

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

  5. fabien

    5 Avr 2021 Répondre

    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

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