[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fgu2ib5yu76-B47mdVnwXNyBfIuXJG2AvxS0V6TXx0-c":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":60,"megamenu":141,"$fui7lum-8iHUIJaMgnSK0etyTAbeZOQksNJFwk9IsHkA":197,"footer-db":211,"header-db":229},{"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},"Thème enfant PrestaShop : résoudre les erreurs JavaScript après installation","theme-enfant-prestashop-erreurs-javascript-bibliotheques-manquantes","Votre thème enfant PrestaShop casse le site ? Découvrez comment diagnostiquer et corriger les erreurs JavaScript liées aux bibliothèques manquantes.","developpement",[28,29,30,31,32,33],"theme-enfant","javascript","flexisel","setMedia","debug-js","front-office","intermediaire",[36,37],"1.7","8.x","\u003Ch2>Le problème classique : un thème enfant qui casse tout le front-office\u003C\u002Fh2>\n\u003Cp>Vous venez d'installer un thème enfant sur votre boutique PrestaShop et le résultat est catastrophique : le site est cassé, les sliders ne fonctionnent plus, les interactions sont figées. Ce scénario est bien plus fréquent qu'on ne le pense, et la cause est presque toujours la même : \u003Cstrong>des bibliothèques JavaScript ne sont pas correctement héritées par le thème enfant\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>Après plus de dix ans d'interventions sur des boutiques PrestaShop, je peux affirmer que 80 % des problèmes post-installation d'un thème enfant sont liés à des dépendances JS manquantes. Voyons comment diagnostiquer et résoudre ce problème méthodiquement.\u003C\u002Fp>\n\u003Ch2>Étape 1 : diagnostiquer avec la console JavaScript\u003C\u002Fh2>\n\u003Cp>La toute première chose à faire face à un thème enfant dysfonctionnel est d'ouvrir la \u003Cstrong>console JavaScript\u003C\u002Fstrong> de votre navigateur.\u003C\u002Fp>\n\u003Ch3>Accéder à la console\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Chrome \u002F Edge** : `F12` puis onglet \"Console\"\u003C\u002Fli>\n\u003Cli>**Firefox** : `F12` ou `Ctrl+Shift+K`\u003C\u002Fli>\n\u003Cli>**Safari** : `Cmd+Option+J` (après avoir activé le menu développeur)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Recherchez les erreurs en rouge. Vous verrez typiquement des messages comme :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nUncaught TypeError: $(...).flexisel is not a function\nUncaught ReferenceError: flexisel is not defined\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ce type d'erreur signifie qu'une \u003Cstrong>bibliothèque JavaScript est appelée dans le code mais n'a jamais été chargée\u003C\u002Fstrong>. En JavaScript, une seule erreur non interceptée peut bloquer l'exécution de tout le script, ce qui explique pourquoi le site entier semble cassé.\u003C\u002Fp>\n\u003Ch2>Étape 2 : vérifier les scripts chargés dans le code source\u003C\u002Fh2>\n\u003Cp>Ouvrez le code source de votre page (\u003Ccode>Ctrl+U\u003C\u002Fcode> dans la plupart des navigateurs) et recherchez les fichiers JavaScript critiques.\u003C\u002Fp>\n\u003Cp>Vérifiez notamment la présence de :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>`theme.js` ou `custom.js` — le script principal du thème\u003C\u002Fli>\n\u003Cli>Les bibliothèques tierces utilisées par vos modules (jQuery plugins, sliders, etc.)\u003C\u002Fli>\n\u003Cli>`jquery.flexisel.js` ou tout autre plugin jQuery spécifique à votre thème\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si un fichier attendu est absent du code source, c'est la confirmation que le thème enfant ne charge pas correctement les assets du thème parent.\u003C\u002Fp>\n\u003Ch2>Étape 3 : comprendre pourquoi les scripts ne sont pas hérités\u003C\u002Fh2>\n\u003Cp>Dans PrestaShop 1.7 et 8.x, le mécanisme de thème enfant hérite des templates mais \u003Cstrong>pas automatiquement de tous les assets JavaScript et CSS\u003C\u002Fstrong>. Quand un module ou un thème parent enregistre ses scripts via la méthode \u003Ccode>setMedia()\u003C\u002Fcode>, le thème enfant peut ne pas hériter de ces déclarations si :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Le module surcharge `setMedia()` sans appeler `parent::setMedia()`\u003C\u002Fli>\n\u003Cli>Les chemins des assets sont codés en dur avec le nom du thème parent\u003C\u002Fli>\n\u003Cli>Le fichier `theme.yml` du thème enfant ne déclare pas correctement les assets parents\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Le fichier theme.yml du thème enfant\u003C\u002Fh3>\n\u003Cp>En PrestaShop 1.7+, le \u003Ccode>theme.yml\u003C\u002Fcode> du thème enfant doit déclarer le thème parent :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\nparent: classic\nname: mon-theme-enfant\ndisplay_name: Mon Thème Enfant\nversion: 1.0.0\n\nassets:\n  use_parent_assets: true\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>En \u003Cstrong>PrestaShop 8.x\u003C\u002Fstrong>, la propriété \u003Ccode>use_parent_assets\u003C\u002Fcode> est toujours supportée. Assurez-vous qu'elle est bien à \u003Ccode>true\u003C\u002Fcode> si vous souhaitez hériter des assets du parent.\u003C\u002Fp>\n\u003Ch2>Étape 4 : solution immédiate — désactiver le code fautif\u003C\u002Fh2>\n\u003Cp>Si votre site est en production et que vous devez le remettre en état rapidement, la solution d'urgence consiste à \u003Cstrong>commenter l'appel à la bibliothèque manquante\u003C\u002Fstrong> dans le fichier JavaScript principal du thème.\u003C\u002Fp>\n\u003Cp>Par exemple, si l'erreur concerne \u003Ccode>flexisel\u003C\u002Fcode>, ouvrez le fichier \u003Ccode>assets\u002Fjs\u002Fcustom.js\u003C\u002Fcode> (ou \u003Ccode>scripts.js\u003C\u002Fcode>) de votre thème et commentez les lignes qui appellent cette bibliothèque :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F Solution temporaire : commenter l'initialisation de flexisel\n\u002F\u002F $(\"#mon-slider\").flexisel({\n\u002F\u002F     visibleItems: 4,\n\u002F\u002F     animationSpeed: 200,\n\u002F\u002F     autoPlay: true\n\u002F\u002F });\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Attention\u003C\u002Fstrong> : c'est un correctif temporaire. Le slider ou le composant associé ne fonctionnera plus. La vraie solution est de charger correctement la bibliothèque.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Étape 5 : solution définitive — enregistrer les scripts manquants\u003C\u002Fh2>\n\u003Cp>La bonne approche est d'enregistrer les bibliothèques JavaScript manquantes via la méthode \u003Ccode>setMedia()\u003C\u002Fcode> de votre module ou de votre thème enfant.\u003C\u002Fp>\n\u003Ch3>Dans un module PrestaShop\u003C\u002Fh3>\n\u003Cp>Si la bibliothèque est liée à un module, surchargez la méthode \u003Ccode>setMedia()\u003C\u002Fcode> du FrontController du module :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function setMedia()\n{\n    parent::setMedia();\n\n    \u002F\u002F Enregistrer la bibliothèque flexisel\n    $this->registerJavascript(\n        'flexisel',\n        'modules\u002F' . $this->module->name . '\u002Fviews\u002Fjs\u002Fjquery.flexisel.js',\n        ['priority' => 100, 'position' => 'bottom']\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Dans le thème enfant (PrestaShop 8.x)\u003C\u002Fh3>\n\u003Cp>En PrestaShop 8.x, vous pouvez déclarer les assets directement dans le \u003Ccode>theme.yml\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\nassets:\n  use_parent_assets: true\n  js:\n    all:\n      - id: flexisel\n        path: assets\u002Fjs\u002Fjquery.flexisel.js\n        priority: 100\n        position: bottom\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ou via un hook dans un module compagnon :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function hookActionFrontControllerSetMedia($params)\n{\n    $this->context->controller->registerJavascript(\n        'flexisel',\n        'modules\u002F' . $this->name . '\u002Fviews\u002Fjs\u002Fjquery.flexisel.js',\n        [\n            'priority' => 100,\n            'position' => 'bottom',\n            'server' => 'local'\n        ]\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Étape 6 : réinstaller proprement les modules sur le thème enfant\u003C\u002Fh2>\n\u003Cp>Un problème souvent négligé : \u003Cstrong>les modules doivent être réinstallés (ou au minimum réinitialisés) après l'activation d'un thème enfant\u003C\u002Fstrong>. En effet, les hooks et les positions des modules sont liés au thème actif.\u003C\u002Fp>\n\u003Cp>Pour réinitialiser les modules sur votre thème enfant :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Allez dans **Apparence > Thème et logo**\u003C\u002Fli>\n\u003Cli>Activez le thème parent, puis réactivez le thème enfant\u003C\u002Fli>\n\u003Cli>Lors de la réactivation, PrestaShop vous proposera de réinitialiser les positions des modules\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Alternativement, via la ligne de commande (PrestaShop 8.x) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\nphp bin\u002Fconsole prestashop:module reset nom_du_module\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Bonnes pratiques pour éviter ces problèmes\u003C\u002Fh2>\n\u003Ch3>1. Testez toujours en environnement de développement\u003C\u002Fh3>\n\u003Cp>N'installez jamais un thème enfant directement en production. Utilisez un environnement de pré-production pour valider que tous les composants fonctionnent.\u003C\u002Fp>\n\u003Ch3>2. Vérifiez la compatibilité des bibliothèques jQuery\u003C\u002Fh3>\n\u003Cp>PrestaShop 8.x utilise jQuery 3.x. Certaines bibliothèques anciennes comme Flexisel n'ont pas été mises à jour pour jQuery 3. Si vous rencontrez des incompatibilités, envisagez des alternatives modernes :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Flexisel** → remplacer par **Swiper.js** ou **Splide.js** (sans dépendance jQuery)\u003C\u002Fli>\n\u003Cli>**jQuery UI** → vérifier la compatibilité avec jQuery 3\u003C\u002Fli>\n\u003Cli>**Fancybox 2** → migrer vers **Fancybox 5** ou **GLightbox**\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>3. Utilisez la méthode registerJavascript\u003C\u002Fh3>\n\u003Cp>Évitez d'ajouter des balises \u003Ccode>\u003Cscript>\u003C\u002Fcode> en dur dans vos templates. Utilisez systématiquement \u003Ccode>registerJavascript()\u003C\u002Fcode> et \u003Ccode>registerStylesheet()\u003C\u002Fcode> pour bénéficier de la gestion des dépendances et du cache de PrestaShop.\u003C\u002Fp>\n\u003Ch3>4. Documentez les dépendances de votre thème\u003C\u002Fh3>\n\u003Cp>Maintenez un fichier listant toutes les bibliothèques JavaScript utilisées par votre thème et leur rôle. Cela facilitera grandement le diagnostic en cas de problème après une mise à jour.\u003C\u002Fp>",[40,43,46,49,52],{"q":41,"a":42},"Pourquoi mon site PrestaShop est cassé après l'installation d'un thème enfant ?","Dans la grande majorité des cas, le thème enfant ne charge pas correctement les bibliothèques JavaScript du thème parent. Cela provoque des erreurs JS en cascade qui bloquent l'interactivité du site. Ouvrez la console JavaScript (F12) pour identifier précisément quelle bibliothèque est manquante, puis enregistrez-la via la méthode setMedia() ou dans le fichier theme.yml du thème enfant.",{"q":44,"a":45},"Comment vérifier si un fichier JavaScript est bien chargé sur ma page PrestaShop ?","Ouvrez le code source de la page (Ctrl+U) et recherchez le nom du fichier JavaScript en question. Vous pouvez aussi utiliser l'onglet Réseau (Network) des outils développeur (F12) pour voir tous les fichiers chargés et détecter les erreurs 404 sur des scripts manquants.",{"q":47,"a":48},"Faut-il réinstaller les modules après avoir activé un thème enfant PrestaShop ?","Oui, c'est fortement recommandé. Les positions des modules (hooks) sont associées au thème actif. Lors de l'activation d'un thème enfant, certains modules peuvent perdre leur positionnement ou ne pas charger leurs assets correctement. Réactivez le thème enfant depuis Apparence > Thème et logo pour réinitialiser les positions, ou utilisez la commande php bin\u002Fconsole prestashop:module reset.",{"q":50,"a":51},"Comment enregistrer un script JavaScript dans un thème enfant PrestaShop 8 ?","Deux méthodes sont possibles : soit via le fichier theme.yml en ajoutant le script dans la section assets > js > all avec un identifiant unique, un chemin et une priorité ; soit via un module compagnon en utilisant le hook actionFrontControllerSetMedia et la méthode registerJavascript() du contrôleur. La seconde méthode offre plus de contrôle sur les conditions de chargement.",{"q":53,"a":54},"Une erreur JavaScript peut-elle casser tout le front-office PrestaShop ?","Absolument. JavaScript est exécuté de manière séquentielle dans le navigateur. Si une erreur non interceptée survient (par exemple l'appel à une fonction d'une bibliothèque non chargée), tout le code JavaScript qui suit est bloqué. Cela peut désactiver le panier, les filtres produits, les sliders et toute autre interaction sur la page.","Après l'installation d'un thème enfant PrestaShop, les bibliothèques JavaScript du thème parent ne sont pas toujours héritées automatiquement. Diagnostiquez via la console JS (F12), identifiez les scripts manquants dans le code source, puis enregistrez-les proprement via setMedia() ou le fichier theme.yml.",6,"2026-03-21T13:22:45.000Z",[],"PrestaShop pour les développeurs",{"columns":61},[62,78,108,129],{"title":63,"links":64},"Plateforme",[65,69,72,75],{"label":66,"href":67,"external":68},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":70,"href":71,"external":68},"Devenir Ambassadeur","\u002Fambassadeur",{"label":73,"href":74,"external":68},"Modules PrestaShop","\u002Fmodules",{"label":76,"href":77,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":79,"links":80},"Le Synedre",[81,84,87,90,93,96,99,102,105],{"label":82,"href":83,"external":68},"L'histoire","\u002Fsynedre",{"label":85,"href":86,"external":68},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":88,"href":89,"external":68},"L'équipe","\u002Fequipe",{"label":91,"href":92,"external":68},"Le réacteur en direct","\u002Freacteur",{"label":94,"href":95,"external":68},"Le Drill (entraînement)","\u002Fdrill",{"label":97,"href":98,"external":68},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":100,"href":101,"external":68},"Les agents IA","\u002Fagents-ia",{"label":103,"href":104,"external":68},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":106,"href":107,"external":68},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":109,"links":110},"Ressources",[111,114,117,120,123,126],{"label":112,"href":113,"external":68},"Blog","\u002Fblog",{"label":115,"href":116,"external":68},"Academy","\u002Facademy",{"label":118,"href":119,"external":68},"Dictionnaire","\u002Fdictionnaire",{"label":121,"href":122,"external":68},"Expertise PrestaShop","\u002Fexpertise",{"label":124,"href":125,"external":68},"Flywheel","\u002Fflywheel",{"label":127,"href":128,"external":68},"Manifeste","\u002Fmanifeste",{"title":130,"links":131},"À propos",[132,135,138],{"label":133,"href":134,"external":68},"Alexandre Carette","\u002Fa-propos",{"label":136,"href":137,"external":68},"Dossier de presse","\u002Fpresse",{"label":139,"href":140,"external":68},"Contact","\u002Fcontact",{"items":142},[143,152,158,164,172,180,186,191],{"id":144,"type":145,"label":146,"href":122,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":149,"children":150,"psChildren":151},41,"link",{"fr":147},"Expertise",null,0,[],[],{"id":153,"type":145,"label":154,"href":113,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":155,"children":156,"psChildren":157},42,{"fr":112},1,[],[],{"id":159,"type":145,"label":160,"href":74,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":161,"children":162,"psChildren":163},43,{"fr":73},2,[],[],{"id":165,"type":145,"label":166,"href":168,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":169,"children":170,"psChildren":171},44,{"fr":167},"Outils IA","\u002Foutils-ia",3,[],[],{"id":173,"type":145,"label":174,"href":67,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":176,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":177,"children":178,"psChildren":179},45,{"fr":175},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":181,"type":145,"label":182,"href":116,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":183,"children":184,"psChildren":185},46,{"fr":115},5,[],[],{"id":187,"type":145,"label":188,"href":134,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":56,"children":189,"psChildren":190},47,{"fr":130},[],[],{"id":192,"type":145,"label":193,"href":140,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":194,"children":195,"psChildren":196},48,{"fr":139},7,[],[],{"academy":198,"blog":199,"expertise":210},[],[200,204,207],{"title":201,"url":202,"score":155,"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":155,"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":155,"type":203},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":212},{"theme":213,"description":148,"hours":148,"logo":214,"contact":217,"social":218,"bottomBar":228},"dark",{"src":215,"href":216,"alt":133},"\u002Flogo-ac.svg","\u002F",{"email":148,"phone":148,"address":148,"cta":148},[219,222,225],{"platform":220,"href":221,"label":220},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":223,"href":224,"label":223},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":226,"href":227,"label":226},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":148},{"header":230},{"logo":231,"topBar":234,"contactEmail":237,"features":238,"navBar":148},{"src":215,"alt":232,"text":133,"href":216,"class":233},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":148,"showLanguages":68,"align":235,"languages":236},"left",[],"contact@alexandrecarette.fr",{"showSearch":68,"showWishlist":68,"showLogin":20,"showContact":68,"showCart":68,"stickyHeader":20,"headerLayout":239},"inline"]