[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fqTBnjE8pRT_MSGwjKZ-y84hxk00TgBUxcRXTKBvfkt8":22,"megamenu":59,"$fdHCrMMOKbzec8NTGVFqEEbzv53cGd6Kpb_uhVbb8Hjw":128,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":142,"header-db":210,"footer-db":223},{"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":33,"psVersions":34,"content":37,"faq":38,"tldr":54,"readingTime":55,"generatedAt":56,"publishDate":56,"relatedArticles":57,"sourceCategory":58},"Résoudre le problème d'ajout au panier sur PrestaShop 1.7 et 8.x","probleme-ajout-panier-prestashop-diagnostic-correction","Votre bouton Ajouter au panier ne fonctionne plus sur PrestaShop ? Découvrez les causes courantes (conflit JS, cache, modules) et les solutions pas à pas.","debug",[28,29,30,31,32],"ajout panier","conflit javascript","debug prestashop","custom.js","cache prestashop","intermediaire",[35,36],"1.7","8.x","\u003Ch2>Quand le bouton « Ajouter au panier » ne répond plus\u003C\u002Fh2>\n\u003Cp>Un clic sur le bouton d'ajout au panier qui ne produit aucun effet — ni animation, ni mise à jour du compteur — est l'un des bugs les plus fréquents et les plus frustrants sur PrestaShop. Le panier semble figé, aucune erreur visible ne s'affiche côté client, et pourtant rien ne se passe.\u003C\u002Fp>\n\u003Cp>Ce dysfonctionnement est presque toujours lié à une erreur JavaScript qui bloque silencieusement le mécanisme AJAX d'ajout au panier. Voyons comment identifier la cause exacte et la corriger méthodiquement.\u003C\u002Fp>\n\u003Ch2>Comprendre le mécanisme d'ajout au panier\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.7 et 8.x, l'ajout au panier repose sur un workflow JavaScript précis :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Le clic sur le bouton déclenche un événement capté par le fichier `core.js` du thème\u003C\u002Fli>\n\u003Cli>Une requête AJAX est envoyée vers le contrôleur `CartController` via l'URL `\u002Fpanier` (ou `\u002Fcart` selon la langue)\u003C\u002Fli>\n\u003Cli>Le serveur traite la demande et renvoie un fragment HTML actualisé du panier\u003C\u002Fli>\n\u003Cli>Le JavaScript met à jour le DOM : compteur d'articles, contenu du panier modal, prix total\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si \u003Cstrong>n'importe quelle étape JavaScript échoue avant l'envoi de la requête AJAX\u003C\u002Fstrong>, le bouton semble mort. L'erreur est souvent invisible pour l'utilisateur car elle se produit dans la console du navigateur.\u003C\u002Fp>\n\u003Ch2>Étape 1 : Diagnostiquer via la console navigateur\u003C\u002Fh2>\n\u003Cp>La première chose à faire est d'ouvrir les outils de développement du navigateur :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Chrome \u002F Edge** : `F12` ou `Ctrl + Shift + I` → onglet **Console**\u003C\u002Fli>\n\u003Cli>**Firefox** : `F12` → onglet **Console**\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Rechargez la page produit et tentez l'ajout au panier. Toute erreur JavaScript apparaîtra en rouge dans la console. Les erreurs les plus courantes :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nUncaught TypeError: Cannot read property 'xxx' of undefined\nUncaught ReferenceError: $ is not defined\njQuery is not defined\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ces messages pointent vers un conflit JavaScript, généralement causé par un module tiers ou une personnalisation du thème.\u003C\u002Fp>\n\u003Ch2>Étape 2 : Identifier un conflit de modules JavaScript\u003C\u002Fh2>\n\u003Cp>La cause numéro un des pannes d'ajout au panier est la \u003Cstrong>cohabitation conflictuelle entre modules\u003C\u002Fstrong>. Chaque module peut injecter son propre JavaScript, et il suffit qu'un seul script lève une exception non interceptée pour bloquer l'exécution de tous les scripts suivants — y compris celui qui gère le panier.\u003C\u002Fp>\n\u003Ch3>Méthode de diagnostic par isolation\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Accédez au **Back Office** → **Modules** → **Modules installés**\u003C\u002Fli>\n\u003Cli>Désactivez temporairement tous les modules non essentiels (sliders, popups, modules marketing, avis clients)\u003C\u002Fli>\n\u003Cli>Videz le cache PrestaShop : **Paramètres avancés** → **Performances** → **Vider le cache**\u003C\u002Fli>\n\u003Cli>Testez l'ajout au panier\u003C\u002Fli>\n\u003Cli>Si le problème disparaît, réactivez les modules **un par un** jusqu'à identifier le coupable\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cette méthode par élimination est la plus fiable. Elle permet d'identifier avec certitude le module responsable du conflit.\u003C\u002Fp>\n\u003Ch2>Étape 3 : Vérifier le fichier custom.js du thème\u003C\u002Fh2>\n\u003Cp>De nombreux thèmes PrestaShop incluent un fichier \u003Ccode>custom.js\u003C\u002Fcode> situé dans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fvotre-theme\u002Fassets\u002Fjs\u002Fcustom.js\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ce fichier contient souvent des personnalisations JavaScript ajoutées par le développeur du thème ou par l'intégrateur. Un paramètre mal configuré dans ce fichier peut bloquer le comportement natif du panier.\u003C\u002Fp>\n\u003Ch3>Exemple concret : le piège du `preventDefault`\u003C\u002Fh3>\n\u003Cp>Un cas fréquent est un gestionnaire d'événement qui intercepte les clics de manière trop large :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F ❌ Problématique : bloque TOUS les formulaires, y compris l'ajout au panier\n$(document).on('submit', 'form', function(e) {\n    e.preventDefault();\n    \u002F\u002F traitement personnalisé...\n    return true;  \u002F\u002F Le return true ne suffit pas après preventDefault()\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La correction consiste à cibler plus précisément les formulaires concernés, ou à modifier le paramètre de blocage :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F ✅ Corrigé : ne bloque que les formulaires spécifiques\n$(document).on('submit', 'form.custom-form', function(e) {\n    e.preventDefault();\n    \u002F\u002F traitement personnalisé...\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Dans certains thèmes, un simple booléen contrôle le comportement AJAX du panier. Vérifiez si votre \u003Ccode>custom.js\u003C\u002Fcode> contient une variable de configuration de type \u003Ccode>ajaxCart: true\u003C\u002Fcode> et essayez de la passer à \u003Ccode>false\u003C\u002Fcode> pour tester si cela résout le problème.\u003C\u002Fp>\n\u003Ch2>Étape 4 : Purger intégralement les caches\u003C\u002Fh2>\n\u003Cp>Après toute modification JavaScript, il est impératif de vider \u003Cstrong>tous\u003C\u002Fstrong> les niveaux de cache :\u003C\u002Fp>\n\u003Ch3>Cache PrestaShop\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\">\n# Suppression manuelle du cache Smarty et Symfony\nrm -rf var\u002Fcache\u002Fprod\u002F*\nrm -rf var\u002Fcache\u002Fdev\u002F*\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ou via le Back Office : \u003Cstrong>Paramètres avancés\u003C\u002Fstrong> → \u003Cstrong>Performances\u003C\u002Fstrong> → \u003Cstrong>Vider le cache\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ch3>Cache navigateur\u003C\u002Fh3>\n\u003Cp>Le fichier JavaScript modifié est probablement mis en cache par le navigateur. Deux options :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Rechargement forcé** : `Ctrl + Shift + R` (Windows\u002FLinux) ou `Cmd + Shift + R` (Mac)\u003C\u002Fli>\n\u003Cli>**Vider le cache** : Paramètres du navigateur → Effacer les données de navigation → Fichiers en cache\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Astuce PrestaShop 8.x : forcer le rechargement des assets\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, activez l'option \u003Cstrong>CCC\u003C\u002Fstrong> (Combinaison, Compression et Cache) puis désactivez-la. Cela force la regénération des fichiers combinés :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nBack Office → Paramètres avancés → Performances → CCC\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Désactiver le CCC pendant le debug est d'ailleurs une bonne pratique : il permet de voir exactement quel fichier JS pose problème dans la console.\u003C\u002Fp>\n\u003Ch2>Étape 5 : Vérifications complémentaires\u003C\u002Fh2>\n\u003Ch3>Conflit jQuery\u003C\u002Fh3>\n\u003Cp>PrestaShop embarque sa propre version de jQuery. Si un module ou le thème charge une seconde instance, les deux versions entrent en conflit :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- ❌ Ne jamais charger jQuery une deuxième fois -->\n<script src=\"https:\u002F\u002Fcode.jquery.com\u002Fjquery-3.6.0.min.js\"><\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Vérifiez dans le code source de votre page (clic droit → Afficher le code source) que jQuery n'est chargé qu'une seule fois.\u003C\u002Fp>\n\u003Ch3>Token CSRF invalide\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, le token de sécurité peut expirer si la page reste ouverte longtemps. Dans ce cas, la requête AJAX est rejetée côté serveur. Vérifiez dans l'onglet \u003Cstrong>Réseau\u003C\u002Fstrong> (Network) des outils de développement que la réponse du serveur n'est pas une erreur 403.\u003C\u002Fp>\n\u003Ch3>Attributs produit non sélectionnés\u003C\u002Fh3>\n\u003Cp>Sur les produits avec déclinaisons, le bouton d'ajout au panier reste intentionnellement inactif tant que toutes les déclinaisons obligatoires ne sont pas sélectionnées. Assurez-vous que ce n'est pas simplement le comportement normal de PrestaShop.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour éviter les conflits JavaScript\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Testez chaque module individuellement** après installation, en vérifiant la console JS\u003C\u002Fli>\n\u003Cli>**Désactivez le CCC pendant le développement** pour faciliter le debug\u003C\u002Fli>\n\u003Cli>**Utilisez les hooks PrestaShop** plutôt que d'injecter du JS arbitraire dans `custom.js`\u003C\u002Fli>\n\u003Cli>**Encapsulez vos scripts** dans des IIFE pour éviter la pollution du scope global :\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n(function() {\n    'use strict';\n    \u002F\u002F Votre code ici — isolé du reste\n})();\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Col>\n\u003Cli>**Vérifiez la compatibilité** de vos modules avant chaque mise à jour de PrestaShop\u003C\u002Fli>\n\u003C\u002Ful>",[39,42,45,48,51],{"q":40,"a":41},"Pourquoi le bouton Ajouter au panier ne fonctionne pas sur PrestaShop ?","Dans la grande majorité des cas, un conflit JavaScript empêche le script d'ajout au panier de s'exécuter. Ce conflit provient soit d'un module tiers qui injecte un script défaillant, soit d'une personnalisation dans le fichier custom.js du thème. Ouvrez la console navigateur (F12) pour identifier l'erreur exacte, puis désactivez vos modules un par un pour isoler le coupable.",{"q":43,"a":44},"Comment vider le cache JavaScript sur PrestaShop après une correction ?","Trois niveaux de cache doivent être purgés : le cache PrestaShop (Back Office → Paramètres avancés → Performances → Vider le cache), le cache navigateur (Ctrl+Shift+R pour un rechargement forcé), et éventuellement le CCC si activé (désactivez-le puis réactivez-le pour forcer la regénération des fichiers combinés).",{"q":46,"a":47},"Comment détecter un conflit entre modules PrestaShop ?","La méthode la plus fiable est le diagnostic par isolation : désactivez tous les modules non essentiels, vérifiez que le problème disparaît, puis réactivez-les un par un en testant à chaque étape. La console JavaScript du navigateur (F12 → Console) affichera l'erreur exacte et le fichier source responsable du conflit.",{"q":49,"a":50},"Le bouton Ajouter au panier est grisé sur une fiche produit, que faire ?","Si le produit possède des déclinaisons (taille, couleur...), le bouton reste volontairement inactif tant que toutes les options obligatoires ne sont pas sélectionnées. Vérifiez également que le produit est en stock et que la quantité minimale de commande est respectée. Si le bouton reste grisé malgré tout, il s'agit probablement d'un bug JavaScript à diagnostiquer via la console.",{"q":52,"a":53},"PrestaShop 8 est-il concerné par les mêmes bugs d'ajout au panier que la version 1.7 ?","Oui, le mécanisme d'ajout au panier en AJAX est architecturalement identique entre PrestaShop 1.7 et 8.x. Les mêmes types de conflits JavaScript peuvent survenir. La différence principale est que PrestaShop 8.x utilise Symfony 6 et un système de tokens CSRF plus strict, ce qui peut ajouter une cause supplémentaire d'échec si le token expire après une longue période d'inactivité sur la page.","Un bouton « Ajouter au panier » inopérant sur PrestaShop est presque toujours causé par un conflit JavaScript entre modules ou dans le fichier custom.js du thème. Le diagnostic passe par la console navigateur, l'isolation des modules et la purge complète des caches (PrestaShop + navigateur).",6,"2026-03-21T15:50:40.000Z",[],"Rapports de bugs",{"items":60},[61,72,80,88,96,105,113,120],{"id":62,"type":63,"label":64,"href":66,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":69,"children":70,"psChildren":71},41,"link",{"fr":65},"Expertise","\u002Fexpertise",null,false,0,[],[],{"id":73,"type":63,"label":74,"href":76,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":77,"children":78,"psChildren":79},42,{"fr":75},"Blog","\u002Fblog",1,[],[],{"id":81,"type":63,"label":82,"href":84,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":85,"children":86,"psChildren":87},43,{"fr":83},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":89,"type":63,"label":90,"href":92,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":93,"children":94,"psChildren":95},44,{"fr":91},"Outils IA","\u002Foutils-ia",3,[],[],{"id":97,"type":63,"label":98,"href":100,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":101,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":102,"children":103,"psChildren":104},45,{"fr":99},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":106,"type":63,"label":107,"href":109,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":110,"children":111,"psChildren":112},46,{"fr":108},"Academy","\u002Facademy",5,[],[],{"id":114,"type":63,"label":115,"href":117,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":55,"children":118,"psChildren":119},47,{"fr":116},"À propos","\u002Fa-propos",[],[],{"id":121,"type":63,"label":122,"href":124,"icon":67,"description":67,"badge":67,"groupTitle":67,"style":67,"gridColumns":67,"cssClass":67,"psCategoryId":67,"showPsChildren":68,"position":125,"children":126,"psChildren":127},48,{"fr":123},"Contact","\u002Fcontact",7,[],[],{"academy":129,"blog":130,"expertise":141},[],[131,135,138],{"title":132,"url":133,"score":77,"type":134},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":136,"url":137,"score":77,"type":134},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":139,"url":140,"score":77,"type":134},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"columns":143},[144,156,186,202],{"title":145,"links":146},"Plateforme",[147,149,152,153],{"label":148,"href":100,"external":68},"Offre Starter (2 500 €)",{"label":150,"href":151,"external":68},"Devenir Ambassadeur","\u002Fambassadeur",{"label":83,"href":84,"external":68},{"label":154,"href":155,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":157,"links":158},"Le Synedre",[159,162,165,168,171,174,177,180,183],{"label":160,"href":161,"external":68},"L'histoire","\u002Fsynedre",{"label":163,"href":164,"external":68},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":166,"href":167,"external":68},"L'équipe","\u002Fequipe",{"label":169,"href":170,"external":68},"Le réacteur en direct","\u002Freacteur",{"label":172,"href":173,"external":68},"Le Drill (entraînement)","\u002Fdrill",{"label":175,"href":176,"external":68},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":178,"href":179,"external":68},"Les agents IA","\u002Fagents-ia",{"label":181,"href":182,"external":68},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":184,"href":185,"external":68},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":187,"links":188},"Ressources",[189,190,191,194,196,199],{"label":75,"href":76,"external":68},{"label":108,"href":109,"external":68},{"label":192,"href":193,"external":68},"Dictionnaire","\u002Fdictionnaire",{"label":195,"href":66,"external":68},"Expertise PrestaShop",{"label":197,"href":198,"external":68},"Flywheel","\u002Fflywheel",{"label":200,"href":201,"external":68},"Manifeste","\u002Fmanifeste",{"title":116,"links":203},[204,206,209],{"label":205,"href":117,"external":68},"Alexandre Carette",{"label":207,"href":208,"external":68},"Dossier de presse","\u002Fpresse",{"label":123,"href":124,"external":68},{"header":211},{"logo":212,"topBar":217,"contactEmail":220,"features":221,"navBar":67},{"src":213,"alt":214,"text":205,"href":215,"class":216},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":67,"showLanguages":68,"align":218,"languages":219},"left",[],"contact@alexandrecarette.fr",{"showSearch":68,"showWishlist":68,"showLogin":20,"showContact":68,"showCart":68,"stickyHeader":20,"headerLayout":222},"inline",{"footer":224},{"theme":225,"description":67,"hours":67,"logo":226,"contact":227,"social":228,"bottomBar":238},"dark",{"src":213,"href":215,"alt":205},{"email":67,"phone":67,"address":67,"cta":67},[229,232,235],{"platform":230,"href":231,"label":230},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":233,"href":234,"label":233},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":236,"href":237,"label":236},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":67}]