On vous présente Flexy, le nouveau thème de Thelia

Plusieurs objectifs ont guidé la création de Flexy : mutualiser les éléments récurrents des boutiques en ligne, standardiser les bonnes pratiques, améliorer l’expérience utilisateur et l’accessibilité des interfaces, mais aussi gagner du temps lors de la conception de nouveaux sites.

Ce projet a également permis de remettre à plat de nombreuses habitudes de conception qui s’étaient installées au fil des projets et de résoudre, une bonne fois pour toutes, des problématiques communes qui étaient jusque-là corrigées indépendamment sur chaque e-commerce.

Anaïs Ducher

Une conception pensée d’abord pour les utilisateurs

Dès les premières réflexions, Flexy a été conçu selon une approche mobile first, en partant du constat que la majorité des consultations des sites e-commerce s’effectuent aujourd’hui sur smartphone. L’objectif était donc de créer une base capable d’offrir une navigation fluide, intuitive et accessible, quel que soit le support utilisé.

Cette réflexion UX est le fruit d’un travail collaboratif mené lors des Thelia Days, réunissant designers, développeurs et chefs de projet. Au-delà des maquettes, l’équipe a également conçu des parcours utilisateurs détaillés afin de documenter les différents comportements de l’interface.

Anaïs Ducher

Ces parcours servent aujourd’hui de support lors des phases de conception avec les clients : ils permettent de faciliter les ateliers de spécifications fonctionnelles, d’expliquer les choix de design et d’identifier plus facilement les besoins spécifiques de chaque projet.

Côté design, Flexy prend la forme d’une véritable bibliothèque de composants sur Figma. Chaque élément de l’interface est déjà conçu et peut être personnalisé selon l’identité graphique du client. Cette approche évite de repartir d’une feuille blanche à chaque nouveau projet, accélère les phases de maquettage et constitue également une excellente base pour animer des ateliers de wireframing avec les clients.

Une architecture technique modernisée

Cette volonté de simplification se retrouve également côté développement. L’une des principales évolutions concerne les technologies utilisées. Le moteur de templates Smarty a été remplacé par Twig, largement adopté dans l’écosystème Symfony. La partie React, qui coexistait auparavant avec Smarty, a quant à elle été entièrement supprimée au profit des Live Components de Symfony.

Grâce à cette évolution on s’appuie désormais sur une seule technologie plutôt que sur plusieurs, ce qui simplifie le travail des développeurs et rend le projet plus accessible aux équipes qui maîtrisent déjà Symfony.

Léa Normandon

Concrètement, auparavant, certaines fonctionnalités devaient être développées deux fois : une première fois en HTML, CSS et Smarty, puis une seconde en React. Cette double maintenance alourdissait le développement et pouvait complexifier certains traitements, notamment sur le tunnel de commande. Maintenant, grâce à Twig et aux Live Components, ces interactions sont gérées de manière unifiée. Les comportements dynamiques du site (comme la mise à jour du panier ou l’affichage d’une notification après l’ajout d’un produit) sont directement pris en charge sans avoir recours à une importante couche de JavaScript.

Cette nouvelle approche demande néanmoins une montée en compétences des développeurs front-end, qui doivent désormais se familiariser avec les Live Components et certaines notions de PHP. En contrepartie, les développeurs back-end peuvent intervenir beaucoup plus facilement sans passer par une compétence front, ce qui favorise la collaboration entre les équipes.

Léa Normandon

Le développement s’est étalé sur plusieurs mois pour concevoir Flexy, composant par composant.

La difficulté n’était pas tant technique que liée à l’ampleur du chantier : chaque élément de l’interface, de la simple case à cocher jusqu’aux composants les plus complexes, a dû être repensé avant d’être intégré dans le thème final.

Léa Normandon

Une base plus robuste et éco-conçue pour les futurs projets

Flexy accompagne donc l’arrivée de Thelia 3 et de PHP 8. Cette évolution a nécessité l’adaptation des modules existants : tous ceux développés avec Smarty ont dû être rendus compatibles avec Twig afin de fonctionner avec cette nouvelle architecture.

Notre équipe a déjà travaillé sur plusieurs projets client avec Flexy, notamment la boutique du Festival d’Ambert, Le Jardin de Mado, ou encore la future e-boutique de la Brasserie Bougnat.

Pour les utilisateurs finaux, ces évolutions restent relativement invisibles. Les principaux changements concernent les méthodes de développement. En revanche, un nouveau back-office est actuellement en cours de déploiement et apportera des évolutions plus visibles pour les administrateurs des sites. Une première version est déjà testée par certains clients afin de recueillir leurs retours.

Léa Normandon

Flexy a également été pensé comme un socle évolutif. Les bonnes pratiques en matière d’accessibilité, d’éco-conception et de référencement naturel (SEO), qui étaient auparavant intégrées projet par projet, sont désormais directement incluses dans le thème de base.

L’objectif est simple : partir d’une base saine dès l’installation et éviter de reproduire les mêmes développements sur chaque nouveau site. Chaque projet permet ensuite d’enrichir encore cette base commune, qui évolue au fil des retours d’expérience.

Cette logique bénéficie aussi bien aux équipes de conception qu’aux développeurs et, à terme, aux clients, qui profitent d’un socle plus mature, plus performant et plus cohérent.