Périmètre

Cette documentation couvre la fonctionnalité de visualisation produit de l'application :

  • la page d'entrée product-chooser
  • la visualisation produit en mode complet
  • la visualisation produit en mode web
  • la recherche par slug et la page intermédiaire de résultats

Le périmètre correspond aux routes Angular suivantes :

  • /product-chooser
  • /product-display/:brand/:sku
  • /product-display-web/:brand/:sku
  • /slug-results/:slug

Fonctionnel

Objectif

Permettre à un utilisateur métier de consulter rapidement les données Akeneo d'un produit :

  • soit par SKU
  • soit par slug
  • soit en mode complet pour une vue de contrôle technique
  • soit en mode web pour une vue plus proche du rendu e-commerce

Écran d'entrée

La page product-chooser propose deux formulaires :

  • recherche par SKU
  • recherche par slug

L'utilisateur choisit :

  • une langue : fr_FR ou de_DE
  • un mode : complet ou web

Les préférences de langue et de mode sont conservées dans localStorage, ce qui permet de retrouver le dernier contexte utilisé.

Recherche par SKU

Quand l'utilisateur saisit un SKU :

  • en mode complet, il est redirigé vers /product-display/:brand/:sku
  • en mode web, il est redirigé vers /product-display-web/:brand/:sku

Le brand est aujourd'hui forcé à LV dans le front.

Recherche par slug

Quand l'utilisateur saisit un slug :

  • il est redirigé vers /slug-results/:slug
  • si un seul produit est trouvé, l'application redirige automatiquement vers la fiche produit correspondante
  • si plusieurs produits sont trouvés, l'utilisateur choisit la bonne variation

Vue produit mode complet

Le mode complet sert à inspecter les données Akeneo enrichies.

Fonctionnalités principales :

  • affichage d'un tableau de champs/valeurs
  • affichage du packshot principal
  • affichage d'une galerie de miniatures si disponible
  • recherche textuelle dans le tableau avec surlignage et navigation entre occurrences
  • lien vers la fiche produit du site
  • bascule vers le mode web
  • changement de langue à chaud
  • zoom image via modale

Le mode complet cherche à exposer un maximum d'information utile pour la vérification PIM.

Vue produit mode web

Le mode web est une vue filtrée et réorganisée autour des besoins e-commerce.

Fonctionnalités principales :

  • header produit plus éditorial
  • affichage des informations web prioritaires
  • accordions pour description, detail, autre
  • gestion des variantes couleur/taille à partir des produits partageant le même slug
  • changement de SKU via le sélecteur de tailles sans rechargement complet
  • changement de couleur avec mise à jour du SKU actif et du packshot
  • liens vers le site
  • changement de langue
  • bascule vers le mode complet

Le mode web ne montre pas l'intégralité des champs Akeneo. Il applique un filtrage fort pour se rapprocher du rendu marchand.

Cas particuliers

  • si le produit n'est pas trouvé, une notification d'erreur est affichée
  • si le slug ne retourne qu'un produit, la page de résultats est sautée
  • si certaines images ne sont pas chargeables, des fallbacks d'affichage sont utilisés
  • en mode web, certaines tailles peuvent être filtrées selon le pays cible porté par affichage_taille_web

Technique

Stack

  • Front : Angular standalone components
  • Back : Express
  • Source métier principale : API Akeneo REST
  • Sources annexes : deeplinks packshot et liste d'images du site

Fichiers clés

Front :

  • linvosges_utilitaire_akeneo/src/app/features/product-chooser/product-chooser.component.ts
  • linvosges_utilitaire_akeneo/src/app/features/product-display/components/product-display.component.ts
  • linvosges_utilitaire_akeneo/src/app/features/product-display/components/product-display-web2/product-display-web2.component.ts
  • linvosges_utilitaire_akeneo/src/app/features/product-display/components/slug-results/slug-results.component.ts
  • linvosges_utilitaire_akeneo/src/app/core/services/akeneo-api.service.ts
  • linvosges_utilitaire_akeneo/src/app/features/product-display/utils/product-formatter.util.ts
  • linvosges_utilitaire_akeneo/src/app/core/services/measures-cache.service.ts

Back :

  • server/routes/akeneo.routes.js
  • server/services/auth.service.js
  • server/services/akeneo.service.js
  • server/config/cache.js

