Guide Javascript : créer un calculateur en code personnalisé sur Webflow

Introduction

Pour des projets avancés et bien spécifiques, un calculateur personnalisé peut être une grande valeur ajoutée.

Imaginez par exemple pouvoir estimer rapidement le coût d'un projet, puis afficher dynamiquement cette estimation sur une page en fonction des informations renseignées par l’utilisateur. Et bien c'est exactement ce qu’on va explorer dans l’article d’aujourd’hui.

Le développement d’un calculateur étant forcément propre aux besoins et aux spécificités de chaque projet, on ne suivra pas dans cet article un modèle unique que vous pourrez copier-coller dans votre projet.

Ici, on va plutôt décomposer la logique générale de la création d'un calculateur. Prenez-le comme un guide, adaptable en fonction des besoins spécifiques de votre projet.

Préparez-vous à découvrir comment, avec un peu de code Javascript, vous pouvez apporter une valeur ajoutée significative à vos projets Webflow. C’est parti !

Description du projet et définition des variables

Pour commencer, avant même de plonger dans le développement sur Webflow, définissons le projet et les paramètres à prendre en compte dans notre calculateur sur mesure.

Description du projet :

• Dans cet exemple, on va développer un calculateur de budget assez simple pour la création d’un site web.
• Le calculateur sera présent sur une page “Mon Projet” et affichera une estimation chiffrée en fonction des informations remplies par l’utilisateur.

Liste des variables :

• Nombre de pages : Pour estimer la taille du site et les ressources nécessaires pour sa création. Plus le site est vaste, plus le budget augmente.
• Niveau de difficulté (estimé en pourcentage) : Pour estimer la complexité du projet et la charge de travail. Plus le site est complexe, plus le budget augmente.
• Besoin de design : Choix binaire pour déterminer si le projet nécessite du design. Si oui, le budget augmente.
• Besoin de développement : Choix binaire pour déterminer si le projet nécessite du développement. Si oui, le budget augmente.

Il s’agit ici du point de départ de notre calculateur sur mesure, c'est avec ces variables qu’on créera notre solution.

Détail du calcul de budget

Ensuite, dernière chose avant de passer sur Webflow, détaillons le calcul de l’estimation de budget. Pour l’exemple, imaginons le système de tarification suivante :

Pricing de base

Le pricing de base est de 500 euros par page, le tout multiplié par un indice de complexité. Ce pricing est applicable si besoin de design OU de développement.

Pricing de base = (500 * nombre de pages) * (1 + pourcentage de difficulté)

Par exemple, pour 5 pages et un niveau de complexité de 25% :

Pricing de base = (500 * 5) * (1 + 0,25) = 2500 * 1,25 = 3125€

Pricing avancé

Le pricing avancé correspond au pricing de base multiplié par 1,75. Ce pricing est applicable si besoin de design ET de développement.

Pricing avancé = pricing de base * 1.75

Par exemple, pour les mêmes 5 pages et niveau de complexité de 25% :

Pricing avancé = 3125 * 1,75 = 5468,75€

Notez que les variables et calculs sont spécifiques à cet exemple, et pourraient être ajustés en fonction des exigences propres au projet. Il s’agit de la tarification fictive que l’on va concrétiser avec le calculateur, mais on peut imaginer n’importe quel système de calcul dépendant des caractéristiques de votre projet, qu’il soit plus avancé ou non.

Maintenant que l’on connait le détail de la configuration, passons sur Webflow pour mettre en place la structure du calculateur (HTML+CSS).

Création de la structure du calculateur dans Webflow

Maintenant passé sur Webflow, la prochaine étape pour faire fonctionner notre calculateur consiste à mettre en place toute la structure : créer le formulaire et les inputs nécessaires, puis rendre ces inputs faciles à cibler dans le code personnalisé (dont on parle plus loin). Ces inputs, modifiables par l'utilisateur, seront la clé de l'estimation du budget.

Ce dont on a besoin pour faire fonctionner le calculateur :

• un formulaire pour ajouter nos champs ;
• un champ nombre pour le nombre de pages,
• un champ nombre pour le niveau de complexité,
• une checkbox pour le besoin de design ou non,
• une checkbox pour le besoin de développement ou non,
• un champ texte pour afficher dynamiquement le résultat de l’estimation.

Une fois les différents champs créés, il ne reste plus qu’à attribuer un ID à chacun. Cela nous permettra de les identifier dans le code et ainsi de récupérer leur valeur.

On ajoute donc :

• un ID “pagesInput” au champ pour le nombre de pages,
• un ID “difficultyInput” au champ pour le nombre de pages,
• un ID “designCheckbox” à la checkbox pour le besoin de design,
• un ID “developmentCheckbox” à la checkbox pour le besoin de design,
• un ID “priceElement” à l’élément de texte dans lequel on affichera le resultat.

