Un catalogue multilingue pour la chirurgie ophtalmique
Site vitrine et catalogue produit multilingue développé sur mesure pour un fabricant d'instruments de chirurgie ophtalmique, via l'agence web Apperture. Il permet aux chirurgiens ophtalmologistes de consulter le catalogue par spécialité, de demander un devis et de trouver un distributeur.
Je suis intervenu en freelance, de 2019 à 2020, sur la conception et le développement complet du site, de l'architecture à la mise en production.
Contexte
Le fabricant s'adresse à des chirurgiens dans plusieurs pays et s'appuie sur un réseau de distributeurs. Son site devait présenter un catalogue organisé par spécialité chirurgicale (cataracte, cornée, rétine et autres chirurgies), relier chaque instrument à ses publications et vidéos de techniques chirurgicales, et orienter le visiteur vers le bon interlocuteur commercial.
Le problème à résoudre
- Un catalogue navigable — spécialités, catégories, sous-catégories et tags, avec recherche plein texte.
- Un parcours vers le commercial — demande de devis à partir d'une sélection de produits, et localisation des distributeurs.
- Un contenu administré en interne — produits, traductions, distributeurs et pages gérés sans intervention technique.
Contraintes
- Multilingue intégral — produits, catégories et pages traduits, y compris les libellés de l'interface.
- Pas de vente en ligne — un catalogue avec demande de devis, traitée ensuite par l'équipe commerciale du fabricant.
- Visuels lourds — des images produit en haute résolution à servir dans des formats adaptés à chaque écran.
- Formulaires exposés — contact et devis protégés contre le spam.
Choix techniques et pourquoi
- Traductions stockées en base — un loader de traductions Symfony personnalisé lit les libellés depuis la base de données, avec mise en cache. Les équipes traduisent depuis le back-office, sans fichier à modifier ni déploiement, et sans dupliquer les templates par langue.
- Images redimensionnées à la demande — LiipImagineBundle génère et met en cache les variantes de chaque image produit : l'équipe dépose un original, le site sert la bonne taille.
- APIs Google Maps — Maps JavaScript pour la carte des distributeurs, Geocoding pour convertir les adresses et calculer les distances, Maps Static pour les aperçus dans les fiches ; reCAPTCHA sur les formulaires.
- Front-end progressif — Bootstrap et jQuery pour l'essentiel, Vue.js pour les composants dynamiques, assets compilés avec Webpack Encore.
Ce qui a été livré
- Catalogue par spécialité — fiches produit détaillées, images, publications, vidéos et produits similaires.
- Recherche — plein texte sur le catalogue, avec filtres par catégorie et tags.
- Demande de devis — sélection de produits et envoi de la demande à l'équipe commerciale.
- Localisateur de distributeurs — carte interactive par pays et recherche par proximité.
- Médiathèque — publications, brochures et vidéos de techniques chirurgicales associées aux produits.
- Pages institutionnelles — présentation de l'entreprise, historique, chiffres clés et actualités.
- Back-office — produits, catégories, distributeurs, contenus, traductions, demandes de contact et de devis.
Résultats
Le site a été livré avec un back-office qui rend les équipes du fabricant autonomes sur le catalogue, les traductions, les distributeurs et le traitement des demandes de devis. Corriger ou compléter une traduction ne demande pas d'intervention technique.
Stack
- Back-end — PHP, Symfony 4, Doctrine ORM, LiipImagineBundle
- Front-end — Bootstrap, jQuery, Vue.js, Webpack Encore, CKEditor
- Données — MySQL
- Services externes — Google Maps JavaScript, Geocoding et Maps Static, reCAPTCHA
Pour aller plus loin
Ce projet relève de mon offre de développement web sur mesure. Pour arbitrer entre un CMS et un développement spécifique sur ce type de site, voir WordPress ou développement sur mesure.
PHP
Symfony
Bootstrap
MySQL