[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fkUHKMs9HcbOVR6vKg2P2PDgla0Zqzqlk40yx-wFu2y8":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"megamenu":142,"$f3pszqNg9QuUCpxwhsw3FsTPnHzipA2WIIvAArF9g0Eo":198,"footer-db":212,"header-db":230},{"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":34,"psVersions":35,"content":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Optimiser l'UX d'une boutique PrestaShop : menu, scroll infini et navigation","optimiser-ux-boutique-prestashop-menu-scroll-navigation","Guide complet pour améliorer l'expérience utilisateur PrestaShop : menu déroulant avec compteur produits, scroll infini maîtrisé, navigation sticky et bonnes pratiques UX.","design",[28,29,30,31,32,33],"UX","navigation","menu","scroll infini","front-end","thème PrestaShop","intermediaire",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Introduction\u003C\u002Fh2>\n\u003Cp>L'expérience utilisateur d'une boutique en ligne conditionne directement le taux de conversion. Un menu peu ergonomique, un scroll infini qui masque le footer, un favicon oublié… ces détails apparemment mineurs font fuir les visiteurs sans qu'ils sachent toujours pourquoi.\u003C\u002Fp>\n\u003Cp>Dans cet article, je passe en revue les optimisations UX les plus fréquentes sur une boutique PrestaShop, avec le code correspondant et les bonnes pratiques à appliquer dès la mise en ligne.\u003C\u002Fp>\n\u003Ch2>Menu déroulant avec compteur de produits par catégorie\u003C\u002Fh2>\n\u003Cp>Afficher le nombre de produits dans chaque catégorie du menu est un excellent levier UX : le visiteur sait immédiatement où se concentre l'offre, ce qui réduit les clics inutiles et améliore la navigation.\u003C\u002Fp>\n\u003Ch3>Approche sur PrestaShop 1.6\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 1.6, on pouvait créer une méthode statique dans un module personnalisé de thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F modules\u002Fmontheme\u002Fmontheme.php\npublic static function countProductInCat($id_category)\n{\n    $category = new Category((int) $id_category, (int) Context::getContext()->language->id);\n    return $category->getProducts(\n        (int) Context::getContext()->language->id,\n        1,\n        1,\n        null,\n        null,\n        true \u002F\u002F count_only = true\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis dans le template Smarty du header :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<ul class=\"sub-menu\">\n  {foreach from=$menu item=item}\n    <li class=\"menu-item\">\n      <a href=\"{$link->getCategoryLink($item.id_category)}\">\n        {$item.name} ({MonTheme::countProductInCat($item.id_category)})\n      <\u002Fa>\n    <\u002Fli>\n  {\u002Fforeach}\n<\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Attention aux performances :\u003C\u002Fstrong> cette méthode exécute une requête SQL par catégorie à chaque chargement de page. Sur un catalogue conséquent, cela peut dégrader sérieusement les temps de réponse.\u003C\u002Fp>\n\u003Ch3>Approche optimisée pour PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, privilégiez une requête SQL unique avec cache :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\nuse PrestaShop\\PrestaShop\\Adapter\\Entity\\Category;\n\npublic static function getCategoryProductCounts(int $id_lang): array\n{\n    $cacheKey = 'category_product_counts_' . $id_lang;\n\n    if (!Cache::isStored($cacheKey)) {\n        $sql = 'SELECT cp.id_category, COUNT(DISTINCT cp.id_product) AS total\n                FROM ' . _DB_PREFIX_ . 'category_product cp\n                INNER JOIN ' . _DB_PREFIX_ . 'product_shop ps\n                    ON cp.id_product = ps.id_product\n                    AND ps.id_shop = ' . (int) Context::getContext()->shop->id . '\n                    AND ps.active = 1\n                GROUP BY cp.id_category';\n\n        $results = Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS($sql);\n        $counts = [];\n        foreach ($results as $row) {\n            $counts[(int) $row['id_category']] = (int) $row['total'];\n        }\n        Cache::store($cacheKey, $counts);\n    }\n\n    return Cache::retrieve($cacheKey);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche réduit les appels SQL de N requêtes (une par catégorie) à une seule requête globale, mise en cache pour le reste de la requête HTTP.\u003C\u002Fp>\n\u003Ch2>Maîtriser le scroll infini sans sacrifier le footer\u003C\u002Fh2>\n\u003Cp>Le scroll infini est séduisant pour les catalogues visuels (mode, déco, textile), mais il pose un problème majeur : \u003Cstrong>le footer devient inaccessible\u003C\u002Fstrong>. Or le footer contient les mentions légales, les liens de réassurance, les coordonnées — autant d'éléments obligatoires et rassurants pour l'acheteur.\u003C\u002Fp>\n\u003Ch3>La solution : scroll infini déclenché par bouton\u003C\u002Fh3>\n\u003Cp>Plutôt qu'un chargement automatique permanent, implémentez un bouton « Charger plus de produits » :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F assets\u002Fjs\u002Finfinite-scroll.js\ndocument.addEventListener('DOMContentLoaded', function () {\n    const loadMoreBtn = document.getElementById('load-more-products');\n    let currentPage = 1;\n\n    if (!loadMoreBtn) return;\n\n    loadMoreBtn.addEventListener('click', function () {\n        currentPage++;\n        const url = `${window.location.pathname}?page=${currentPage}`;\n\n        fetch(url, {\n            headers: { 'X-Requested-With': 'XMLHttpRequest' }\n        })\n        .then(response => response.text())\n        .then(html => {\n            const parser = new DOMParser();\n            const doc = parser.parseFromString(html, 'text\u002Fhtml');\n            const newProducts = doc.querySelectorAll('.product-miniature');\n\n            if (newProducts.length === 0) {\n                loadMoreBtn.style.display = 'none';\n                return;\n            }\n\n            const container = document.getElementById('product-list');\n            newProducts.forEach(product => container.appendChild(product));\n        })\n        .catch(error => console.error('Erreur chargement produits:', error));\n    });\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche préserve l'accès au footer tout en gardant l'aspect dynamique du chargement progressif.\u003C\u002Fp>\n\u003Ch3>Ajouter des ancres de navigation rapide\u003C\u002Fh3>\n\u003Cp>Complétez avec des boutons de navigation vers le haut et le bas de page :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* assets\u002Fcss\u002Fnavigation-helpers.css *\u002F\n.scroll-nav-btn {\n    position: fixed;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background-color: var(--primary-color, #4F46E5);\n    color: #fff;\n    border: none;\n    cursor: pointer;\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.8;\n    transition: opacity 0.3s ease;\n}\n\n.scroll-nav-btn:hover {\n    opacity: 1;\n}\n\n.scroll-to-top { bottom: 70px; }\n.scroll-to-bottom { bottom: 20px; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Point important :\u003C\u002Fstrong> assurez-vous que les boutons de navigation sont visuellement distincts et utilisent des icônes explicites (flèches). Un carré coloré sans icône ne sera pas compris par les visiteurs.\u003C\u002Fp>\n\u003Ch2>Menu sticky : garder la navigation accessible\u003C\u002Fh2>\n\u003Cp>Un header fixe qui suit le défilement améliore considérablement la navigation, surtout sur les pages longues (catalogues, fiches produits détaillées).\u003C\u002Fp>\n\u003Ch3>Implémentation CSS moderne\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* assets\u002Fcss\u002Fsticky-header.css *\u002F\n.main-header {\n    position: sticky;\n    top: 0;\n    z-index: 1030;\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n    transition: box-shadow 0.3s ease;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Préférez \u003Ccode>position: sticky\u003C\u002Fcode> à \u003Ccode>position: fixed\u003C\u002Fcode> (ou à la classe Bootstrap \u003Ccode>navbar-fixed-top\u003C\u002Fcode> de l'époque 1.6). Le sticky conserve le flux naturel du document et ne nécessite pas de padding compensatoire sur le body.\u003C\u002Fp>\n\u003Ch2>Menu déroulant : slideToggle plutôt que slideDown\u003C\u002Fh2>\n\u003Cp>Un menu qui ne peut que s'ouvrir sans se refermer est une source de frustration. L'erreur classique est d'utiliser \u003Ccode>slideDown()\u003C\u002Fcode> au clic sans gérer la fermeture.\u003C\u002Fp>\n\u003Ch3>Le problème\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F ❌ Le menu s'ouvre mais ne se referme jamais au clic\n$('.dropdown').click(function (event) {\n    event.stopPropagation();\n    $('.sub-menu').slideDown();\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>La solution\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F ✅ Le menu bascule entre ouvert et fermé\n$('#dropdownMenu').click(function (e) {\n    e.preventDefault();\n    $(this).find('.sub-menu').slideToggle('fast');\n    $(this).toggleClass('is-open');\n});\n\n\u002F\u002F Fermer le menu au clic en dehors\n$(document).on('click', function (e) {\n    if (!$(e.target).closest('#dropdownMenu').length) {\n        $('.sub-menu').slideUp('fast');\n        $('#dropdownMenu').removeClass('is-open');\n    }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Bonne pratique :\u003C\u002Fstrong> utilisez un \u003Ccode>id\u003C\u002Fcode> plutôt qu'une \u003Ccode>class\u003C\u002Fcode> pour cibler un menu unique, et ajoutez une classe d'état (\u003Ccode>is-open\u003C\u002Fcode>) pour pouvoir styler le menu selon son état (rotation de la flèche, changement de couleur).\u003C\u002Fp>\n\u003Ch3>Approche moderne sans jQuery (PrestaShop 8.x)\u003C\u002Fh3>\n\u003Cp>PrestaShop 8.x s'éloigne progressivement de jQuery. Voici l'équivalent en JavaScript natif :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\nconst dropdown = document.getElementById('dropdownMenu');\nconst submenu = dropdown?.querySelector('.sub-menu');\n\nif (dropdown && submenu) {\n    dropdown.addEventListener('click', function (e) {\n        e.preventDefault();\n        submenu.classList.toggle('is-visible');\n        dropdown.classList.toggle('is-open');\n    });\n\n    document.addEventListener('click', function (e) {\n        if (!dropdown.contains(e.target)) {\n            submenu.classList.remove('is-visible');\n            dropdown.classList.remove('is-open');\n        }\n    });\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.sub-menu {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n}\n\n.sub-menu.is-visible {\n    max-height: 500px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Checklist UX avant mise en production\u003C\u002Fh2>\n\u003Cp>Avant de livrer une boutique PrestaShop, vérifiez systématiquement ces points :\u003C\u002Fp>\n\u003Ch3>Éléments obligatoires\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Favicon personnalisé** : le favicon PrestaShop par défaut trahit un site non finalisé. Générez toutes les tailles nécessaires (16x16, 32x32, 180x180 pour Apple Touch) et placez-les dans `img\u002Ffavicon\u002F`.\u003C\u002Fli>\n\u003Cli>**Mentions légales** : obligatoires en France (CGV, CGU, politique de confidentialité). Leur absence expose à des sanctions.\u003C\u002Fli>\n\u003Cli>**Liens sociaux fonctionnels** : vérifiez que chaque lien pointe vers la bonne page et s'ouvre dans un nouvel onglet (`target=\"_blank\"` avec `rel=\"noopener noreferrer\"`).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Éléments de réassurance\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Délais de livraison clairs** : « Livraison en 48h » est plus vendeur que « Expédition sous 48h ». Le client veut savoir quand il recevra son colis, pas quand il partira de l'entrepôt.\u003C\u002Fli>\n\u003Cli>**Hiérarchie visuelle du panier** : le bouton panier doit être plus visible que les icônes sociales. L'objectif principal reste l'achat.\u003C\u002Fli>\n\u003Cli>**Séparateurs non ambigus** : évitez le tiret `-` comme séparateur dans les informations de prix ou de livraison. Il peut être confondu avec un signe négatif. Utilisez plutôt `|` ou `·`.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Éléments de confort\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Produits mis en valeur** : sur fond blanc uniforme, les fiches produits se fondent dans le décor. Ajoutez des bordures subtiles, des ombres légères ou un fond légèrement contrasté pour les zones produits.\u003C\u002Fli>\n\u003Cli>**Navigation retour visible** : un bouton back-to-top est indispensable dès que la page dépasse deux écrans de hauteur.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Conclusion\u003C\u002Fh2>\n\u003Cp>L'optimisation UX d'une boutique PrestaShop ne se résume pas à choisir un beau thème. Ce sont les détails d'interaction — un menu qui se replie, un footer accessible, une hiérarchie visuelle cohérente — qui font la différence entre un site amateur et une boutique professionnelle qui convertit. Prenez le temps d'auditer chaque page avec un regard critique avant la mise en production, et n'hésitez pas à solliciter des retours extérieurs : ce que vous trouvez évident ne l'est jamais pour vos visiteurs.\u003C\u002Fp>",[41,44,47,50,53],{"q":42,"a":43},"Comment afficher le nombre de produits par catégorie dans le menu PrestaShop ?","Utilisez une requête SQL unique regroupant les compteurs par catégorie, mise en cache via la classe Cache de PrestaShop. Évitez d'instancier un objet Category par catégorie dans le template, car cela génère autant de requêtes SQL que de catégories et dégrade les performances. Sur PrestaShop 8.x, injectez les compteurs via un hook ou un module dédié plutôt que d'appeler des méthodes statiques directement dans les templates.",{"q":45,"a":46},"Comment rendre le footer accessible avec un scroll infini sur PrestaShop ?","Remplacez le scroll infini automatique par un bouton 'Charger plus de produits' qui déclenche le chargement AJAX à la demande. Ainsi, le footer reste naturellement accessible une fois que le visiteur a fini de parcourir les produits. Complétez avec des boutons d'ancrage rapide (scroll-to-top et scroll-to-bottom) en position fixe pour faciliter la navigation.",{"q":48,"a":49},"Quelle est la différence entre position sticky et position fixed pour un header PrestaShop ?","La propriété CSS position: sticky maintient l'élément dans le flux du document jusqu'à ce qu'il atteigne le bord de défilement, puis le fixe. Contrairement à position: fixed, elle ne retire pas l'élément du flux et n'exige donc pas d'ajouter un padding-top compensatoire au body. C'est l'approche recommandée pour les headers modernes sur PrestaShop 8.x.",{"q":51,"a":52},"Comment créer un menu déroulant qui s'ouvre ET se ferme au clic dans PrestaShop ?","Utilisez slideToggle() (jQuery) ou classList.toggle() (JavaScript natif) au lieu de slideDown(). Ajoutez un écouteur sur document pour fermer le menu lors d'un clic en dehors. Ciblez le menu avec un id unique plutôt qu'une classe pour éviter les conflits avec d'autres menus déroulants de la page.",{"q":54,"a":55},"Quels éléments UX obligatoires vérifier avant de mettre en ligne une boutique PrestaShop ?","Au minimum : favicon personnalisé (toutes tailles), mentions légales complètes (CGV, CGU, confidentialité), liens sociaux fonctionnels ouvrant dans un nouvel onglet, délais de livraison formulés du point de vue client, hiérarchie visuelle plaçant le panier au-dessus des éléments secondaires, et navigation de retour en haut de page pour les pages longues.","Guide complet pour optimiser l'UX d'une boutique PrestaShop : menu déroulant avec compteur de produits (requête SQL optimisée), scroll infini maîtrisé via bouton de chargement, header sticky en CSS moderne, et checklist UX complète avant mise en production.",7,"2026-03-21T13:13:12.000Z",[],"Testez mon site ! :)",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"items":143},[144,153,159,165,173,181,187,193],{"id":145,"type":146,"label":147,"href":123,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":150,"children":151,"psChildren":152},41,"link",{"fr":148},"Expertise",null,0,[],[],{"id":154,"type":146,"label":155,"href":114,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":156,"children":157,"psChildren":158},42,{"fr":113},1,[],[],{"id":160,"type":146,"label":161,"href":75,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":162,"children":163,"psChildren":164},43,{"fr":74},2,[],[],{"id":166,"type":146,"label":167,"href":169,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":170,"children":171,"psChildren":172},44,{"fr":168},"Outils IA","\u002Foutils-ia",3,[],[],{"id":174,"type":146,"label":175,"href":68,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":177,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":178,"children":179,"psChildren":180},45,{"fr":176},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":182,"type":146,"label":183,"href":117,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":184,"children":185,"psChildren":186},46,{"fr":116},5,[],[],{"id":188,"type":146,"label":189,"href":135,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":190,"children":191,"psChildren":192},47,{"fr":131},6,[],[],{"id":194,"type":146,"label":195,"href":141,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":57,"children":196,"psChildren":197},48,{"fr":140},[],[],{"academy":199,"blog":200,"expertise":211},[],[201,205,208],{"title":202,"url":203,"score":156,"type":204},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":206,"url":207,"score":156,"type":204},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":209,"url":210,"score":156,"type":204},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":213},{"theme":214,"description":149,"hours":149,"logo":215,"contact":218,"social":219,"bottomBar":229},"dark",{"src":216,"href":217,"alt":134},"\u002Flogo-ac.svg","\u002F",{"email":149,"phone":149,"address":149,"cta":149},[220,223,226],{"platform":221,"href":222,"label":221},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":224,"href":225,"label":224},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":227,"href":228,"label":227},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":149},{"header":231},{"logo":232,"topBar":235,"contactEmail":238,"features":239,"navBar":149},{"src":216,"alt":233,"text":134,"href":217,"class":234},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":149,"showLanguages":69,"align":236,"languages":237},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":240},"inline"]