Pourquoi le widget Mondial Relay ne s'affiche pas sur ma boutique PrestaShop ?

Dans la majorité des cas, le widget ne s'affiche pas à cause d'une erreur JavaScript qui bloque son initialisation. Un script tiers (tracking, analytics, chat) chargé avant jQuery provoque une erreur qui empêche tous les scripts suivants de s'exécuter. Désactivez le CCC dans Paramètres avancés → Performance, puis consultez la console du navigateur (F12) pour identifier le script fautif.

Comment désactiver le CCC sur PrestaShop pour déboguer un problème JavaScript ?

Rendez-vous dans le back-office, menu Paramètres avancés → Performance. Dans la section CCC (Concaténation, Compression et Cache), passez toutes les options sur Non. Videz ensuite le cache PrestaShop. Cela permet de voir chaque fichier JavaScript individuellement dans la console du navigateur et d'identifier celui qui cause le conflit.

Quel est l'ordre correct de chargement des scripts JavaScript dans PrestaShop ?

jQuery doit toujours être chargé en premier, via le bloc Smarty {block name='javascript_bottom'} qui inclut javascript.tpl. Tous les scripts personnalisés (tracking, analytics, widgets tiers) doivent être placés après ce bloc. La méthode recommandée en PrestaShop 8.x est d'utiliser registerJavascript() dans un module avec une priorité élevée (1000) pour garantir un chargement en dernier.

Le module Mondial Relay fonctionne sur la page d'accueil mais pas au checkout, que faire ?

Certains thèmes utilisent un template de checkout personnalisé qui n'hérite pas du layout standard. Vérifiez que le fichier themes/votre-theme/templates/checkout/checkout.tpl inclut bien le bloc javascript_bottom avec l'import de javascript.tpl. Sans cette inclusion, jQuery n'est pas chargé sur les pages du tunnel de commande.

Comment intégrer proprement un script de tracking sans casser Mondial Relay ?

Utilisez le hook actionFrontControllerSetMedia dans un module PrestaShop plutôt que d'insérer le script directement dans les templates. Avec registerJavascript() et une priorité haute (1000), PrestaShop gère automatiquement l'ordre de chargement. Si vous devez absolument insérer du code inline, encapsulez-le dans un addEventListener('DOMContentLoaded') avec une vérification typeof jQuery !== 'undefined'.

Mondial Relay PrestaShop : résoudre les conflits JavaScript du module

Le problème : Mondial Relay refuse de s'afficher au checkout

Vous avez installé le module Mondial Relay sur votre boutique PrestaShop, la configuration semble correcte, mais au moment du choix du transporteur, le widget de sélection de point relais ne s'affiche tout simplement pas. Aucune erreur côté serveur, aucun message dans le back-office — tout a l'air normal, et pourtant rien ne fonctionne côté client.

Dans la grande majorité des cas, ce dysfonctionnement est causé par un conflit JavaScript. Le module Mondial Relay dépend de jQuery pour fonctionner. Si un script tiers (tracking, statistiques, chat en ligne) se charge avant jQuery et provoque une erreur, toute la chaîne d'exécution JavaScript est interrompue — et Mondial Relay ne s'initialise jamais.

Étape 1 : désactiver le CCC pour isoler le problème

La première chose à faire est de désactiver la concaténation et la minification des assets JavaScript. Quand le CCC est actif, tous vos scripts sont fusionnés en un seul fichier, ce qui rend le débogage quasi impossible.

Chemin : Back-office → Paramètres avancés → Performance → CCC (Concaténation, Compression et mise en Cache)

Passez les trois options sur Non :

Concaténer les fichiers CSS : Non
Concaténer les fichiers JavaScript : Non
Minifier les fichiers : Non

Important : n'oubliez pas de vider le cache PrestaShop après cette modification. En PrestaShop 8.x, utilisez également php bin/console cache:clear si vous êtes en mode debug.

Une fois le CCC désactivé, chaque fichier JavaScript se charge individuellement dans le navigateur. Vous pouvez alors identifier précisément quel script provoque l'erreur.

Étape 2 : inspecter la console JavaScript du navigateur

Ouvrez votre site sur la page checkout, puis lancez la console développeur (F12 → onglet Console). Rechargez la page et observez les erreurs.

Les erreurs typiques que vous verrez dans ce scénario :


Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined
Uncaught TypeError: $.ajax is not a function

Ces messages signifient qu'un script tente d'utiliser jQuery avant que la bibliothèque ne soit chargée. Identifiez le fichier source de l'erreur : c'est généralement un script de statistiques, un pixel de tracking ou un widget tiers injecté dans le mauvais template.

Étape 3 : auditer l'ordre de chargement des scripts

