L'installateur photovoltaïque en ligne
avec simulateur d'économies sur-mesure
Site e-commerce de La French Energie, installateur de panneaux solaires en Vaucluse : catalogue de kits prêts à poser, blog éditorial et simulateur d'économies sur-mesure intégré au site PrestaShop.
- E-commerce
- PrestaShop
- Photovoltaïque
En un coup d'œil
- ClientLa French Energie
- Année2023
- Durée
- TypeE-commerce
- LieuVaucluse (84)
- SecteurPhotovoltaïque · Énergies renouvelables
- TechnologiePrestaShop + module simulateur sur-mesure
- URLwww.lafrenchenergie.fr
- E-commerce
- PrestaShop
- Photovoltaïque
Le brief et la problématique
La French Energie est un installateur de panneaux photovoltaïques basé en Vaucluse, qualifié RGE, qui intervient à Avignon, Carpentras, Orange, Vaison-la-Romaine, Pertuis et plus largement sur le pourtour provençal. La société commercialise des kits prêts à poser (3, 6 et 9 kW) assemblés autour de panneaux SunPower et DualSun et de micro-onduleurs Enphase, avec une garantie longue durée sur le matériel.
Le client souhaitait passer d'une présence en ligne purement vitrine à un vrai site marchand : exposer ses kits avec leurs prix d'appel (à partir de 4 990 €, 8 990 € et 12 990 €), animer un blog d'actualités autour de l'énergie solaire pour le référencement, et surtout proposer au visiteur un outil capable d'estimer ses économies depuis son adresse, sans passer obligatoirement par un commercial au téléphone.
Au-delà du catalogue, l'enjeu central du projet était donc la construction de ce simulateur d'économies, intégré au site PrestaShop, mais suffisamment riche pour devenir le premier point de qualification du prospect.
La problématique
Construire un e-commerce PrestaShop pour un installateur photovoltaïque, et y greffer un simulateur d'économies sur-mesure capable de guider le visiteur depuis son adresse jusqu'à une mise en relation commerciale.
Objectifs du projet
- Mettre en ligne un site marchand PrestaShop autour des kits 3, 6 et 9 kW
- Développer un module simulateur sur-mesure intégré au front PrestaShop
- Animer un blog d'actualités photovoltaïque pour le référencement
- Outiller le commercial via un formulaire de contact qualifié en sortie de simulateur
Quatre défis propres à ce projet
Défi 01
Un simulateur qui fait corps avec le site
Le simulateur ne devait pas ressembler à un outil étranger posé à côté de la boutique. L'enjeu : qu'il reprenne l'apparence du site — même en-tête, même pied de page, même navigation — pour que le visiteur passe du catalogue à la simulation sans jamais avoir l'impression de quitter le site.
Défi 02
Une saisie d'adresse sans friction
Tout commence par l'adresse du visiteur. Plutôt qu'un champ libre source d'erreurs, l'adresse s'auto-complète pendant la frappe et s'affiche sur une carte. Le visiteur vérifie d'un coup d'œil que le bon toit est repéré avant d'aller plus loin.
Défi 03
Des économies qui se comprennent d'un regard
Un chiffre seul ne parle pas. L'enjeu était de montrer production, consommation et économies sous forme de graphiques clairs, pour que le visiteur comprenne ce qui se passe sur son toit — pas seulement combien il pourrait gagner.
Défi 04
Transformer la visite en prise de contact
Le but n'est pas de vendre en ligne mais de provoquer un échange. À la fin du parcours, le visiteur laisse ses coordonnées, accompagnées de tout ce qu'il a renseigné et de ses économies estimées. Le commercial rappelle alors en sachant déjà à qui il parle et avec quels chiffres.
La solution mise en place
Nous avons livré une boutique en ligne complète, organisée autour des trois kits solaires (3, 6 et 9 kW), avec un blog d'actualités pour le référencement et tous les réflexes attendus d'un site marchand : réassurance, liste d'envies, avis clients, recherche et newsletter. Le cœur du projet reste le simulateur d'économies développé sur-mesure : le visiteur saisit son adresse, la voit s'afficher sur une carte, configure son installation et découvre ses économies en graphiques clairs, avant de laisser ses coordonnées au commercial. Chaque étape est mesurée pour comprendre où le visiteur avance et où il décroche.
Axe 01 · Catalogue PrestaShop
Trois kits prêts à poser comme colonne vertébrale
Le catalogue est volontairement resserré autour de trois références kit (3, 6 et 9 kW), affichées avec leur prix d'appel et leur configuration matérielle (panneaux SunPower ou DualSun, micro-onduleurs Enphase, garantie longue durée). Les pages produit s'appuient sur les modules natifs de PrestaShop (avis produit, wishlist, bloc de réassurance) pour rester maintenables sans surcouche.
Axe 02 · Module workflowsimulator
Un simulateur livré comme module PrestaShop
Le simulateur est packagé comme un module PrestaShop à part entière, avec son arborescence dédiée (workflowsimulator/views/css, /js, /img) et ses propres styles desktop et mobile. Il se branche au thème classic du site, ce qui lui permet d'hériter du header, du footer et de la navigation sans avoir à les redessiner ni à les dupliquer.
Axe 03 · Adresse + carte Mapbox
Saisie géolocalisée et carte interactive
La première étape du simulateur utilise le géocodeur Mapbox pour autocompléter l'adresse pendant la frappe, et la directive angular-mapboxgl-directive pour afficher une carte Mapbox GL centrée sur le bien. Le visiteur valide visuellement la bonne position avant d'enchaîner sur la configuration de son installation.
Axe 04 · Restitution Highcharts
Production et économies en graphiques
Le résultat n'est pas un simple chiffre : il s'affiche sous forme de graphiques Highcharts (production mensuelle, consommation, projection longue via highcharts-horizon) générés par des directives AngularJS dédiées. Cette mise en image rend la simulation lisible pour un visiteur non technique et crée un objet partageable côté commercial.
Axe 05 · Formulaire qualifié
Sortie sur une mise en relation contextualisée
À la fin du parcours, une modale (contact-modal) prend les coordonnées du prospect et déclenche l'envoi côté serveur via l'API du module. Le commercial reçoit la demande avec l'adresse, la configuration simulée et les chiffres d'économies déjà calculés, ce qui évite de tout refaire au téléphone.
Le simulateur d'économies, module PrestaShop sur-mesure
Une application AngularJS livrée comme module PrestaShop, qui prend une adresse, propose une configuration d'installation et restitue les économies en graphiques avant de passer la main au commercial.
Comment ça marche
Adresse géolocalisée
Le visiteur saisit son adresse dans un champ auto-complété par le géocodeur Mapbox. La carte Mapbox GL recentre la vue sur le bien pour validation visuelle avant de continuer.
Profil du foyer
Le parcours interroge le visiteur sur son logement et sa consommation via des sliders AngularJS (rzslider), avec valeurs par défaut raisonnables pour limiter la friction de saisie.
Choix d'installation
Le simulateur propose une configuration alignée sur les kits catalogue de la marque (3, 6 ou 9 kW, panneaux SunPower ou DualSun, micro-onduleurs Enphase), avec leurs caractéristiques techniques visibles à l'écran.
Restitution graphique
Les résultats sont affichés en graphiques Highcharts via des directives AngularJS dédiées : production, consommation, projection longue avec highcharts-horizon. L'objectif est que le visiteur lise ses économies, pas qu'il les devine.
Mise en relation
Une modale de contact reprend les coordonnées du prospect et envoie au commercial une fiche complète avec l'adresse, la configuration simulée et les chiffres affichés, prête à être rappelée.
- 3Kits cible3, 6 et 9 kW
- 3Marques matérielSunPower, DualSun, Enphase
- 1Module sur-mesureworkflowsimulator
Sous le capot
Plateforme : boutique PrestaShop
La boutique tourne sur PrestaShop avec un thème classic personnalisé. Côté site marchand, ce sont les modules natifs qui portent les fonctions e-commerce (réassurance, liste d'envies, avis produit, recherche, newsletter, panier), et le blog repose sur le module ybc_blog. Aucun de ces blocs ne touche au simulateur.
Cœur : un module PrestaShop sur-mesure
Le simulateur est livré comme un module PrestaShop autonome (workflowsimulator), installé à côté des autres sans modifier le code du thème. Le module embarque ses propres feuilles de style, scripts et visuels côté front, et expose côté serveur une route API qui héberge la logique de calcul des économies et l'envoi de la demande de contact.
Front : application AngularJS
L'interface du simulateur est une application AngularJS montée dans une page PrestaShop. Elle est découpée en couches nettes : des contrôleurs pilotent le parcours, un service API dialogue avec le serveur du module, des filtres formatent valeurs et prix, et des directives métier isolent chaque brique tierce — carte, graphiques, formulaire — derrière sa propre directive.
Adresse et carte : Mapbox GL
La localisation s'appuie sur deux briques Mapbox distinctes : le geocoder auto-complète l'adresse pendant la frappe, et Mapbox GL (v2.10) affiche la carte interactive recentrée sur le bien. Les deux sont reliées à AngularJS via une directive carte dédiée.
Graphiques : Highcharts
Toute la restitution chiffrée passe par Highcharts (avec l'extension More) : une directive standard rend les graphiques de production et de consommation, une directive highcharts-horizon trace la projection longue. Les graphiques sont dessinés côté visiteur à partir des chiffres calculés côté serveur par le module.
Mesure : GTM et Facebook
Le parcours est instrumenté via Google Tag Manager pour suivre chaque étape du simulateur, et via l'API de conversion Facebook (module ps_facebook) pour remonter les mises en relation côté commercial.
Le projet en images
Cinq étapes, du brief au lancement
Un projet PrestaShop standard côté boutique, doublé d'un chantier dédié sur le module simulateur : cadrage métier, conception du parcours, développement AngularJS, intégration au thème classic et mise en ligne.
Étape 01
Cadrage
- Rencontre client
- Périmètre PrestaShop
- Spécification du simulateur
- Choix matériel cible
Étape 02
Design
- Maquettes thème classic
- Parcours simulateur
- Mobile-first
- Validation client
Étape 03
Boutique PrestaShop
- Catalogue kits
- Blog ybc_blog
- Réassurance, wishlist
- Pages contact
Étape 04
Module simulateur
- App AngularJS
- Géocodeur Mapbox
- Graphiques Highcharts
- Formulaire contact-modal
Étape 05
Mise en ligne
- Recette boutique
- Recette simulateur
- Pose GTM et Facebook CAPI
- Go live
Stack technique du projet
Une stack PrestaShop classique côté boutique, prolongée par une application AngularJS embarquée pour le simulateur métier.
- E-commerce
- PrestaShop
- Thème classic
- ps_imageslider
- ps_searchbar
- ps_emailsubscription
- ps_shoppingcart
- Modules métier
- workflowsimulator
- ybc_blog
- creativeelements
- blockreassurance
- blockwishlist
- productcomments
- Simulateur
- AngularJS
- angularjs-slider (rzslider)
- angularjs-toast
- Cartographie
- Mapbox GL JS v2.10
- mapbox-gl-geocoder v5
- angular-mapboxgl-directive
- Graphiques
- Highcharts
- Highcharts More
- Directive highcharts-horizon
- Front
- jQuery
- jQuery UI
- Slick
- Swiper
- Smartmenus
- Toastr
- Tracking
- Google Tag Manager
- Facebook Conversion API (ps_facebook)
Quelques pages du site réalisé
Extrait du design livré
Les chiffres du projet
Scores Lighthouse mesurés sur lafrenchenergie.fr
- 92Score SEOAudit Lighthouse mobile
- 84Score AccessibilitéAudit Lighthouse mobile
- 50Score Agentic BrowsingAudit Lighthouse desktop
- 58Score Best PracticesAudit Lighthouse mobile
- 50/61Audits passésLighthouse desktop
- 50Score Agentic BrowsingAudit Lighthouse mobile
Quatre pôles mobilisés sur ce projet
Développement PrestaShop
Maîtrise du socle PrestaShop : personnalisation du thème classic, intégration des modules natifs (réassurance, wishlist, avis produit, recherche, newsletter, panier) et cohabitation propre avec un module métier sur-mesure dans la même boutique.
Voir l'expertiseModule PrestaShop sur-mesure
Conception et développement d'un module PrestaShop complet (workflowsimulator), avec ses vues front, ses styles desktop et mobile, son API serveur et son arborescence dédiée. Le module est installé comme n'importe quel autre module PrestaShop côté back-office.
Voir l'expertiseApplication AngularJS embarquée
Construction d'une application AngularJS structurée (controllers, services, filtres, directives) embarquée dans une page PrestaShop. Couvre la saisie d'adresse Mapbox, la configuration de l'installation, le rendu graphique Highcharts et le formulaire de contact en sortie.
Voir l'expertiseCartographie & dataviz
Intégration de Mapbox GL et de son geocoder pour la saisie d'adresse, et de Highcharts (avec directive horizon) pour la restitution des économies en graphiques lisibles, dans un même parcours utilisateur cohérent.
Voir l'expertise
Vos questions, nos réponses
Votre métier mérite un outil de qualification sur-mesure
Boutique PrestaShop, module métier, simulateur ou configurateur embarqué : on construit des e-commerces qui font travailler la donnée du visiteur avant qu'elle n'arrive sur le bureau du commercial. Premier échange gratuit, sans engagement, réponse sous vingt-quatre heures.
Réponse sous vingt-quatre heures · Devis gratuit · Sans engagement
