[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$f3cAdltP08uKaaziov0IxuC5trx88j-XJye-EY6tk0Mc":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":62,"megamenu":143,"footer-db":199,"header-db":217,"$fmNJRQxgLuA1OImwVPicHy-svB32ahg7_RB3ef-_6gI8":228},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":35,"psVersions":36,"content":40,"faq":41,"tldr":57,"readingTime":58,"generatedAt":59,"publishDate":59,"relatedArticles":60,"sourceCategory":61},"Implémenter un ScrollSpy sur vos fiches produits PrestaShop","scrollspy-navigation-fiche-produit-prestashop","Guide complet pour ajouter une navigation ScrollSpy sur les pages produits PrestaShop. Code CSS, JavaScript et intégration Smarty pour PS 1.7 et 8.x.","developpement",[28,29,30,31,32,33,34],"scrollspy","fiche produit","javascript","bootstrap","navigation","UX","smarty","intermediaire",[37,38,39],"1.6","1.7","8.x","\u003Ch2>Pourquoi ajouter un ScrollSpy sur vos fiches produits\u003C\u002Fh2>\n\u003Cp>Sur une fiche produit PrestaShop riche — caractéristiques techniques, description longue, avis clients, produits associés — l'utilisateur se retrouve vite à scroller sans repère. Le \u003Cstrong>ScrollSpy\u003C\u002Fstrong> résout ce problème en affichant une barre de navigation contextuelle qui met en surbrillance la section actuellement visible à l'écran.\u003C\u002Fp>\n\u003Cp>Ce patron UX, popularisé par Bootstrap, améliore significativement l'expérience utilisateur sur les pages longues. Amazon, Cdiscount et la plupart des grandes marketplaces l'utilisent sur leurs fiches produits.\u003C\u002Fp>\n\u003Ch2>Le principe du ScrollSpy\u003C\u002Fh2>\n\u003Cp>Le ScrollSpy repose sur trois mécanismes :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Une navbar fixe** contenant des ancres vers chaque section de la page\u003C\u002Fli>\n\u003Cli>**Un listener JavaScript** qui détecte quelle section est visible dans le viewport\u003C\u002Fli>\n\u003Cli>**Une classe CSS active** appliquée dynamiquement au lien correspondant\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Bootstrap intègre nativement ce composant — et PrestaShop embarque Bootstrap, ce qui simplifie considérablement l'implémentation.\u003C\u002Fp>\n\u003Ch2>Implémentation sur PrestaShop 1.6 (Bootstrap 3)\u003C\u002Fh2>\n\u003Cp>PrestaShop 1.6 utilise Bootstrap 3, qui inclut le plugin ScrollSpy en natif. L'intégration est donc directe.\u003C\u002Fp>\n\u003Ch3>Étape 1 : Préparer le CSS\u003C\u002Fh3>\n\u003Cp>Ajoutez ces styles dans votre fichier \u003Ccode>product.css\u003C\u002Fcode> (préférable à \u003Ccode>global.css\u003C\u002Fcode> pour ne charger le code que sur les fiches produits) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Navigation ScrollSpy produit *\u002F\n.product-scrollspy-nav {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background: #fff;\n  border-bottom: 1px solid #e5e5e5;\n  margin-bottom: 20px;\n}\n\n.product-scrollspy-nav .nav > li > a {\n  padding: 12px 18px;\n  color: #666;\n  font-weight: 500;\n  border-bottom: 3px solid transparent;\n  transition: all 0.2s ease;\n}\n\n.product-scrollspy-nav .nav > li.active > a,\n.product-scrollspy-nav .nav > li > a:hover {\n  color: #333;\n  background: transparent;\n  border-bottom-color: #2fb5d2;\n}\n\n\u002F* Offset pour compenser la navbar fixe *\u002F\n.product-section {\n  scroll-margin-top: 60px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Étape 2 : Ajouter la navbar dans product.tpl\u003C\u002Fh3>\n\u003Cp>Insérez ce bloc dans votre fichier \u003Ccode>themes\u002Fvotre-theme\u002Fproduct.tpl\u003C\u002Fcode>, juste avant la zone de contenu principal :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<nav id=\"product-navbar\" class=\"product-scrollspy-nav navbar navbar-default navbar-static\">\n  <div class=\"container\">\n    <ul class=\"nav navbar-nav\">\n      <li><a href=\"#product-description\">{l s='Description'}<\u002Fa><\u002Fli>\n      {if isset($features) && $features}\n        <li><a href=\"#product-features\">{l s='Caractéristiques'}<\u002Fa><\u002Fli>\n      {\u002Fif}\n      {if isset($attachments) && $attachments}\n        <li><a href=\"#product-attachments\">{l s='Téléchargements'}<\u002Fa><\u002Fli>\n      {\u002Fif}\n      {if $HOOK_PRODUCT_TAB}\n        <li><a href=\"#product-reviews\">{l s='Avis'}<\u002Fa><\u002Fli>\n      {\u002Fif}\n    <\u002Ful>\n  <\u002Fdiv>\n<\u002Fnav>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Étape 3 : Ajouter les ancres sur chaque section\u003C\u002Fh3>\n\u003Cp>Chaque section de votre fiche produit doit porter un \u003Ccode>id\u003C\u002Fcode> correspondant aux liens de la navbar. Voici l'exemple pour le bloc caractéristiques :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{if isset($features) && $features}\n  <section id=\"product-features\" class=\"product-section page-product-box\">\n    <h3 class=\"page-product-heading\">{l s='Fiche technique'}<\u002Fh3>\n    <table class=\"table-data-sheet\">\n      {foreach from=$features item=feature}\n        <tr class=\"{cycle values='odd,even'}\">\n          {if isset($feature.value)}\n            <td>{$feature.name|escape:'html':'UTF-8'}<\u002Ftd>\n            <td>{$feature.value|escape:'html':'UTF-8'}<\u002Ftd>\n          {\u002Fif}\n        <\u002Ftr>\n      {\u002Fforeach}\n    <\u002Ftable>\n  <\u002Fsection>\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Étape 4 : Activer le ScrollSpy\u003C\u002Fh3>\n\u003Cp>Ajoutez l'attribut \u003Ccode>data-spy\u003C\u002Fcode> sur le \u003Ccode>\u003Cbody>\u003C\u002Fcode> de votre page, ou initialisez-le via JavaScript pour plus de contrôle :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n$(document).ready(function() {\n  $('body').scrollspy({\n    target: '#product-navbar',\n    offset: 80 \u002F\u002F Hauteur de la navbar + marge\n  });\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Implémentation moderne pour PrestaShop 8.x\u003C\u002Fh2>\n\u003Cp>PrestaShop 8.x n'embarque plus Bootstrap de la même manière. Le thème par défaut utilise Bootstrap 4, et de nombreux thèmes custom s'en affranchissent totalement. Voici une approche \u003Cstrong>sans dépendance Bootstrap\u003C\u002Fstrong>, utilisant l'API native \u003Ccode>IntersectionObserver\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>Le JavaScript natif\u003C\u002Fh3>\n\u003Cp>Créez un fichier \u003Ccode>scrollspy-product.js\u003C\u002Fcode> dans les assets de votre thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n  const sections = document.querySelectorAll('.product-section[id]');\n  const navLinks = document.querySelectorAll('.product-scrollspy-nav a[href^=\"#\"]');\n\n  if (!sections.length || !navLinks.length) return;\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          navLinks.forEach((link) => link.classList.remove('active'));\n          const activeLink = document.querySelector(\n            `.product-scrollspy-nav a[href=\"#${entry.target.id}\"]`\n          );\n          if (activeLink) activeLink.classList.add('active');\n        }\n      });\n    },\n    {\n      rootMargin: '-20% 0px -70% 0px',\n      threshold: 0\n    }\n  );\n\n  sections.forEach((section) => observer.observe(section));\n\n  \u002F\u002F Smooth scroll au clic\n  navLinks.forEach((link) => {\n    link.addEventListener('click', function(e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  });\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Le CSS moderne\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.product-scrollspy-nav {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(8px);\n  border-bottom: 1px solid #eee;\n  padding: 0 1rem;\n  display: flex;\n  gap: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.product-scrollspy-nav a {\n  display: inline-block;\n  padding: 14px 20px;\n  color: #666;\n  text-decoration: none;\n  font-weight: 500;\n  font-size: 0.9rem;\n  white-space: nowrap;\n  border-bottom: 3px solid transparent;\n  transition: color 0.2s, border-color 0.2s;\n}\n\n.product-scrollspy-nav a.active,\n.product-scrollspy-nav a:hover {\n  color: #232323;\n  border-bottom-color: var(--product-accent, #2fb5d2);\n}\n\n.product-section {\n  scroll-margin-top: 60px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Intégration Smarty (PrestaShop 8.x)\u003C\u002Fh3>\n\u003Cp>Dans votre template \u003Ccode>catalog\u002Fproduct.tpl\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<nav class=\"product-scrollspy-nav\">\n  <a href=\"#product-description\">{l s='Description' d='Shop.Theme.Catalog'}<\u002Fa>\n  {if $product.features}\n    <a href=\"#product-features\">{l s='Détails du produit' d='Shop.Theme.Catalog'}<\u002Fa>\n  {\u002Fif}\n  {if $product.attachments}\n    <a href=\"#product-attachments\">{l s='Pièces jointes' d='Shop.Theme.Catalog'}<\u002Fa>\n  {\u002Fif}\n  <a href=\"#product-reviews\">{l s='Avis' d='Shop.Theme.Catalog'}<\u002Fa>\n<\u002Fnav>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Point important :\u003C\u002Fstrong> Sur PrestaShop 8.x, les traductions utilisent le système de domaines (\u003Ccode>d='Shop.Theme.Catalog'\u003C\u002Fcode>). N'oubliez pas de les inclure pour que vos chaînes soient traduisibles.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques et pièges à éviter\u003C\u002Fh2>\n\u003Ch3>Le piège de la navbar fixe\u003C\u002Fh3>\n\u003Cp>Si votre thème possède déjà un header sticky, la navbar ScrollSpy viendra se superposer. Deux solutions :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Ajustez le `top` en CSS pour positionner le ScrollSpy sous le header\u003C\u002Fli>\n\u003Cli>Utilisez un `scroll-margin-top` suffisant sur vos sections pour que l'ancrage ne soit pas masqué\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Performance sur mobile\u003C\u002Fh3>\n\u003Cp>Sur mobile, la barre ScrollSpy doit être scrollable horizontalement. Le CSS proposé gère déjà ce cas avec \u003Ccode>overflow-x: auto\u003C\u002Fcode>. Vérifiez que les libellés restent lisibles et que la zone de tap est suffisante (minimum 44px de hauteur).\u003C\u002Fp>\n\u003Ch3>Intégrer les modules tiers\u003C\u002Fh3>\n\u003Cp>Les modules d'avis (Avis Vérifiés, Google Reviews, etc.) injectent leur contenu via des hooks. Pour les inclure dans votre ScrollSpy, encapsulez le hook dans une \u003Ccode>div\u003C\u002Fcode> avec un \u003Ccode>id\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<div id=\"product-reviews\" class=\"product-section\">\n  {hook h='displayProductTabContent'}\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Lazy loading et recalcul\u003C\u002Fh3>\n\u003Cp>Si certaines sections chargent du contenu en AJAX (avis, produits associés), l'\u003Ccode>IntersectionObserver\u003C\u002Fcode> s'adapte automatiquement car il surveille en continu. Avec le ScrollSpy Bootstrap classique, il faut appeler \u003Ccode>$('body').scrollspy('refresh')\u003C\u002Fcode> après chaque chargement dynamique.\u003C\u002Fp>\n\u003Ch2>Aller plus loin : ScrollSpy + tabs\u003C\u002Fh2>\n\u003Cp>Une variante élégante consiste à combiner le ScrollSpy avec un système d'onglets : au-dessus du fold, les sections s'affichent en onglets ; en dessous, le ScrollSpy prend le relais. C'est le pattern utilisé par les fiches produits Amazon. Cette approche nécessite un JavaScript plus élaboré mais offre la meilleure expérience utilisateur sur les fiches produits complexes.\u003C\u002Fp>",[42,45,48,51,54],{"q":43,"a":44},"Le ScrollSpy fonctionne-t-il avec tous les thèmes PrestaShop ?","Oui, à condition d'adapter l'implémentation. Les thèmes basés sur Bootstrap (la majorité des thèmes 1.6 et 1.7) peuvent utiliser le plugin ScrollSpy natif de Bootstrap. Pour les thèmes PrestaShop 8.x ou les thèmes custom sans Bootstrap, utilisez l'approche IntersectionObserver proposée dans cet article, qui ne dépend d'aucune librairie externe.",{"q":46,"a":47},"Comment ajouter une section dynamique au ScrollSpy sans modifier le template ?","Vous pouvez créer un module PrestaShop qui s'accroche au hook displayProductTabContent et injecte à la fois le contenu de la section et le lien de navigation via JavaScript. Utilisez document.querySelector('.product-scrollspy-nav') pour ajouter dynamiquement un lien, et l'IntersectionObserver détectera automatiquement la nouvelle section si elle porte la classe product-section et un id unique.",{"q":49,"a":50},"Le ScrollSpy impacte-t-il les performances de la fiche produit ?","L'impact est négligeable. L'IntersectionObserver est conçu pour être performant car il est géré nativement par le navigateur, contrairement aux anciens listeners sur l'événement scroll qui pouvaient provoquer des saccades. Le CSS ajouté représente moins de 1 Ko. Veillez simplement à ne pas observer des centaines d'éléments simultanément, ce qui n'arrive jamais sur une fiche produit standard.",{"q":52,"a":53},"Comment rendre le ScrollSpy compatible avec le lazy loading des images produit ?","Le lazy loading des images peut modifier la hauteur des sections après le chargement initial. Avec IntersectionObserver, ce n'est pas un problème car l'observation est continue. Si vous utilisez le ScrollSpy Bootstrap, appelez $('body').scrollspy('refresh') dans le callback de chargement des images, ou utilisez l'attribut width et height sur vos balises img pour réserver l'espace avant le chargement.",{"q":55,"a":56},"Peut-on utiliser le ScrollSpy sur d'autres pages que la fiche produit ?","Absolument. Le ScrollSpy est pertinent sur toute page longue : pages CMS de type FAQ, conditions générales de vente, guides d'achat par catégorie. Le principe reste identique : une navbar sticky avec des ancres et des sections identifiées par des id. Sur PrestaShop 8.x, vous pouvez créer un module générique qui détecte les titres H2 d'une page CMS et génère automatiquement la navigation ScrollSpy.","Le ScrollSpy ajoute une navigation contextuelle sticky sur les fiches produits longues, améliorant l'UX en indiquant la section visible. Sur PrestaShop 1.6\u002F1.7, utilisez le plugin Bootstrap natif ; sur PrestaShop 8.x, préférez l'API IntersectionObserver pour une solution sans dépendance, performante et compatible tous thèmes.",5,"2026-03-21T14:26:18.000Z",[],"PrestaShop pour les développeurs",{"columns":63},[64,80,110,131],{"title":65,"links":66},"Plateforme",[67,71,74,77],{"label":68,"href":69,"external":70},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":72,"href":73,"external":70},"Devenir Ambassadeur","\u002Fambassadeur",{"label":75,"href":76,"external":70},"Modules PrestaShop","\u002Fmodules",{"label":78,"href":79,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":81,"links":82},"Le Synedre",[83,86,89,92,95,98,101,104,107],{"label":84,"href":85,"external":70},"L'histoire","\u002Fsynedre",{"label":87,"href":88,"external":70},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":90,"href":91,"external":70},"L'équipe","\u002Fequipe",{"label":93,"href":94,"external":70},"Le réacteur en direct","\u002Freacteur",{"label":96,"href":97,"external":70},"Le Drill (entraînement)","\u002Fdrill",{"label":99,"href":100,"external":70},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":102,"href":103,"external":70},"Les agents IA","\u002Fagents-ia",{"label":105,"href":106,"external":70},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":108,"href":109,"external":70},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":111,"links":112},"Ressources",[113,116,119,122,125,128],{"label":114,"href":115,"external":70},"Blog","\u002Fblog",{"label":117,"href":118,"external":70},"Academy","\u002Facademy",{"label":120,"href":121,"external":70},"Dictionnaire","\u002Fdictionnaire",{"label":123,"href":124,"external":70},"Expertise PrestaShop","\u002Fexpertise",{"label":126,"href":127,"external":70},"Flywheel","\u002Fflywheel",{"label":129,"href":130,"external":70},"Manifeste","\u002Fmanifeste",{"title":132,"links":133},"À propos",[134,137,140],{"label":135,"href":136,"external":70},"Alexandre Carette","\u002Fa-propos",{"label":138,"href":139,"external":70},"Dossier de presse","\u002Fpresse",{"label":141,"href":142,"external":70},"Contact","\u002Fcontact",{"items":144},[145,154,160,166,174,182,187,193],{"id":146,"type":147,"label":148,"href":124,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":151,"children":152,"psChildren":153},41,"link",{"fr":149},"Expertise",null,0,[],[],{"id":155,"type":147,"label":156,"href":115,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":157,"children":158,"psChildren":159},42,{"fr":114},1,[],[],{"id":161,"type":147,"label":162,"href":76,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":163,"children":164,"psChildren":165},43,{"fr":75},2,[],[],{"id":167,"type":147,"label":168,"href":170,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":171,"children":172,"psChildren":173},44,{"fr":169},"Outils IA","\u002Foutils-ia",3,[],[],{"id":175,"type":147,"label":176,"href":69,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":178,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":179,"children":180,"psChildren":181},45,{"fr":177},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":183,"type":147,"label":184,"href":118,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":58,"children":185,"psChildren":186},46,{"fr":117},[],[],{"id":188,"type":147,"label":189,"href":136,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":190,"children":191,"psChildren":192},47,{"fr":132},6,[],[],{"id":194,"type":147,"label":195,"href":142,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":70,"position":196,"children":197,"psChildren":198},48,{"fr":141},7,[],[],{"footer":200},{"theme":201,"description":150,"hours":150,"logo":202,"contact":205,"social":206,"bottomBar":216},"dark",{"src":203,"href":204,"alt":135},"\u002Flogo-ac.svg","\u002F",{"email":150,"phone":150,"address":150,"cta":150},[207,210,213],{"platform":208,"href":209,"label":208},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":211,"href":212,"label":211},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":214,"href":215,"label":214},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":150},{"header":218},{"logo":219,"topBar":222,"contactEmail":225,"features":226,"navBar":150},{"src":203,"alt":220,"text":135,"href":204,"class":221},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":150,"showLanguages":70,"align":223,"languages":224},"left",[],"contact@alexandrecarette.fr",{"showSearch":70,"showWishlist":70,"showLogin":20,"showContact":70,"showCart":70,"stickyHeader":20,"headerLayout":227},"inline",{"academy":229,"blog":230,"expertise":241},[],[231,235,238],{"title":232,"url":233,"score":157,"type":234},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":236,"url":237,"score":157,"type":234},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":239,"url":240,"score":157,"type":234},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]