Contexte
Un grand acteur de l’horlogerie suisse nous a sollicité pour la conception et la mise en œuvre de sa nouvelle plateforme. Cette mission a notamment pour but de migrer la plateforme e-commerce Magento 1 (M1) arrivant en fin de support vers Magento 2 (M2).
Les enjeux de la migration sont les suivants :
- La plateforme US de la marque est une entité à part comprenant ses propres fonctionnalités que nous avons fusionnées avec la plateforme principale Suisse, tout en respectant les normes WCAG (Web Content Accessibility Guidelines), exigences permettant aux personnes en situation d’handicap d’utiliser le site ;
- La nouvelle plateforme devra comporter un outil CMS. En effet, lorsqu’on est un acteur important du secteur horloger et avec une histoire forte, il faut pouvoir proposer à ses utilisateurs un contenu évolutif et attractif autour des produits ;
- Le site est proposé dans 34 pays qu’il faut migrer avec toutes les fonctionnalités et spécificités propres aux différents pays ;
- La maintenance corrective et évolutive du Magento 1 que nous avons débutée en Janvier 2018 avec le client doit pouvoir continuer en parallèle de la mise en place de la nouvelle plateforme, ce qui constitue un enjeu technique, dans la mesure où une autre partie du site évolue en parallèle ;
- La mise en place d’une nouvelle plateforme sera l’occasion d’instaurer une toute nouvelle charte graphique au goût du jour.
Magento 2 en bref
Les avantages de passer à Magento 2, hormis profiter des dernières mises à jour de sécurité et d’une plateforme plus stable, sont nombreux
On peut notamment citer la mise en place d’API natives permettant de gérer l’intégralité des produits, des stocks mais aussi le processus de Checkout (partie la plus importante d’un e-commerce car c’est ici que le client finalise sa commande). Cette partie API est actuellement utilisée pour la mise en place d’un catalogue digital qui sera mis à disposition dans les différentes boutiques physiques de la marque, réduisant par la même occasion l’utilisation du papier, qui était jusque-là utilisé pour les catalogues produits.
Autre point important, le CMS intégré au travers du Page Builder permet de créer du contenu attractif et évolutif afin de mettre en avant la marque et son histoire.
Contrairement à Magento 1, la gestion du multistock est une fonctionnalité native de Magento 2 (dénommée Multi Source Inventory). Cela permet de pouvoir définir un stock différent pour chaque pays.
Un plan de migration progressif
Compte tenu des différentes problématiques exposées ci-avant et suite aux différents ateliers, nous avons décidé de proposer une migration progressive de la plateforme se déroulant en trois grandes étapes :
- Mise en place de Magento 2 pour gérer la partie CMS et mise en place du nouveau design sur M1 et M2 ;
- Migration de la plateforme US sur M2 ;
- Migration des autres stores sur M2.
Magento 2 et son CMS « made in WIDE »
Magento 2 propose nativement une fonctionnalité dénommée Page Builder permettant de créer du contenu grâce à une interface drag and drop. Le client ayant besoin de contenus typés et structurés pour ses différentes pages, nous avons développé nos propres Contents entièrement configurables, traduisibles et intégrables dans le Page Builder de Magento 2. Cela permet aux équipes de créer et déployer du contenu rapidement pour ses différents pays et de laisser la main à des contributeurs non techniques.
La cohabitation entre M1 et M2
La difficulté principale lorsque l’on propose la migration progressive d’une plateforme, c’est de pouvoir faire fonctionner chaque élément les uns avec les autres malgré l'obsolescence de certains d’entre eux et que cela se fasse de manière transparente pour l’utilisateur final.
Cette cohabitation temporaire fût possible grâce à l’utilisation d’Akamai, CDN (Content Delivery Network) principalement utilisé pour la mise en cache des contenus et qui nous a permis de gérer de manière simple le routing et la communication entre M1 et M2.
La règle de routage fût simple : les URLs contenant /shop étaient redirigées vers le Magento 1 tandis que toutes les autres allaient sur le Magento 2.
Un point important que nous avons dû gérer sont le header et le footer qui sont des parties communes aux deux plateformes.
Nous avons donc pris le parti de développer ces contenus directement dans le M2 et d’utiliser sa fonctionnalité native et très pratique de génération de blocs ESI (Edge Side Includes). Cette fonctionnalité nous a été d’une grande aide car elle nous a permis d’intégrer le header et le footer générés par M2 directement dans le M1 à l’aide d’un balisage propre à ce langage. L'interprétation de ce type de bloc est gérée ici par Akamai.
L’intégration de bloc ESI nous a aussi permis de développer toutes les CSS et le Javascript utiles au bon fonctionnement du nouveau design du site directement dans Magento 2 et de l’injecter dans le header pour une utilisation par Magento 1.
Voici le schéma de l’architecture temporaire simplifiée de la solution (ne comportant pas les interactions avec les systèmes externes tels que SAP, etc, ...) :
La migration progressive de la partie e-commerce
Le développement du e-commerce dans un nouveau pays implique plusieurs défis. Par exemple, la possibilité de récupérer l’intégralité des comptes clients existants ainsi que toutes les adresses associées.
La problématique principale que nous avons rencontrée est le chiffrement du mot de passe qui n’est pas le même entre M1 et M2. Pour cela, nous avons opté pour un double chiffrement, le premier utilisant la méthode M1 sur lequel on applique celui de M2 afin de garantir la sécurité. En effet, la méthode de Magento 1 est dépréciée et comporte des failles de sécurité.
Nous avons aussi profité de ce changement de solution pour renforcer les règles de création d’adresse et de compte (par exemple, limiter le nombre de caractères pour certains champs).
La migration de la partie e-commerce s’est déroulée en quatre étapes :
- Rapatriement de la plateforme US sur la plateforme principale ;
- Migration des pays européens ;
- Migration du Canada ;
- Migration de la Russie et du Japon.
(À l’heure où cet article est écrit nous rentrons dans la dernière étape de cette migration. À savoir la livraison en production du Japon.)
Voici le schéma simplifié de l’architecture finale de la solution (ne comportant pas les interactions avec les systèmes externes tels que SAP, etc, ...) :
Conclusion
La mise en œuvre d’une migration de Magento 1 vers Magento 2 pour une grande marque du secteur horloger est un défi que nous avons pu relever avec succès. Les migrations de pays s'enchaînent et nous sommes actuellement en phase de tests des derniers pays.
La différence d’architecture technique entre M1 et M2 est telle qu’il n’existe pas d’outil performant pour réaliser la migration de manière instantanée. Cela nécessite un véritable accompagnement dans la définition des besoins (car qui dit nouvelle solution dit nouvelles fonctionnalités). De ce fait, il a fallu re-développer l’ensemble des fonctionnalités existantes et s’adapter aux spécificités de cette nouvelle version de Magento.
Grâce aux nouvelles fonctionnalités présentes dans Magento 2 (blocs ESI, Page Builder, etc, …), ainsi qu’à la puissance d’Akamai, nous avons pu réussir cette migration de manière progressive et transparente pour l’utilisateur. Cela permettant aussi aux différentes équipes une montée en puissance sur la nouvelle solution.
La mise en place de cette nouvelle plateforme e-commerce fût un grand succès pour l’agence WIDE. Celle-ci nous a permis de valider notre expertise technologique de ce type de problématiques. Nous avons pu participer à toutes les étapes de conception et de développement du projet afin de proposer une solution durable, performante et en adéquation avec les besoins du client.
Cette solution est désormais la base de nouveaux projets et le début d’une nouvelle grande aventure en collaboration avec la marque, qui a dans le même temps enregistré un nombre de ventes record sur ses sites e-commerce partout dans le monde.
We Create Continuous Relationship Experiences !