initClub · 1ère Communauté Webflow Francophone

Updated 3 months ago

Implementing Dynamic Pricing on a Product Page

At a glance

Hello le club,

Question technique, je bosse pour une startup qui est en train de revoir totalement son pricing et qui souhaite donc qu'on fasse évoluer la page produit du site.
Le truc c'est qu'ils souhaitent mettre en place une tarification assez complexe avec un tarif dynamique qui évolue en fonction des modules que l'utilisateur coche ou non.
Un peu comme le fait Qonto : https://qonto.com/fr/pricing?periodicity=yearly&select-toggle=team&website_addon_period=yearly

Je ne doute pas que c'est parfaitement faisable, mais je ne l'ai jamais fait alors si vous avez des exemples, des outils et des bonnes pratiques à suivre je suis preneur 🙏

Belle fin de journée à toutes et à tous ☺

V
B
6 comments

Pas sûr de comprendre ce que tu souhaites faire 🙂
ça serait comme leur page : https://qonto.com/fr/pricing-help ?

Hello Valentin,

Pardon j'ai pas été assez clair, sur le lien que j'ai mis en dessous des plans il y'a des modules complémentaires que l'utilisateur peut ajouter et si on clique sur "sélectionner ce module" le prix en haut de page s'update automatiquement.
La tarification devient donc dynamique et l'utilisateur voit en direct les répercussions de chaque ajout de module avant de passer à l'achat... et c'est ce côté dynamique que je ne sais pas encore comment faire.

De notre côté on aura un prix fixe avec des modules complémentaires sélectionnables via toggle ou checkbox et il faudra que le prix s'update tout seul en fonction.

Tu peux le faire facilement avec une checkbox et du custom JS 🙂

Yes mais justement je ne sais malheureusement pas du tout coder en JS haha, donc c'est pour ça que je cherche des exemples/bonnes pratiques/tutos faciles 🙏😅

Aide toi de Chatgpt 🙂
En gros la logique de base va être :
Quand la checkbox est checked, alors tu vas ajouter +X a tel prix, +X à tel autre prix etc...
Quand j’uncheck la checkbox, alors tu vas enlever au prix.
Tu vas utiliser des addeventlistener

Après tout va dépendre des features que tu souhaites faire 🙂

Add a reply
Sign up and join the conversation on Slack