[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fG6f5ndYFEK4caaXbUtuUOffXMJ3O-01CxJrDovTsWwo":22,"megamenu":60,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":129,"$fh9gjfEkqEHurC0u3bPTGsA05jLtepwLjloKaW8gNHuw":197,"header-db":211,"footer-db":224},{"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":34,"psVersions":35,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Mondial Relay PrestaShop : résoudre les conflits JavaScript du module","mondial-relay-prestashop-conflit-javascript-jquery","Module Mondial Relay qui ne fonctionne pas sur PrestaShop ? Découvrez comment diagnostiquer et corriger les erreurs JavaScript liées à jQuery et aux scripts tiers.","livraison",[28,29,30,31,32,33],"mondial relay","javascript","jquery","debug","transporteur","checkout","intermediaire",[36,37],"1.7","8.x","\u003Ch2>Le problème : Mondial Relay refuse de s'afficher au checkout\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Dans la grande majorité des cas, ce dysfonctionnement est causé par un \u003Cstrong>conflit JavaScript\u003C\u002Fstrong>. Le module Mondial Relay dépend de jQuery pour fonctionner. Si un script tiers (tracking, statistiques, chat en ligne) se charge \u003Cstrong>avant jQuery\u003C\u002Fstrong> et provoque une erreur, toute la chaîne d'exécution JavaScript est interrompue — et Mondial Relay ne s'initialise jamais.\u003C\u002Fp>\n\u003Ch2>Étape 1 : désactiver le CCC pour isoler le problème\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Chemin :\u003C\u002Fstrong> Back-office → Paramètres avancés → Performance → CCC (Concaténation, Compression et mise en Cache)\u003C\u002Fp>\n\u003Cp>Passez les trois options sur \u003Cstrong>Non\u003C\u002Fstrong> :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Concaténer les fichiers CSS : Non\u003C\u002Fli>\n\u003Cli>Concaténer les fichiers JavaScript : Non\u003C\u002Fli>\n\u003Cli>Minifier les fichiers : Non\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> n'oubliez pas de vider le cache PrestaShop après cette modification. En PrestaShop 8.x, utilisez également \u003Ccode>php bin\u002Fconsole cache:clear\u003C\u002Fcode> si vous êtes en mode debug.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>Étape 2 : inspecter la console JavaScript du navigateur\u003C\u002Fh2>\n\u003Cp>Ouvrez votre site sur la page checkout, puis lancez la console développeur (F12 → onglet Console). Rechargez la page et observez les erreurs.\u003C\u002Fp>\n\u003Cp>Les erreurs typiques que vous verrez dans ce scénario :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nUncaught ReferenceError: $ is not defined\nUncaught ReferenceError: jQuery is not defined\nUncaught TypeError: $.ajax is not a function\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ces messages signifient qu'un script tente d'utiliser jQuery \u003Cstrong>avant que la bibliothèque ne soit chargée\u003C\u002Fstrong>. 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.\u003C\u002Fp>\n\u003Ch2>Étape 3 : auditer l'ordre de chargement des scripts\u003C\u002Fh2>\n\u003Cp>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 :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Fichier\u003C\u002Fth>\u003Cth>Rôle\u003C\u002Fth>\u003Cth>Chemin\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`javascript.tpl`\u003C\u002Fth>\u003Cth>Inclusion des JS globaux\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Ftemplates\u002F_partials\u002Fjavascript.tpl`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`footer.tpl`\u003C\u002Fth>\u003Cth>Pied de page (souvent scripts tracking)\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Ftemplates\u002F_partials\u002Ffooter.tpl`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`checkout.tpl`\u003C\u002Fth>\u003Cth>Template du tunnel de commande\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Ftemplates\u002Fcheckout\u002Fcheckout.tpl`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`layout-both-columns.tpl`\u003C\u002Fth>\u003Cth>Layout principal\u003C\u002Fth>\u003Cth>`themes\u002Fvotre-theme\u002Ftemplates\u002Flayouts\u002Flayout-both-columns.tpl`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ch3>La règle d'or\u003C\u002Fh3>\n\u003Cp>jQuery doit \u003Cstrong>toujours\u003C\u002Fstrong> être chargé avant tout script qui en dépend. Dans PrestaShop 1.7 et 8.x, jQuery est normalement inclus via le fichier \u003Ccode>javascript.tpl\u003C\u002Fcode> avec le bloc Smarty \u003Ccode>{block name='javascript_bottom'}\u003C\u002Fcode>. Tout script personnalisé doit être ajouté \u003Cstrong>après\u003C\u002Fstrong> ce bloc, jamais avant.\u003C\u002Fp>\n\u003Ch2>Étape 4 : corriger le placement du script fautif\u003C\u002Fh2>\n\u003Cp>Une fois le script problématique identifié (souvent un tag Google Analytics, Matomo, ou un pixel Facebook mal intégré), déplacez-le \u003Cstrong>après\u003C\u002Fstrong> l'inclusion de jQuery.\u003C\u002Fp>\n\u003Ch3>Exemple de code incorrect\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* footer.tpl — MAUVAIS : le script analytics se charge avant jQuery *}\n<script>\n  (function() {\n    \u002F\u002F Code de tracking qui utilise $ ou jQuery\n    $.ajax({ url: '\u002Ftracking', method: 'POST' });\n  })();\n<\u002Fscript>\n\n{block name='javascript_bottom'}\n  {include file=\"_partials\u002Fjavascript.tpl\"}\n{\u002Fblock}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Exemple de code corrigé\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* footer.tpl — CORRECT : jQuery est chargé en premier *}\n{block name='javascript_bottom'}\n  {include file=\"_partials\u002Fjavascript.tpl\"}\n{\u002Fblock}\n\n<script>\n  (function() {\n    \u002F\u002F Le tracking se charge après jQuery — plus de conflit\n    $.ajax({ url: '\u002Ftracking', method: 'POST' });\n  })();\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Méthode recommandée en PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Plutôt que d'insérer vos scripts directement dans les templates, utilisez le hook \u003Ccode>actionFrontControllerSetMedia\u003C\u002Fcode> dans un module :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function hookActionFrontControllerSetMedia()\n{\n    $this->context->controller->registerJavascript(\n        'module-mon-tracking',\n        'modules\u002Fmon_module\u002Fviews\u002Fjs\u002Ftracking.js',\n        [\n            'position' => 'bottom',\n            'priority' => 1000, \u002F\u002F Priorité haute = chargé en dernier\n        ]\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche est nettement plus propre : PrestaShop gère l'ordre de chargement automatiquement, et le CCC fonctionnera correctement quand vous le réactiverez.\u003C\u002Fp>\n\u003Ch2>Étape 5 : vérifier le fonctionnement de Mondial Relay\u003C\u002Fh2>\n\u003Cp>Après correction, testez le tunnel de commande complet :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Ajoutez un produit au panier\u003C\u002Fli>\n\u003Cli>Allez jusqu'à l'étape de livraison\u003C\u002Fli>\n\u003Cli>Sélectionnez Mondial Relay comme transporteur\u003C\u002Fli>\n\u003Cli>Vérifiez que le widget de sélection de point relais s'affiche\u003C\u002Fli>\n\u003Cli>Sélectionnez un point relais et validez la commande\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si le widget fonctionne, vous pouvez \u003Cstrong>réactiver le CCC\u003C\u002Fstrong> progressivement :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Activez d'abord la concaténation CSS seule\u003C\u002Fli>\n\u003Cli>Puis la concaténation JS\u003C\u002Fli>\n\u003Cli>Testez après chaque activation\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Bonnes pratiques pour éviter les conflits JavaScript\u003C\u002Fh2>\n\u003Ch3>1. Ne jamais modifier les templates core\u003C\u002Fh3>\n\u003Cp>Travaillez toujours dans un \u003Cstrong>thème enfant\u003C\u002Fstrong>. Si vous modifiez directement les templates du thème parent, une mise à jour écrasera vos corrections.\u003C\u002Fp>\n\u003Ch3>2. Utiliser les hooks plutôt que les insertions manuelles\u003C\u002Fh3>\n\u003Cp>Les hooks \u003Ccode>displayHeader\u003C\u002Fcode>, \u003Ccode>displayFooterBefore\u003C\u002Fcode> et \u003Ccode>actionFrontControllerSetMedia\u003C\u002Fcode> sont faits pour ça. Ils garantissent un ordre de chargement cohérent.\u003C\u002Fp>\n\u003Ch3>3. Encapsuler vos scripts avec DOMContentLoaded\u003C\u002Fh3>\n\u003Cp>Si vous ne pouvez pas contrôler l'ordre de chargement, protégez vos scripts :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n  if (typeof jQuery !== 'undefined') {\n    \u002F\u002F Votre code ici\n  }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>4. Vérifier la compatibilité après chaque mise à jour de module\u003C\u002Fh3>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>Cas particulier : thème avec checkout personnalisé\u003C\u002Fh2>\n\u003Cp>Certains thèmes remplacent entièrement la structure du checkout PrestaShop. Dans ce cas, le template \u003Ccode>checkout.tpl\u003C\u002Fcode> n'hérite plus du layout standard et peut avoir sa propre logique d'inclusion JavaScript.\u003C\u002Fp>\n\u003Cp>Vérifiez que votre \u003Ccode>checkout.tpl\u003C\u002Fcode> personnalisé contient bien :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{block name='javascript_bottom'}\n  {include file=\"_partials\u002Fjavascript.tpl\"}\n{\u002Fblock}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>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.\u003C\u002Fp>",[40,43,46,49,52],{"q":41,"a":42},"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.",{"q":44,"a":45},"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.",{"q":47,"a":48},"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.",{"q":50,"a":51},"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\u002Fvotre-theme\u002Ftemplates\u002Fcheckout\u002Fcheckout.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.",{"q":53,"a":54},"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'.","Le module Mondial Relay qui ne fonctionne pas au checkout est presque toujours causé par un conflit JavaScript : un script tiers chargé avant jQuery bloque l'initialisation du widget. La solution consiste à désactiver le CCC pour identifier le script fautif, puis à le déplacer après l'inclusion de jQuery dans vos templates.",5,"2026-03-21T13:34:22.000Z",[],"Discussion générale",{"items":61},[62,73,81,89,97,106,113,121],{"id":63,"type":64,"label":65,"href":67,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":70,"children":71,"psChildren":72},41,"link",{"fr":66},"Expertise","\u002Fexpertise",null,false,0,[],[],{"id":74,"type":64,"label":75,"href":77,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":78,"children":79,"psChildren":80},42,{"fr":76},"Blog","\u002Fblog",1,[],[],{"id":82,"type":64,"label":83,"href":85,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":86,"children":87,"psChildren":88},43,{"fr":84},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":90,"type":64,"label":91,"href":93,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":94,"children":95,"psChildren":96},44,{"fr":92},"Outils IA","\u002Foutils-ia",3,[],[],{"id":98,"type":64,"label":99,"href":101,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":102,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":103,"children":104,"psChildren":105},45,{"fr":100},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":107,"type":64,"label":108,"href":110,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":56,"children":111,"psChildren":112},46,{"fr":109},"Academy","\u002Facademy",[],[],{"id":114,"type":64,"label":115,"href":117,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":118,"children":119,"psChildren":120},47,{"fr":116},"À propos","\u002Fa-propos",6,[],[],{"id":122,"type":64,"label":123,"href":125,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":126,"children":127,"psChildren":128},48,{"fr":124},"Contact","\u002Fcontact",7,[],[],{"columns":130},[131,143,173,189],{"title":132,"links":133},"Plateforme",[134,136,139,140],{"label":135,"href":101,"external":69},"Offre Starter (2 500 €)",{"label":137,"href":138,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":84,"href":85,"external":69},{"label":141,"href":142,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":144,"links":145},"Le Synedre",[146,149,152,155,158,161,164,167,170],{"label":147,"href":148,"external":69},"L'histoire","\u002Fsynedre",{"label":150,"href":151,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":153,"href":154,"external":69},"L'équipe","\u002Fequipe",{"label":156,"href":157,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":159,"href":160,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":162,"href":163,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":165,"href":166,"external":69},"Les agents IA","\u002Fagents-ia",{"label":168,"href":169,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":171,"href":172,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":174,"links":175},"Ressources",[176,177,178,181,183,186],{"label":76,"href":77,"external":69},{"label":109,"href":110,"external":69},{"label":179,"href":180,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":182,"href":67,"external":69},"Expertise PrestaShop",{"label":184,"href":185,"external":69},"Flywheel","\u002Fflywheel",{"label":187,"href":188,"external":69},"Manifeste","\u002Fmanifeste",{"title":116,"links":190},[191,193,196],{"label":192,"href":117,"external":69},"Alexandre Carette",{"label":194,"href":195,"external":69},"Dossier de presse","\u002Fpresse",{"label":124,"href":125,"external":69},{"academy":198,"blog":199,"expertise":210},[],[200,204,207],{"title":201,"url":202,"score":78,"type":203},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":205,"url":206,"score":78,"type":203},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":208,"url":209,"score":78,"type":203},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":212},{"logo":213,"topBar":218,"contactEmail":221,"features":222,"navBar":68},{"src":214,"alt":215,"text":192,"href":216,"class":217},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":68,"showLanguages":69,"align":219,"languages":220},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":223},"inline",{"footer":225},{"theme":226,"description":68,"hours":68,"logo":227,"contact":228,"social":229,"bottomBar":239},"dark",{"src":214,"href":216,"alt":192},{"email":68,"phone":68,"address":68,"cta":68},[230,233,236],{"platform":231,"href":232,"label":231},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":234,"href":235,"label":234},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":237,"href":238,"label":237},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":68}]