Un même catalogue pour les habitants et les collectivités.
Chez Quadria, on trouve aussi bien un composteur pour son jardin que des colonnes de tri pour toute une commune. Un habitant veut savoir quel composteur installer et comment s’en servir. Une collectivité a besoin de volumes, de dimensions et d’options de personnalisation pour préparer son projet.
Le projet a démarré en 2025, avec une mise en ligne en 2026. J’ai travaillé l’accès au catalogue et le contenu des fiches produits pour répondre à ces différents usages.
Trouver son équipement dès l’accueil.
Le visiteur choisit son profil, puis ce qu’il souhaite installer. Les entrées « Particulier » et « Collectivité / Pro. » restent aussi accessibles dans l’en-tête du site.
Des menus plus complexes qu’ils n’en ont l’air.
Le menu « Produits » rassemble les points d’apport volontaire, les bacs et les équipements de gestion des biodéchets. Chaque famille a ses visuels et ses liens. Il fallait organiser cet ensemble sur grand écran et prévoir une navigation utilisable au toucher sur mobile.
J’ai développé des sous-menus composés de blocs WordPress, que les équipes peuvent modifier dans l’éditeur. Cela permet de faire évoluer les groupes de produits et leurs liens en conservant la structure du menu. Sur mobile, l’ouverture et la fermeture du panneau tiennent compte de la position de l’en-tête pendant le défilement.
Voir le produit en usage, puis consulter les détails.
Sur Compostys®, on découvre d’abord le composteur dans un jardin. La présentation de la gamme et la demande de devis sont placées à côté de cette image.
Les tableaux de dimensions, les étapes de montage et les documents à télécharger viennent ensuite. Un menu de sections permet de rejoindre directement l’information recherchée, sans quitter la fiche.
Des champs qui s’adaptent aux réponses.
Pour les formulaires, j’ai utilisé Contact Form 7 avec Simple Conditional Fields for Contact Form 7, une extension que j’ai développée chez inRage.
Elle permet d’afficher ou de masquer des groupes de champs en fonction des réponses du visiteur. Certaines questions peuvent ainsi être réservées à un type de demande, plutôt que de présenter tous les champs à tout le monde. Les règles d’affichage se configurent visuellement dans WordPress.
Lire l’article sur les champs conditionnels de Contact Form 7Et quand une gamme évolue ?
Les équipes retrouvent les mêmes rubriques dans WordPress.
Les fiches produits ont leur pendant dans l’administration. Les équipes peuvent renseigner les caractéristiques, ajouter une option ou remplacer une notice dans les champs prévus pour cela. J’ai développé cette structure dans WooCommerce.
Pour les autres pages, j’ai créé des blocs WordPress dédiés aux produits, aux références clients et aux actualités. Les équipes composent leur contenu avec ces éléments, dont j’ai défini le rendu.
Une création inRage
Octa
Ma base WordPress, publiée en open source.
La refonte de Quadria repose sur Octa.
Je développe Octa chez inRage et son code est disponible en open source. Il me sert de point de départ pour les projets WordPress. Sur Quadria, je l’ai utilisé pour réaliser l’interface et les blocs propres au site.
Pour les curieux, Octa assemble Bedrock, Sage et Acorn, avec Vite et Tailwind CSS côté interface. Les éléments partagés, comme les cartes produits, sont développés une fois puis réutilisés dans les pages.