Cette étape est essentielle pour établir une connexion entre les éléments du formulaire et notre code JavaScript. Veillez à bien nommer vos IDs de manière cohérente pour faciliter la compréhension du code.

En suivant ces premières étapes, on est maintenant prêt à passer à la prochaine phase : l’écriture du code Javascript qui donnera vie à notre calculateur.

Code personnalisé Javascript

Maintenant que l’on a créé notre formulaire avec les champs nécessaires dans Webflow, passons au custom code Javascript. Pas de souci si vous n’êtes pas expert, on va décrypter le tout étape par étape.

Les différentes étapes à cocher avec le code :

• Récupérer les valeurs des inputs du formulaire.
• Effectuer des calculs en fonction de ces valeurs.
• Mettre à jour dynamiquement l'affichage du résultat à chaque modification des champs.

#1 Récupérer les éléments du formulaire

Pour commencer, on peut récupérer les éléments du formulaire dans notre code et les enregistrer dans des variables pour les réutiliser plus tard.

En Javascript, on peut faire ça avec la méthode getElementById pour récupérer des éléments spécifiques en fonction de leur ID (qu’on a défini plus tôt).

// enregistrer les différents champs de formulaire dans des variables
let pagesInput = document.getElementById("pages");
let difficultyInput = document.getElementById("difficulty");
let designCheckbox = document.getElementById("design");
let developmentCheckbox = document.getElementById("development");

let pagesInput : crée une variable pour lui associer quelque chose. (ici, un de nos champs de formulaire)

document.getElementById("pages") : récupère l’élément HTML avec l’ID correspondant.

#2 Ecouter les modifications des champs

Ensuite, on va identifier tous les champs de formulaire dans une variable, créer une boucle qui va parcourir ces champs et ajouter sur chacun d’eux un écouteur d’événement.

Pour faire simple, quand l'utilisateur va modifier la valeur de n’importe quel champ de formulaire, le code à l'intérieur de cet écouteur d’événement sera exécuté.

// enregistrer tous les éléments avec une balise  dans une variable "inputs"
let inputsAll = document.querySelectorAll("input");

// parcourir tous les champs et, pour chacun d'entre eux, exécuter le code fourni
inputsAll.forEach(function (inputsAll) {
  // créer un écouteur d'événement "input" (modification d'un champ de formulaire)
  inputsAll.addEventListener("input", function() {

    // à chaque modification d'un champ de formulaire, le code présent ici sera exécuté

  });
});

querySelectorAll("input") : récupère tous les éléments correspondant au sélecteur CSS entre parenthèses. (ici, tous les éléments avec une balise <input>)

inputsAll.forEach(function ()) : parcourt tous les éléments stockés dans notre variable inputsAll et exécute le code fourni pour chacun d’eux.

addEventListener("input", function()) : écoute les événements “input” sur chaque élément, c’est-à-dire les modifications des champs, et exécute le code fourni quand l’événement a lieu.

Grâce à ces quelques lignes, le code que l’on ajoutera dans l’écouteur d’événement sera exécuté à chaque fois que l’événement en question se produit. À chaque modification d’un des champs de formulaire, on pourra donc effectuer nos calcul et modifier dynamiquement le résultat de notre estimation.

#3 Extraire les valeurs des champs

À l’intérieur de notre écouteur d’événement, on va donc pouvoir commencer nos calculs.

Pour commencer, on va donc créer de nouvelles variables pour extraire les valeurs renseignées par l’utilisateur dans nos champs de formulaire et les changer en nombre (pour pouvoir ensuite faire nos calculs).

// enregistrer les valeurs des champs de formulaire dans des variables
let pages = parseFloat(pagesInput.value);
let difficulty = parseFloat(difficultyInput.value / 100);
let design = designCheckbox.checked;
let development = developmentCheckbox.checked;

pagesInput.value : récupère la valeur renseignée dans le champ correspondant.

parseFloat() : change la valeur initiallement sous la forme d’une chaîne de caractère en un nombre pour pouvoir ensuite effectuer des calculs.

designCheckbox.checked : récupère le statut de la checkbox correspondante. (la variable renverra true [vrai] si la checkbox est cochée, et false [faux] si elle ne l’est pas)

#4 Calcul du budget

Maintenant que nos valeurs sont enregistrées dans des variables, on peut passer aux calculs.

Pour commencer, on crée de nouvelles variables pour le prix de base, le prix avancé et le prix qui sera effectivement pris en compte, puis on effectuera un calcul ou un autre en fonction des choix faits par l’utilisateur :

• Si besoin de design ET de développement, on prendra en compte le calcul du prix avancé.
• Si besoin de l’un OU de l’autre, on prendra en compte le calcul du prix de base.
• Si besoin de ni l’un ni l’autre, le prix sera nul.