Architecture générale

ProductChooserComponent  -> Router    -> ProductDisplayComponent (mode complet)    -> ProductDisplayWeb2Component (mode web)    -> SlugResultsComponent 
Angular services  -> AkeneoApiService    -> Express /api/products...      -> akeneo.routes.js        -> auth.service.js        -> akeneo.service.js          -> API Akeneo          -> Deeplink packshot          -> Deeplink liste images

Enchaînement des appels par SKU

Séquence nominale en mode complet ou web :

Utilisateur  -> ProductChooserComponent.searchBySku()  -> Router.navigate()  -> ProductDisplayComponent ou ProductDisplayWeb2Component  -> AkeneoApiService.getProductBySku()  -> GET /api/products/:brand/:sku?mode=...&lang=...  -> akeneo.routes.js  -> auth.service.js.authenticate()  -> akeneo.service.fetchProductBySku()  -> akeneo.service.fetchImagePackshot()  -> akeneo.service.fetchImagesList()  -> akeneo.service.enrichProductData()  -> réponse JSON front  -> formatProductData()  -> rendu Angular

Points importants :

  • le back récupère le produit et les images en parallèle
  • le back enrichit les valeurs Akeneo avec les labels d'attributs, d'options, de reference data et de reference entities
  • le front reformate ensuite les données selon le mode d'affichage

Enchaînement des appels par slug

Utilisateur  -> ProductChooserComponent.searchBySlug()  -> Router.navigate(/slug-results/:slug)  -> SlugResultsComponent  -> AkeneoApiService.getProductsBySlug()  -> GET /api/products/slug/:slug?lang=...  -> akeneo.routes.js  -> auth.service.js.authenticate()  -> akeneo.service.fetchProductsBySlug()  -> réponse JSON front

La route back fetchProductsBySlug() :

  • lance une requête avec locale
  • lance une requête sans locale
  • gère la pagination Akeneo
  • fusionne les résultats sans doublon

Spécificités du mode web

Le mode web a une logique supplémentaire :

  1. charger le produit principal
  2. extraire son slug
  3. charger tous les produits de ce slug
  4. construire les sélecteurs couleur/taille
  5. filtrer les tailles selon la langue/pays d'affichage

La classe ProductDisplayWeb2Component maintient trois caches en mémoire front :

  • cache des variantes par slug + langue
  • cache du produit principal par brand + sku + langue
  • cache image par brand + sku

TTL actuel :

  • 5 minutes côté front

Pipeline de formatage front

Le pipeline formatProductData() applique plusieurs transformations :

  1. sélection de la bonne valeur selon la langue, avec fallback
  2. filtrage des champs selon le mode complet ou web
  3. réordonnancement des champs importants
  4. ajout du SKU en tête
  5. traduction des unités via mesures.json
  6. conversion des booléens en Oui/Non
  7. agrégation de certaines compositions
  8. petits nettoyages spécifiques

Ce pipeline est central pour l'affichage. La logique métier de présentation est davantage côté front que côté back.

Backend Akeneo

Le service back akeneo.service.js gère :

  • les appels REST Akeneo
  • le suivi de pagination
  • les appels vers les images du site
  • l'enrichissement des labels

Le cache back repose sur node-cache :

  • TTL par défaut : 1 heure
  • usage sur produits, slugs, attributs, options, catégories et images

Données externes

  • Akeneo REST : source de vérité produit
  • deeplink packshot : image principale
  • deeplink jsonPackshotsBySku : liste d'images
  • src/assets/data/mesures.json : labels d'unités pour le formatage front

Points d'attention

  • le brand est essentiellement utilisé en LV dans le front actuel
  • le mode web ne repose pas sur une API dédiée, mais sur un filtrage front d'un produit enrichi
  • le rendu web contient de la logique forte de dérivation couleur/taille
  • le formatage dépend des labels récupérés côté back ; une régression d'enrichissement Akeneo se voit directement dans les écrans

Limites actuelles

  • le mode web embarque beaucoup de logique dans un seul composant
  • la vue web repose sur des conventions de champs Akeneo fortes
  • la gestion multi-marque n'est pas réellement généralisée dans les écrans de recherche
  • le cache front est purement mémoire et disparaît au refresh complet