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 ou Liquid personnalisé 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:
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 Ressources (Assets) et un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise
Mettez-vous tout en bas et copiez/collez le code suivant:
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'); if(!sectionNumbers) return; 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); } }
Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.
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 😉
hello merci pour tes tutos ils sont super
j’ai juste un petit problème, j’ai un chiffre qui est trop grand genre 35 000, est ce que le scroll peut être plus rapide ? parce que la, ça défile mais on arrive jamais au 35 000 !!
Hello, merci pour le tuto, c’est top ! J’ai un petit problème, j’aimerais rajouter dans l’incrementNumber un slash et une lettre, mais ça casse l’animation
Tu sais comment je peux faire ?
incrementNumber(« number1 », 156);
incrementNumber(« number2 », 456);
incrementNumber(« number3 », 678);
Hello, merci pour tes tutos, c’est possible de rajouter une lettre à incrementNumber(« number1 », 156);
Par exemple « incrementNumber(« number1″, 156/h); »
Quand je le fais ça casse
Merci à toi 🙂
Ustad
27 Mar 2021Je laisse jamais de commentaire mais tu le mérite merci pour tes tutos simple et bien expliquer
Dgeo Dev
28 Mar 2021Hello, merci c’est sympa 😉
joe
29 Mar 2021Hellooo ! 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 !
Dgeo Dev
29 Mar 2021Hello 🙂 merci pour le com 😉 oui c’est pas évident à coder :p
Bertrand
31 Mar 2021Encore 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
Dgeo Dev
1 Avr 2021Hello, 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 😉
Guerniou
1 Avr 2021Salut Super cool ce tuto 🙂
Tu pense que on peut faire interagir le numéro JS avec l url ? 🙂
Dgeo Dev
1 Avr 2021Hello et merci pour le com 🙂 par contre je n’ai pas compris la question 🙁
fabien
5 Avr 2021pour ma part ne fonctionne pas, les chiffres ne s’affiche pas, j’ai peut être trop abusé de tes tutos 😉
en tous cas merci
Farouk Bouakka Benhafss
21 Avr 2021Merci beaucoup pour le tuto, est-ce possible de me dire comment faite pour changer la couleur des chiffres svp ?
Dgeo Dev
21 Avr 2021Bonjour, oui dans la partie CSS sectionNumbers__item { rajouter un color:#couleurhexadecimalevoulue; }
Mary
29 Oct 2021hello merci pour tes tutos ils sont super
j’ai juste un petit problème, j’ai un chiffre qui est trop grand genre 35 000, est ce que le scroll peut être plus rapide ? parce que la, ça défile mais on arrive jamais au 35 000 !!
Dgeo Dev
1 Nov 2021Hello, oui tu peux essayer de jouer en modifier la valeur 1500 du « delay * 15000 »
Romain
23 Déc 2022Hello, merci pour le tuto, c’est top ! J’ai un petit problème, j’aimerais rajouter dans l’incrementNumber un slash et une lettre, mais ça casse l’animation
Tu sais comment je peux faire ?
incrementNumber(« number1 », 156);
incrementNumber(« number2 », 456);
incrementNumber(« number3 », 678);
Dgeo Dev
6 Jan 2023Hello, le / est un caractère informatique on ne peut donc pas 🙂
Romain
23 Déc 2022Hello, merci pour tes tutos, c’est possible de rajouter une lettre à incrementNumber(« number1 », 156);
Par exemple « incrementNumber(« number1″, 156/h); »
Quand je le fais ça casse
Merci à toi 🙂
Dgeo Dev
6 Jan 2023C’est possible mais faut rajouter une balise span au niveau du html mais assez compliqué à expliquer