Résoudre le problème d'ajout au panier sur PrestaShop 1.7 et 8.x

Quand le bouton « Ajouter au panier » ne répond plus

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.

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.

Comprendre le mécanisme d'ajout au panier

Sur PrestaShop 1.7 et 8.x, l'ajout au panier repose sur un workflow JavaScript précis :

1. Le clic sur le bouton déclenche un événement capté par le fichier `core.js` du thème
2. Une requête AJAX est envoyée vers le contrôleur `CartController` via l'URL `/panier` (ou `/cart` selon la langue)
3. Le serveur traite la demande et renvoie un fragment HTML actualisé du panier
4. Le JavaScript met à jour le DOM : compteur d'articles, contenu du panier modal, prix total

Si n'importe quelle étape JavaScript échoue avant l'envoi de la requête AJAX, le bouton semble mort. L'erreur est souvent invisible pour l'utilisateur car elle se produit dans la console du navigateur.

Étape 1 : Diagnostiquer via la console navigateur

La première chose à faire est d'ouvrir les outils de développement du navigateur :

• **Chrome / Edge** : `F12` ou `Ctrl + Shift + I` → onglet **Console**
• **Firefox** : `F12` → onglet **Console**

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 :

Uncaught TypeError: Cannot read property 'xxx' of undefined
Uncaught ReferenceError: $ is not defined
jQuery is not defined

Ces messages pointent vers un conflit JavaScript, généralement causé par un module tiers ou une personnalisation du thème.

Étape 2 : Identifier un conflit de modules JavaScript

La cause numéro un des pannes d'ajout au panier est la cohabitation conflictuelle entre modules. 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.

Méthode de diagnostic par isolation

1. Accédez au **Back Office** → **Modules** → **Modules installés**
2. Désactivez temporairement tous les modules non essentiels (sliders, popups, modules marketing, avis clients)
3. Videz le cache PrestaShop : **Paramètres avancés** → **Performances** → **Vider le cache**
4. Testez l'ajout au panier
5. Si le problème disparaît, réactivez les modules **un par un** jusqu'à identifier le coupable

Cette méthode par élimination est la plus fiable. Elle permet d'identifier avec certitude le module responsable du conflit.

Étape 3 : Vérifier le fichier custom.js du thème

De nombreux thèmes PrestaShop incluent un fichier custom.js situé dans :

/themes/votre-theme/assets/js/custom.js

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.

Exemple concret : le piège du `preventDefault`

Un cas fréquent est un gestionnaire d'événement qui intercepte les clics de manière trop large :

// ❌ Problématique : bloque TOUS les formulaires, y compris l'ajout au panier
$(document).on('submit', 'form', function(e) {
    e.preventDefault();
    // traitement personnalisé...
    return true;  // Le return true ne suffit pas après preventDefault()
});

La correction consiste à cibler plus précisément les formulaires concernés, ou à modifier le paramètre de blocage :

// ✅ Corrigé : ne bloque que les formulaires spécifiques
$(document).on('submit', 'form.custom-form', function(e) {
    e.preventDefault();
    // traitement personnalisé...
});

Dans certains thèmes, un simple booléen contrôle le comportement AJAX du panier. Vérifiez si votre custom.js contient une variable de configuration de type ajaxCart: true et essayez de la passer à false pour tester si cela résout le problème.

Étape 4 : Purger intégralement les caches

Après toute modification JavaScript, il est impératif de vider tous les niveaux de cache :

Cache PrestaShop

# Suppression manuelle du cache Smarty et Symfony
rm -rf var/cache/prod/*
rm -rf var/cache/dev/*

Ou via le Back Office : Paramètres avancés → Performances → Vider le cache.

Cache navigateur

Le fichier JavaScript modifié est probablement mis en cache par le navigateur. Deux options :

• **Rechargement forcé** : `Ctrl + Shift + R` (Windows/Linux) ou `Cmd + Shift + R` (Mac)
• **Vider le cache** : Paramètres du navigateur → Effacer les données de navigation → Fichiers en cache

Astuce PrestaShop 8.x : forcer le rechargement des assets

Sur PrestaShop 8.x, activez l'option CCC (Combinaison, Compression et Cache) puis désactivez-la. Cela force la regénération des fichiers combinés :

Back Office → Paramètres avancés → Performances → CCC

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.

Étape 5 : Vérifications complémentaires

Conflit jQuery

PrestaShop embarque sa propre version de jQuery. Si un module ou le thème charge une seconde instance, les deux versions entrent en conflit :

<!-- ❌ Ne jamais charger jQuery une deuxième fois -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Vérifiez dans le code source de votre page (clic droit → Afficher le code source) que jQuery n'est chargé qu'une seule fois.

Token CSRF invalide

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 Réseau (Network) des outils de développement que la réponse du serveur n'est pas une erreur 403.

Attributs produit non sélectionnés

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.

Bonnes pratiques pour éviter les conflits JavaScript

1. **Testez chaque module individuellement** après installation, en vérifiant la console JS
2. **Désactivez le CCC pendant le développement** pour faciliter le debug
3. **Utilisez les hooks PrestaShop** plutôt que d'injecter du JS arbitraire dans `custom.js`
4. **Encapsulez vos scripts** dans des IIFE pour éviter la pollution du scope global :

(function() {
    'use strict';
    // Votre code ici — isolé du reste
})();

1. **Vérifiez la compatibilité** de vos modules avant chaque mise à jour de PrestaShop