Comment fait un ajout de script dans le head de Prestashop ?
1. Comment insérer un script JavaScript dans le <head> de PrestaShop via le fichier header.tpl de votre thème
Pour intégrer un script personnalisé dans le <head> de PrestaShop, la méthode la plus directe consiste à modifier le fichier header.tpl de votre thème actif. Ce fichier se trouve généralement dans le dossier /themes/votre_theme/templates/_partials/. Ouvrez ce fichier avec un éditeur de texte et ajoutez votre balise <script> juste avant la fermeture de la balise <head>.
Assurez-vous que le chemin de votre script est correct, surtout si vous utilisez un fichier externe. Vous pouvez aussi intégrer un script inline directement dans le fichier. Après modification, videz le cache de PrestaShop via le back-office ou en supprimant manuellement le contenu du dossier /var/cache/ pour que les changements prennent effet.
2. Ajouter un script JavaScript au <head> de PrestaShop en utilisant les hooks natifs du système
PrestaShop offre des hooks permettant d’injecter du contenu dans le <head> sans modifier directement les fichiers de thème. Le hook displayHeader est idéal pour cela. Vous pouvez créer un module personnalisé ou en modifier un existant pour exploiter ce hook et y insérer votre script.
Créez une fonction hookDisplayHeader dans votre module, puis utilisez Media::addJs() ou ajoutez le script avec Tools::addJS() selon votre version. Cette méthode est plus propre et maintient votre installation compatible avec les mises à jour du thème.
3. Utiliser un module personnalisé pour injecter dynamiquement un script JavaScript dans le <head> de PrestaShop
Créer un module personnalisé vous permet d'ajouter des scripts de manière centralisée. Ce module peut s’inscrire au hook displayHeader pour inclure automatiquement du JavaScript dans la balise <head>. C’est une solution évolutive et adaptée aux projets professionnels.
Vous devez créer un fichier PHP pour le module, enregistrer le hook dans la méthode install() et déclarer la méthode hookDisplayHeader() dans laquelle vous ajoutez le code du script. Cela offre un contrôle total tout en respectant les standards de PrestaShop.
4. Ajouter Google Analytics ou un script externe dans le <head> de PrestaShop sans toucher aux fichiers du thème
L’ajout de scripts comme Google Analytics peut être fait sans modifier le thème via un module dédié. PrestaShop propose un module officiel pour Google Analytics, mais vous pouvez aussi utiliser un module HTML personnalisé pour insérer n’importe quel code.
Ces modules permettent souvent d’ajouter du contenu dans le <head> via l’interface back-office. Cette méthode est idéale pour les utilisateurs non techniques souhaitant ajouter des scripts sans altérer les fichiers du système.
5. Modifier le fichier layout-both-columns.tpl pour injecter un script dans le <head> de PrestaShop
Le fichier layout-both-columns.tpl structure les pages avec colonnes dans certains thèmes. Ce fichier inclut souvent le header.tpl, mais peut être modifié pour insérer des scripts conditionnels dans le <head>.
Utilisez cette approche si vous souhaitez que le script soit chargé uniquement sur certaines pages utilisant cette mise en page. Cela permet un meilleur contrôle de la charge JavaScript selon le contexte utilisateur ou la page visitée.
6. Ajouter un script JavaScript dans le <head> de PrestaShop via le panneau d'administration avec un module HTML personnalisé
Certains modules du marché permettent d’ajouter du code HTML/JS dans le <head> depuis l’interface d’administration. C’est une solution simple, surtout si vous utilisez un thème non personnalisé et que vous ne voulez pas coder.
Une fois le module installé, vous aurez généralement une interface pour coller votre code dans un champ dédié. Ces modules utilisent les hooks internes pour injecter le script sans que vous ayez à modifier le code source.
7. Insérer un script JavaScript dans le <head> de PrestaShop en surchargeant un template via un thème enfant
Créer un thème enfant vous permet de surcharger les templates sans modifier le thème principal. Pour injecter un script, copiez le fichier header.tpl dans le thème enfant, puis ajoutez votre balise <script> dans la balise <head>.
Cette méthode évite de perdre vos modifications lors de mises à jour du thème parent. C’est une bonne pratique de développement à adopter pour garder un site maintenable et évolutif.
8. Ajouter un script JavaScript spécifique à une page produit ou catégorie dans le <head> de PrestaShop
Si vous souhaitez ajouter un script uniquement sur certaines pages (produit, catégorie…), vous pouvez utiliser les contrôleurs PrestaShop pour cibler les pages souhaitées et injecter le script via un module ou un template conditionnel.
Dans header.tpl ou dans un module utilisant le hook displayHeader, vous pouvez utiliser des conditions Smarty comme {if $controller_name == 'product'} pour insérer le script uniquement sur les pages concernées. Cela améliore les performances du site.
9. Utiliser le système de surcharge PrestaShop pour injecter un script dans le <head> sans modifier le cœur
PrestaShop permet la surcharge des contrôleurs pour ajouter du contenu dans le header. Vous pouvez surcharger le contrôleur FrontController et utiliser la méthode setMedia() pour inclure un fichier JavaScript.
Cette méthode est plus avancée, mais elle garantit une séparation propre entre le code natif de PrestaShop et vos personnalisations. Cela facilite la maintenance et le déploiement dans des environnements professionnels.
10. Ajouter un script JavaScript dans le <head> de PrestaShop en utilisant les options de configuration avancées de certains modules tiers
Certains modules de personnalisation de thème ou de gestion de balises marketing incluent des options pour injecter des scripts dans le <head>. Cela évite de modifier les fichiers et offre un contrôle via l’interface.
Ces modules détectent souvent les pages cibles et permettent de conditionner l’injection du script selon le contexte. C’est une solution flexible pour les utilisateurs cherchant une alternative sans coder.
