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

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.

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

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.

Visual demonstration: La capture montre la structure HTML d’un calculateur Javascript dans Webflow.

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.

Visual demonstration: La capture montre l’attribution des ID HTML aux éléments du calculateur Javascript.

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.

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

Visual demonstration: La capture montre l’emplacement du code personnalisé Webflow pour le calculateur Javascript.

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