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. Nous avons 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.
Nous avons 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, nous avons utilisé Contact Form 7 avec Simple Conditional Fields for Contact Form 7, une extension que nous avons 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 notre 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. Nous avons développé cette structure dans WooCommerce.
Pour les autres pages, nous avons 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 nous avons défini le rendu.
Une création inRage
Octa
Notre base WordPress, publiée en open source.
La refonte de Quadria repose sur Octa.
Nous développons Octa chez inRage et son code est disponible en open source. Il nous sert de point de départ pour les projets WordPress. Sur Quadria, nous l’avons 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.
WordPress
Retrouvez des projets similaires développés avec WordPress qui pourraient correspondre à Quadria