// créer des variables pour le prix de base et le prix final
let priceBasic = (pages * 500) * (1 + difficulty);
let priceAdvanced = priceBasic * 1.75;
let priceActual;

if (design && development) {
  // effectuer ce calcul SI besoin de design ET de développement
  priceActual = priceAdvanced.toFixed();
} else if (design || development) {
  // OU, effectuer ce calcul SI besoin de design OU de développement
  priceFinal = priceBasic.toFixed();
} else {
  // OU, effectuer ce calcul
  priceFinal = 0;
}

if (condition) {} : exécute la fonction fournie si la condition est rencontrée.

else if (condition) {} : exécute la fonction fournie si la condition est rencontrée, dans la cas où la condition précédente ne l’est pas.

else {} : exécute la fonction fournie si les précédentes conditions ne sont pas rencontrées.

toFixed() : arrondit un nombre à l’entier le plus proche.

#5 Afficher dynamiquement le resultat

Enfin, on peut finir par mettre à jour l’affichage du résultat.

// enregistre l'élément HTML qui affichera le résultat dans une variable
let priceSpan = document.getElementById("price");

// modifie le texte de l'élément avec le résultat du calcul
priceSpan.innerText = priceFinal;

priceSpan.innerText : modifie le contenu textuel de l’élément.

En résumé, ce script JavaScript écoute les modifications des champs de formulaire, récupère les valeurs de ces champs, effectue un calcul avec les valeurs récupérées en fonction des conditions spécifiées, puis met à jour l'affichage du résultat sur la page.

Le code complet :

<script>

// enregistrer les différents champs de formulaire dans des variables
let pagesInput = document.getElementById("pages");
let difficultyInput = document.getElementById("difficulty");
let designCheckbox = document.getElementById("design");
let developmentCheckbox = document.getElementById("development");

// enregistrer tous les éléments avec une balise  dans une variable "inputs"
let inputsAll = document.querySelectorAll("input");

// parcourir tous les champs et, pour chacun d'entre eux, exécuter le code fourni
inputsAll.forEach(function (inputsAll) {
  // créer un écouteur d'événement "input" (modification d'un champ de formulaire)
  inputsAll.addEventListener("input", function() {

    // enregistrer les valeurs des champs de formulaire dans des variables
    let pages = parseFloat(pagesInput.value);
    let difficulty = parseFloat(difficultyInput.value / 100);
    let design = designCheckbox.checked;
    let development = developmentCheckbox.checked;

    // créer des variables pour le prix de base et le prix final
    let priceBasic = (pages * 500) * (1 + difficulty);
    let priceAdvanced = priceBasic * 1.75;
    let priceActual;
			
    if (design && development) {
      // effectuer ce calcul SI besoin de design ET de développement
      priceActual = priceAdvanced.toFixed();
    } else if (design || development) {
      // OU, effectuer ce calcul SI besoin de design OU de développement
      priceActual = priceBasic.toFixed();
    } else {
      // OU, effectuer ce calcul
      priceActual = 0;
    }

    // enregistre l'élément HTML qui affichera le résultat dans une variable
    let priceSpan = document.getElementById("price");
		
    // modifie le texte de l'élément avec le résultat du calcul
    priceSpan.innerText = priceActual;

  });
});

</script>

Et voilà, avec tout ça, notre calculateur personnalisé est désormais fonctionnel !

Maintenant que le code est prêt, il ne reste plus qu’à l’ajouter dans le Footer Code du code personnalisé de Webflow.

Conclusion

Comme précisé plus tôt, il ne s’agit pas ici d’un code à copier-coller dans votre projet. Le développement d’un calculateur est une solution propre aux besoins de chaque projet.

Cependant, la logique générale autour de la création de notre calculateur et les différentes méthodes utilisées peuvent être répliquées dans beaucoup de situations. Prenez donc cet article comme un guide que vous pouvez suivre et adapter en fonction des besoins spécifiques que vous rencontrez.

Créer des calculateurs peut sembler difficile, mais avec une bonne compréhension des étapes nécessaires, vous pouvez apporter une plus-value significative à vos projets.

On vous invite donc à expérimenter vos propres solutions, à rechercher des fonctionnalités Javascript supplémentaires et à vous former sur le sujet !

Pour aller plus loin sur des sujets Javascript, aller découvrir les ressources suivantes :

• Lenis Smooth Scroll : guide d'intégration étape par étape dans Webflow
• GSAP x Webflow : comment créer facilement vos premières animations GSAP
• 3 tips pour apprendre à créer des animations GSAP en 2024
• Guide Splide JS : créez des slider avancés avec facilité dans Webflow
• Comment créer une visibilité conditionnelle sur des champs de formulaire dans Webflow