[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fjvsgjlbvFuw9mlQiGrF2_9VQBXpeKJUMBEbOf0nR_P8":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":59,"megamenu":140,"footer-db":196,"header-db":214,"$f_89tKk7OoX9V3NTN78n69N18YZdf9jidV6EcXgsosnI":225},{"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":32,"psVersions":33,"content":37,"faq":38,"tldr":54,"readingTime":55,"generatedAt":56,"publishDate":56,"relatedArticles":57,"sourceCategory":58},"Bouton panier et sélecteur de langue en panne sur PrestaShop : diagnostic complet","bouton-panier-selecteur-langue-ne-fonctionne-plus-prestashop","Votre bouton d'ajout au panier ou le sélecteur de langue ne fonctionne plus sur PrestaShop ? Diagnostic méthodique, causes fréquentes et solutions testées.","debug",[28,29,30,26,31],"bouton panier","sélecteur langue","javascript","thème PrestaShop","intermediaire",[34,35,36],"1.6","1.7","8.x","\u003Ch2>Introduction\u003C\u002Fh2>\n\u003Cp>Un bouton d'ajout au panier inopérant ou un sélecteur de langue qui ne répond plus font partie des dysfonctionnements les plus fréquents — et les plus frustrants — sur PrestaShop. Ces deux éléments partagent souvent une cause commune : un problème JavaScript côté front-end qui empêche l'exécution normale des interactions utilisateur.\u003C\u002Fp>\n\u003Cp>Ce type de panne survient généralement après une mise à jour de thème, l'installation d'un module tiers ou une modification manuelle du code. Voyons comment diagnostiquer et corriger le problème de manière méthodique.\u003C\u002Fp>\n\u003Ch2>Pourquoi ces deux fonctionnalités tombent souvent ensemble\u003C\u002Fh2>\n\u003Cp>Le bouton d'ajout au panier et le sélecteur de langue reposent tous deux sur des appels JavaScript (AJAX pour le panier, rechargement ou redirection pour la langue). Lorsqu'une erreur JavaScript bloque l'exécution globale du script, toutes les interactions dynamiques de la page cessent de fonctionner simultanément.\u003C\u002Fp>\n\u003Cp>C'est pourquoi il est fréquent de constater que ces deux éléments tombent en panne en même temps, alors qu'ils n'ont techniquement rien en commun dans le code source.\u003C\u002Fp>\n\u003Ch2>Étape 1 : Identifier les erreurs JavaScript\u003C\u002Fh2>\n\u003Cp>La toute première action à mener est d'ouvrir la console développeur de votre navigateur (F12 ou Ctrl+Maj+J sur Chrome) et de recharger la page concernée.\u003C\u002Fp>\n\u003Ch3>Ce qu'il faut chercher\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Erreurs en rouge** dans l'onglet Console : elles indiquent un script qui plante\u003C\u002Fli>\n\u003Cli>**Fichiers 404** dans l'onglet Network : un fichier JS manquant empêche le chargement de toute la chaîne\u003C\u002Fli>\n\u003Cli>**Erreurs de syntaxe** : souvent causées par une concaténation mal configurée\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F Exemple d'erreur typique dans la console\nUncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')\n    at theme.js:142\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette erreur signifie qu'un élément DOM attendu par le script n'existe pas au moment de l'exécution — signe classique d'un conflit entre le thème et un module.\u003C\u002Fp>\n\u003Ch2>Étape 2 : Vérifier l'intégrité des fichiers JavaScript du thème\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.7 et 8.x, le fichier JavaScript principal du thème est généré par Webpack. Une recompilation peut résoudre de nombreux problèmes.\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.7 \u002F 8.x (thème basé sur Classic)\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\">\ncd themes\u002Fvotre-theme\u002F_dev\nnpm install\nnpm run build\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si vous utilisez un thème acheté, vérifiez que le dossier \u003Ccode>assets\u002Fjs\u002F\u003C\u002Fcode> contient bien les fichiers attendus. En cas de doute, réinstallez le thème via le back-office pour restaurer les fichiers d'origine.\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.6\u003C\u002Fh3>\n\u003Cp>Les fichiers JavaScript sont directement dans \u003Ccode>themes\u002Fvotre-theme\u002Fjs\u002F\u003C\u002Fcode>. Vérifiez que \u003Ccode>global.js\u003C\u002Fcode> et \u003Ccode>product.js\u003C\u002Fcode> sont présents et non corrompus :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\nls -la themes\u002Fvotre-theme\u002Fjs\u002F\nmd5sum themes\u002Fvotre-theme\u002Fjs\u002Fglobal.js\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Comparez le hash MD5 avec celui du thème d'origine si possible.\u003C\u002Fp>\n\u003Ch2>Étape 3 : Diagnostiquer les conflits de modules\u003C\u002Fh2>\n\u003Cp>Les modules tiers injectent souvent leur propre JavaScript via les hooks \u003Ccode>displayHeader\u003C\u002Fcode> ou \u003Ccode>displayFooter\u003C\u002Fcode>. Un module mal codé peut facilement casser l'ensemble de la page.\u003C\u002Fp>\n\u003Ch3>Méthode d'isolation\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Accédez au back-office → **Modules** → **Positions des modules**\u003C\u002Fli>\n\u003Cli>Notez les modules accrochés sur `displayHeader` et `displayFooter`\u003C\u002Fli>\n\u003Cli>Désactivez-les un par un en testant à chaque fois si le bouton panier et le sélecteur de langue fonctionnent à nouveau\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cette méthode par élimination est la plus fiable pour identifier le module fautif.\u003C\u002Fp>\n\u003Ch3>Vérification rapide via la base de données\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-sql\">\nSELECT m.name, h.name as hook_name\nFROM ps_hook_module hm\nJOIN ps_module m ON m.id_module = hm.id_module\nJOIN ps_hook h ON h.id_hook = hm.id_hook\nWHERE h.name IN ('displayHeader', 'displayFooter', 'actionFrontControllerSetMedia')\nORDER BY hm.position;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette requête liste tous les modules qui injectent des ressources dans le front-end.\u003C\u002Fp>\n\u003Ch2>Étape 4 : Vérifier le cache et la concaténation CCC\u003C\u002Fh2>\n\u003Cp>PrestaShop dispose d'un système de concaténation, compression et mise en cache des fichiers CSS et JS (CCC). Ce mécanisme peut parfois générer des fichiers combinés corrompus.\u003C\u002Fp>\n\u003Ch3>Désactiver temporairement le CCC\u003C\u002Fh3>\n\u003Col>\n\u003Cli>**Back-office** → **Paramètres avancés** → **Performances**\u003C\u002Fli>\n\u003Cli>Passez les options de concaténation CSS et JS sur **Non**\u003C\u002Fli>\n\u003Cli>Videz le cache PrestaShop\u003C\u002Fli>\n\u003Cli>Testez à nouveau\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si le problème disparaît avec le CCC désactivé, c'est qu'un des fichiers JS concaténés contient une erreur de syntaxe qui corrompt l'ensemble du bundle.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\n# Purger manuellement le cache des assets combinés\nrm -rf var\u002Fcache\u002Fprod\u002F*\nrm -rf var\u002Fcache\u002Fdev\u002F*\n# Sur PS 1.6 :\nrm -rf cache\u002Fsmarty\u002Fcompile\u002F*\nrm -rf cache\u002Fsmarty\u002Fcache\u002F*\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Étape 5 : Contrôler le sélecteur de langue spécifiquement\u003C\u002Fh2>\n\u003Cp>Le sélecteur de langue utilise un formulaire HTML qui soumet un changement d'\u003Ccode>id_lang\u003C\u002Fcode>. Sur PrestaShop 8.x, ce formulaire est géré par un composant JavaScript dédié.\u003C\u002Fp>\n\u003Ch3>Points de contrôle\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Le formulaire de changement de langue doit pointer vers le bon contrôleur\u003C\u002Fli>\n\u003Cli>L'attribut `action` du formulaire ne doit pas être vide\u003C\u002Fli>\n\u003Cli>Le token CSRF doit être présent (PrestaShop 8.x)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- Structure attendue du sélecteur de langue (PS 8.x) -->\n<div class=\"language-selector dropdown js-dropdown\">\n  <button class=\"btn-unstyle\" data-toggle=\"dropdown\">\n    <span>Français<\u002Fspan>\n  <\u002Fbutton>\n  <ul class=\"dropdown-menu\">\n    <li>\n      <a href=\"https:\u002F\u002Fvotre-site.com\u002Ffr\u002F\" class=\"dropdown-item\">\n        Français\n      <\u002Fa>\n    <\u002Fli>\n  <\u002Ful>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Vérifiez que les URLs générées dans le sélecteur sont correctes et ne contiennent pas de protocole mixte (HTTP\u002FHTTPS).\u003C\u002Fp>\n\u003Ch2>Étape 6 : Vérifier le bouton d'ajout au panier\u003C\u002Fh2>\n\u003Cp>Le bouton d'ajout au panier déclenche une requête AJAX vers le contrôleur \u003Ccode>CartController\u003C\u002Fcode>. Plusieurs conditions doivent être réunies pour que cette mécanique fonctionne.\u003C\u002Fp>\n\u003Ch3>Checklist du bouton panier\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F Sur PS 1.7\u002F8.x, vérifier que prestashop.urls est bien défini\nconsole.log(prestashop.urls);\n\u002F\u002F Doit afficher un objet contenant base_url, current_url, etc.\n\n\u002F\u002F Vérifier que l'objet produit est disponible\nconsole.log(prestashop.product);\n\u002F\u002F Doit contenir id_product, id_product_attribute, etc.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si \u003Ccode>prestashop.urls\u003C\u002Fcode> est \u003Ccode>undefined\u003C\u002Fcode>, c'est que le fichier JavaScript principal du thème ne charge pas correctement les variables globales — problème fréquent après une mise à jour partielle du thème.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour éviter ces pannes\u003C\u002Fh2>\n\u003Ch3>1. Toujours tester en environnement de préproduction\u003C\u002Fh3>\n\u003Cp>Avant d'installer un module ou de mettre à jour un thème, dupliquez votre boutique sur un environnement de test. Cela permet d'identifier les conflits JavaScript avant qu'ils n'affectent vos clients.\u003C\u002Fp>\n\u003Ch3>2. Utiliser un thème enfant\u003C\u002Fh3>\n\u003Cp>Les modifications directes du thème sont écrasées à chaque mise à jour. Un thème enfant protège vos personnalisations :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\n# config\u002Ftheme.yml de votre thème enfant\nparent: classic\nname: mon-theme-enfant\ndisplay_name: Mon Thème Enfant\nversion: 1.0.0\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>3. Vérifier la compatibilité des modules\u003C\u002Fh3>\n\u003Cp>Avant d'acheter un module, vérifiez qu'il est compatible avec votre version exacte de PrestaShop. Un module conçu pour la 1.6 peut provoquer des erreurs fatales sur la 8.x.\u003C\u002Fp>\n\u003Ch3>4. Surveiller la console après chaque modification\u003C\u002Fh3>\n\u003Cp>Prenez l'habitude d'ouvrir la console développeur après chaque changement en back-office. Une erreur JavaScript silencieuse aujourd'hui devient un bug critique demain.\u003C\u002Fp>\n\u003Ch2>Quand faire appel à un développeur\u003C\u002Fh2>\n\u003Cp>Si après ces vérifications le problème persiste, il est probable que la cause soit plus profonde : conflit dans les overrides, fichier core modifié ou incompatibilité structurelle entre modules. Dans ce cas, un audit technique du code source par un développeur spécialisé PrestaShop permettra d'identifier précisément l'origine du dysfonctionnement et de le corriger sans effets de bord.\u003C\u002Fp>",[39,42,45,48,51],{"q":40,"a":41},"Pourquoi mon bouton d'ajout au panier ne fonctionne plus après l'installation d'un module ?","Le module installé injecte probablement un fichier JavaScript qui contient une erreur ou qui entre en conflit avec le script principal du thème. Ouvrez la console développeur (F12) pour identifier l'erreur exacte, puis désactivez le module pour confirmer qu'il est bien en cause. Contactez l'éditeur du module avec le message d'erreur pour obtenir un correctif.",{"q":43,"a":44},"Comment diagnostiquer un sélecteur de langue qui ne répond plus sur PrestaShop ?","Commencez par vérifier la console JavaScript pour détecter d'éventuelles erreurs. Ensuite, inspectez le code HTML du sélecteur : les liens doivent contenir des URLs valides pour chaque langue active. Vérifiez également que toutes vos langues sont bien activées dans le back-office (International → Localisation → Langues) et que les URLs simplifiées sont correctement configurées.",{"q":46,"a":47},"Le CCC (concaténation CSS\u002FJS) peut-il casser mon bouton panier PrestaShop ?","Oui, c'est une cause fréquente. Le système CCC de PrestaShop fusionne tous les fichiers JavaScript en un seul. Si l'un de ces fichiers contient une erreur de syntaxe (point-virgule manquant, variable non déclarée), le fichier combiné entier devient inutilisable. Désactivez temporairement le CCC dans Paramètres avancés → Performances pour vérifier si c'est la cause du problème.",{"q":49,"a":50},"Bouton panier et langue cassés en même temps : est-ce une coïncidence ?","Non, ce n'est généralement pas une coïncidence. Ces deux éléments reposent sur JavaScript pour fonctionner. Lorsqu'un script plante en amont (erreur dans un module, fichier JS manquant, conflit jQuery), il bloque l'exécution de tous les scripts qui suivent dans la page. C'est pourquoi plusieurs fonctionnalités indépendantes cessent de fonctionner simultanément.",{"q":52,"a":53},"Comment vider complètement le cache JavaScript de PrestaShop 8 ?","Supprimez le contenu des dossiers var\u002Fcache\u002Fprod\u002F et var\u002Fcache\u002Fdev\u002F, puis videz le cache depuis le back-office (Paramètres avancés → Performances → Vider le cache). Pensez également à vider le cache de votre navigateur ou à tester en navigation privée, car les anciens fichiers JS peuvent être mis en cache localement pendant plusieurs heures.","Un bouton panier et un sélecteur de langue en panne simultanément signalent presque toujours un conflit JavaScript. Le diagnostic passe par la console développeur, la vérification du CCC, l'isolation des modules et le contrôle de l'intégrité des fichiers du thème.",6,"2026-03-21T16:18:48.000Z",[],"PrestaShop pour les développeurs",{"columns":60},[61,77,107,128],{"title":62,"links":63},"Plateforme",[64,68,71,74],{"label":65,"href":66,"external":67},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":69,"href":70,"external":67},"Devenir Ambassadeur","\u002Fambassadeur",{"label":72,"href":73,"external":67},"Modules PrestaShop","\u002Fmodules",{"label":75,"href":76,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":78,"links":79},"Le Synedre",[80,83,86,89,92,95,98,101,104],{"label":81,"href":82,"external":67},"L'histoire","\u002Fsynedre",{"label":84,"href":85,"external":67},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":87,"href":88,"external":67},"L'équipe","\u002Fequipe",{"label":90,"href":91,"external":67},"Le réacteur en direct","\u002Freacteur",{"label":93,"href":94,"external":67},"Le Drill (entraînement)","\u002Fdrill",{"label":96,"href":97,"external":67},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":99,"href":100,"external":67},"Les agents IA","\u002Fagents-ia",{"label":102,"href":103,"external":67},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":105,"href":106,"external":67},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":108,"links":109},"Ressources",[110,113,116,119,122,125],{"label":111,"href":112,"external":67},"Blog","\u002Fblog",{"label":114,"href":115,"external":67},"Academy","\u002Facademy",{"label":117,"href":118,"external":67},"Dictionnaire","\u002Fdictionnaire",{"label":120,"href":121,"external":67},"Expertise PrestaShop","\u002Fexpertise",{"label":123,"href":124,"external":67},"Flywheel","\u002Fflywheel",{"label":126,"href":127,"external":67},"Manifeste","\u002Fmanifeste",{"title":129,"links":130},"À propos",[131,134,137],{"label":132,"href":133,"external":67},"Alexandre Carette","\u002Fa-propos",{"label":135,"href":136,"external":67},"Dossier de presse","\u002Fpresse",{"label":138,"href":139,"external":67},"Contact","\u002Fcontact",{"items":141},[142,151,157,163,171,179,185,190],{"id":143,"type":144,"label":145,"href":121,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":148,"children":149,"psChildren":150},41,"link",{"fr":146},"Expertise",null,0,[],[],{"id":152,"type":144,"label":153,"href":112,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":154,"children":155,"psChildren":156},42,{"fr":111},1,[],[],{"id":158,"type":144,"label":159,"href":73,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":160,"children":161,"psChildren":162},43,{"fr":72},2,[],[],{"id":164,"type":144,"label":165,"href":167,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":168,"children":169,"psChildren":170},44,{"fr":166},"Outils IA","\u002Foutils-ia",3,[],[],{"id":172,"type":144,"label":173,"href":66,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":175,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":176,"children":177,"psChildren":178},45,{"fr":174},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":180,"type":144,"label":181,"href":115,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":182,"children":183,"psChildren":184},46,{"fr":114},5,[],[],{"id":186,"type":144,"label":187,"href":133,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":55,"children":188,"psChildren":189},47,{"fr":129},[],[],{"id":191,"type":144,"label":192,"href":139,"icon":147,"description":147,"badge":147,"groupTitle":147,"style":147,"gridColumns":147,"cssClass":147,"psCategoryId":147,"showPsChildren":67,"position":193,"children":194,"psChildren":195},48,{"fr":138},7,[],[],{"footer":197},{"theme":198,"description":147,"hours":147,"logo":199,"contact":202,"social":203,"bottomBar":213},"dark",{"src":200,"href":201,"alt":132},"\u002Flogo-ac.svg","\u002F",{"email":147,"phone":147,"address":147,"cta":147},[204,207,210],{"platform":205,"href":206,"label":205},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":208,"href":209,"label":208},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":211,"href":212,"label":211},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":147},{"header":215},{"logo":216,"topBar":219,"contactEmail":222,"features":223,"navBar":147},{"src":200,"alt":217,"text":132,"href":201,"class":218},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":147,"showLanguages":67,"align":220,"languages":221},"left",[],"contact@alexandrecarette.fr",{"showSearch":67,"showWishlist":67,"showLogin":20,"showContact":67,"showCart":67,"stickyHeader":20,"headerLayout":224},"inline",{"academy":226,"blog":227,"expertise":238},[],[228,232,235],{"title":229,"url":230,"score":154,"type":231},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":233,"url":234,"score":154,"type":231},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":236,"url":237,"score":154,"type":231},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]