Sylius 2 : comment garder un storefront très personnalisé ?
On conserve un storefront fortement personnalisé en séparant ce qui se garde de ce qui se réécrit : le design, les textes, les images, les URL et le parcours d'achat se conservent tels quels ; le code qui les produit est repris sur Bootstrap 5 et les Twig Hooks de Sylius 2. Il existe trois façons de mener cette reprise : réécrire le thème à l'identique, passer par le LegacyShopBridgePlugin pour étaler le travail, ou reconstruire un front headless sur l'API. Pour la plupart des boutiques, la réécriture à l'identique, page par page en partant de celles qui rapportent, est le meilleur rapport entre risque et coût.
Je suis développeur Sylius indépendant à Metz et j'ai mené des montées de version 1.x vers 2.x de boutiques en production. Les dirigeants qui ont investi dans un design sur mesure ont souvent peur de devoir tout refaire. Ce n'est pas le cas : on ne jette pas une charte graphique, on change la façon dont elle est codée.
Pourquoi un storefront personnalisé ne passe-t-il pas tel quel en Sylius 2 ?
Parce que Sylius 2 a changé les trois couches sur lesquelles reposait votre thème. Le guide officiel UPGRADE-2.0 remplace Semantic UI par Bootstrap 5, retire jQuery au profit de Symfony UX et Stimulus, et supprime les template events et les Sonata Blocks au profit des Twig Hooks. Les gabarits ont aussi été réorganisés par ressource, si bien que les surcharges de fichiers d'un thème 1.x ne correspondent souvent plus à rien.
Une bonne nouvelle passe souvent inaperçue : les thèmes ne disparaissent pas. Le même guide indique que la dépendance sylius/theme-bundle a été déplacée vers le ShopBundle. Si votre boutique sert plusieurs canaux avec des thèmes différents, ce principe reste en place ; c'est le contenu de chaque thème qu'il faut adapter.
Quelles stratégies pour conserver un storefront fortement personnalisé ?
| Stratégie | Quand la choisir | Ce qu'elle implique |
|---|---|---|
| Réécriture à l'identique sur Bootstrap 5 et Twig Hooks | Cas général, boutique appelée à durer | Le chantier front le plus prévisible, un socle aligné sur Sylius pour les versions suivantes |
| LegacyShopBridgePlugin, puis réécriture progressive | Thème très lourd et échéance proche | Un plugin expérimental à maintenir pendant la transition |
| Front headless sur l'API | Front déjà très éloigné de Sylius, application mobile | Un projet de reconstruction complet, référencement à traiter à part |
Le pont est détaillé dans l'article sur la migration progressive avec le Legacy Bridge, et l'option headless dans celui sur le front headless avec l'API Shop. Ici, je me concentre sur la première voie, la plus fréquente.
Comment migrer les personnalisations graphiques sans tout reconstruire ?
Extraire la charte du code existant
La première étape ne produit aucune page. Je relève dans les feuilles de style actuelles ce qui fait l'identité de la boutique : couleurs, polices, tailles de titres, arrondis, ombres, espacements, points de rupture. Ces valeurs deviennent des variables Sass de Bootstrap. La documentation de Bootstrap sur Sass explique le principe : on déclare ses valeurs avant d'importer Bootstrap, et chaque composant les reprend. Une grande partie du rendu se retrouve ainsi sans écrire de CSS page par page.
Réutiliser tout ce qui n'est pas lié au framework
Les images, les polices, les icônes, les textes, et une bonne partie du balisage de vos blocs maison (bandeau de réassurance, encart de livraison, mise en avant de produits) se réutilisent. Il faut traduire les classes Semantic UI en équivalents Bootstrap, mais la structure et le contenu restent. Les CSS écrites pour vos propres composants survivent souvent, à condition de ne pas dépendre des classes Semantic UI.
Reconstruire la structure avec les Twig Hooks
Chaque page du storefront Sylius 2 est un assemblage de hooks. Plutôt que de recopier les gabarits entiers, j'insère vos blocs, je remplace les morceaux qui diffèrent et je désactive ceux dont vous ne voulez pas. Cette méthode, gabarit par gabarit, est décrite dans l'article sur la migration des templates Twig personnalisés. Elle rend aussi les montées de version suivantes bien moins coûteuses, puisque votre thème ne fige plus de copies des gabarits de Sylius.
Réécrire les comportements, pas seulement l'apparence
Un storefront très personnalisé contient presque toujours du JavaScript : sélecteur de déclinaisons, galerie, filtres, ajout au panier sans rechargement. Ces scripts reposaient sur jQuery, retiré de Sylius 2, et se réécrivent en contrôleurs Stimulus ou en composants. C'est souvent la partie la plus longue du front, et elle mérite son propre inventaire.
Ce travail se chiffre mal à l'œil nu. Si vous voulez savoir lequel des trois chemins convient à votre boutique et combien de jours il représente, le diagnostic de migration Sylius 2 sert précisément à cela.
Dans quel ordre reprendre les pages ?
Je commence par ce qui encaisse : panier et tunnel de commande, puis la fiche produit, puis les listes de catégories et la recherche. Le compte client, les pages de contenu et les e-mails suivent. Chaque page reprise est comparée à sa version 1.14 sur les mêmes données, en captures côte à côte, sur ordinateur et sur mobile.
Je vérifie aussi ce que l'œil ne voit pas : les balises de titre et de description, les données structurées, les liens internes et les adresses des pages. Un storefront réécrit qui perd une balise canonique ou change une URL peut coûter du trafic. Ces contrôles font partie de chaque recette de page, au même titre que le rendu visuel.
Ce que je vous propose
Les correctifs de sécurité de Sylius 1.14 s'arrêtent le 31 décembre 2026, et un storefront très personnalisé est le chantier qui demande le plus d'anticipation. Je lance Sylius Upgrade Analyzer, l'outil open source que j'ai créé et publié sur le Sylius Store, sur votre projet : il compte les gabarits surchargés et les classes Semantic UI concernées. Je complète à la main l'inventaire des scripts et des blocs maison, je vous conseille une stratégie et je vous remets un diagnostic offert avec une estimation en jours. Je vous rappelle sous 24 heures ouvrées.