Bouton panier et sélecteur de langue en panne sur PrestaShop : diagnostic complet

Introduction

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.

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.

Pourquoi ces deux fonctionnalités tombent souvent ensemble

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.

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.

Étape 1 : Identifier les erreurs JavaScript

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.

Ce qu'il faut chercher

• **Erreurs en rouge** dans l'onglet Console : elles indiquent un script qui plante
• **Fichiers 404** dans l'onglet Network : un fichier JS manquant empêche le chargement de toute la chaîne
• **Erreurs de syntaxe** : souvent causées par une concaténation mal configurée

// Exemple d'erreur typique dans la console
Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at theme.js:142

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.

Étape 2 : Vérifier l'intégrité des fichiers JavaScript du thème

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.

PrestaShop 1.7 / 8.x (thème basé sur Classic)

cd themes/votre-theme/_dev
npm install
npm run build

Si vous utilisez un thème acheté, vérifiez que le dossier assets/js/ contient bien les fichiers attendus. En cas de doute, réinstallez le thème via le back-office pour restaurer les fichiers d'origine.

PrestaShop 1.6

Les fichiers JavaScript sont directement dans themes/votre-theme/js/. Vérifiez que global.js et product.js sont présents et non corrompus :

ls -la themes/votre-theme/js/
md5sum themes/votre-theme/js/global.js

Comparez le hash MD5 avec celui du thème d'origine si possible.

Étape 3 : Diagnostiquer les conflits de modules

Les modules tiers injectent souvent leur propre JavaScript via les hooks displayHeader ou displayFooter. Un module mal codé peut facilement casser l'ensemble de la page.

Méthode d'isolation

1. Accédez au back-office → **Modules** → **Positions des modules**
2. Notez les modules accrochés sur `displayHeader` et `displayFooter`
3. Désactivez-les un par un en testant à chaque fois si le bouton panier et le sélecteur de langue fonctionnent à nouveau

Cette méthode par élimination est la plus fiable pour identifier le module fautif.

Vérification rapide via la base de données

SELECT m.name, h.name as hook_name
FROM ps_hook_module hm
JOIN ps_module m ON m.id_module = hm.id_module
JOIN ps_hook h ON h.id_hook = hm.id_hook
WHERE h.name IN ('displayHeader', 'displayFooter', 'actionFrontControllerSetMedia')
ORDER BY hm.position;

Cette requête liste tous les modules qui injectent des ressources dans le front-end.

Étape 4 : Vérifier le cache et la concaténation CCC

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.

Désactiver temporairement le CCC

1. **Back-office** → **Paramètres avancés** → **Performances**
2. Passez les options de concaténation CSS et JS sur **Non**
3. Videz le cache PrestaShop
4. Testez à nouveau

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.

# Purger manuellement le cache des assets combinés
rm -rf var/cache/prod/*
rm -rf var/cache/dev/*
# Sur PS 1.6 :
rm -rf cache/smarty/compile/*
rm -rf cache/smarty/cache/*

Étape 5 : Contrôler le sélecteur de langue spécifiquement

Le sélecteur de langue utilise un formulaire HTML qui soumet un changement d'id_lang. Sur PrestaShop 8.x, ce formulaire est géré par un composant JavaScript dédié.

Points de contrôle

• Le formulaire de changement de langue doit pointer vers le bon contrôleur
• L'attribut `action` du formulaire ne doit pas être vide
• Le token CSRF doit être présent (PrestaShop 8.x)

<!-- Structure attendue du sélecteur de langue (PS 8.x) -->
<div class="language-selector dropdown js-dropdown">
  <button class="btn-unstyle" data-toggle="dropdown">
    <span>Français</span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="https://votre-site.com/fr/" class="dropdown-item">
        Français
      </a>
    </li>
  </ul>
</div>

Vérifiez que les URLs générées dans le sélecteur sont correctes et ne contiennent pas de protocole mixte (HTTP/HTTPS).

Étape 6 : Vérifier le bouton d'ajout au panier

Le bouton d'ajout au panier déclenche une requête AJAX vers le contrôleur CartController. Plusieurs conditions doivent être réunies pour que cette mécanique fonctionne.

Checklist du bouton panier

// Sur PS 1.7/8.x, vérifier que prestashop.urls est bien défini
console.log(prestashop.urls);
// Doit afficher un objet contenant base_url, current_url, etc.

// Vérifier que l'objet produit est disponible
console.log(prestashop.product);
// Doit contenir id_product, id_product_attribute, etc.

Si prestashop.urls est undefined, 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.

Bonnes pratiques pour éviter ces pannes

1. Toujours tester en environnement de préproduction

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.

2. Utiliser un thème enfant

Les modifications directes du thème sont écrasées à chaque mise à jour. Un thème enfant protège vos personnalisations :

# config/theme.yml de votre thème enfant
parent: classic
name: mon-theme-enfant
display_name: Mon Thème Enfant
version: 1.0.0

3. Vérifier la compatibilité des modules

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.

4. Surveiller la console après chaque modification

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.

Quand faire appel à un développeur

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.