Le problème vient presque toujours de l'ordre d'inclusion des scripts dans vos templates. Voici les fichiers à vérifier dans votre thème actif :

FichierRôleChemin `javascript.tpl`Inclusion des JS globaux`themes/votre-theme/templates/_partials/javascript.tpl` `footer.tpl`Pied de page (souvent scripts tracking)`themes/votre-theme/templates/_partials/footer.tpl` `checkout.tpl`Template du tunnel de commande`themes/votre-theme/templates/checkout/checkout.tpl` `layout-both-columns.tpl`Layout principal`themes/votre-theme/templates/layouts/layout-both-columns.tpl`

La règle d'or

jQuery doit toujours être chargé avant tout script qui en dépend. Dans PrestaShop 1.7 et 8.x, jQuery est normalement inclus via le fichier javascript.tpl avec le bloc Smarty {block name='javascript_bottom'}. Tout script personnalisé doit être ajouté après ce bloc, jamais avant.

Étape 4 : corriger le placement du script fautif

Une fois le script problématique identifié (souvent un tag Google Analytics, Matomo, ou un pixel Facebook mal intégré), déplacez-le après l'inclusion de jQuery.

Exemple de code incorrect


{* footer.tpl — MAUVAIS : le script analytics se charge avant jQuery *}
<script>
  (function() {
    // Code de tracking qui utilise $ ou jQuery
    $.ajax({ url: '/tracking', method: 'POST' });
  })();
</script>

{block name='javascript_bottom'}
  {include file="_partials/javascript.tpl"}
{/block}

Exemple de code corrigé


{* footer.tpl — CORRECT : jQuery est chargé en premier *}
{block name='javascript_bottom'}
  {include file="_partials/javascript.tpl"}
{/block}

<script>
  (function() {
    // Le tracking se charge après jQuery — plus de conflit
    $.ajax({ url: '/tracking', method: 'POST' });
  })();
</script>

Méthode recommandée en PrestaShop 8.x

Plutôt que d'insérer vos scripts directement dans les templates, utilisez le hook actionFrontControllerSetMedia dans un module :


public function hookActionFrontControllerSetMedia()
{
    $this->context->controller->registerJavascript(
        'module-mon-tracking',
        'modules/mon_module/views/js/tracking.js',
        [
            'position' => 'bottom',
            'priority' => 1000, // Priorité haute = chargé en dernier
        ]
    );
}

Cette approche est nettement plus propre : PrestaShop gère l'ordre de chargement automatiquement, et le CCC fonctionnera correctement quand vous le réactiverez.

Étape 5 : vérifier le fonctionnement de Mondial Relay

Après correction, testez le tunnel de commande complet :

Ajoutez un produit au panier
Allez jusqu'à l'étape de livraison
Sélectionnez Mondial Relay comme transporteur
Vérifiez que le widget de sélection de point relais s'affiche
Sélectionnez un point relais et validez la commande

Si le widget fonctionne, vous pouvez réactiver le CCC progressivement :

Activez d'abord la concaténation CSS seule
Puis la concaténation JS
Testez après chaque activation

Bonnes pratiques pour éviter les conflits JavaScript

1. Ne jamais modifier les templates core

Travaillez toujours dans un thème enfant. Si vous modifiez directement les templates du thème parent, une mise à jour écrasera vos corrections.

2. Utiliser les hooks plutôt que les insertions manuelles

Les hooks displayHeader, displayFooterBefore et actionFrontControllerSetMedia sont faits pour ça. Ils garantissent un ordre de chargement cohérent.

3. Encapsuler vos scripts avec DOMContentLoaded

Si vous ne pouvez pas contrôler l'ordre de chargement, protégez vos scripts :


document.addEventListener('DOMContentLoaded', function() {
  if (typeof jQuery !== 'undefined') {
    // Votre code ici
  }
});

4. Vérifier la compatibilité après chaque mise à jour de module

Les mises à jour de Mondial Relay ou de votre thème peuvent modifier l'ordre de chargement des scripts. Testez systématiquement le tunnel de commande après toute mise à jour.

Cas particulier : thème avec checkout personnalisé

Certains thèmes remplacent entièrement la structure du checkout PrestaShop. Dans ce cas, le template checkout.tpl n'hérite plus du layout standard et peut avoir sa propre logique d'inclusion JavaScript.

Vérifiez que votre checkout.tpl personnalisé contient bien :


{block name='javascript_bottom'}
  {include file="_partials/javascript.tpl"}
{/block}

Sans ce bloc, jQuery n'est tout simplement pas chargé dans le tunnel de commande, et aucun module JavaScript ne fonctionnera — pas seulement Mondial Relay.