Intégrer du JavaScript dans une page produit PrestaShop

Pourquoi intégrer du JavaScript sur une fiche produit ?

La personnalisation des fiches produits est un besoin récurrent en e-commerce. Qu'il s'agisse d'ajouter un système "Voir plus / Voir moins" sur la description longue, d'intégrer un calculateur de prix dynamique ou d'afficher un carrousel personnalisé, le JavaScript reste l'outil incontournable pour enrichir l'expérience utilisateur.

Le problème, c'est que PrestaShop utilise des moteurs de templates (Smarty en 1.6/1.7, puis Twig dans certains contextes en 8.x) qui peuvent entrer en conflit avec la syntaxe JavaScript. Voici les méthodes fiables pour intégrer vos scripts sans casser votre boutique.

Méthode 1 : Injection directe dans le template (PrestaShop 1.6)

Sur PrestaShop 1.6, le moteur Smarty interprète les accolades {} comme des balises de template. Or, le JavaScript en est truffé. C'est la source d'erreur numéro un pour les développeurs qui débutent avec PrestaShop.

La balise `{literal}` : votre alliée

Pour indiquer à Smarty d'ignorer un bloc de code, encadrez-le avec {literal} et {/literal} :

{literal}
<script type="text/javascript">
    function toggleDescription() {
        var desc = document.getElementById('full-description');
        var btn = document.getElementById('toggle-btn');
        if (desc.style.display === 'none') {
            desc.style.display = 'block';
            btn.textContent = 'Réduire';
        } else {
            desc.style.display = 'none';
            btn.textContent = 'En savoir plus';
        }
    }
</script>
{/literal}

Où placer ce script ?

Deux options recommandées :

Option A — Dans product.tpl (spécifique au produit) :

Placez le script en fin de fichier themes/votre-theme/product.tpl. L'avantage : il ne se charge que sur les pages produits.

Option B — Dans footer.tpl avec condition :

Si vous préférez centraliser vos scripts personnalisés, injectez-les dans footer.tpl juste avant la balise , avec une condition sur le type de page :

{if $page_name == 'product'}
{literal}
<script type="text/javascript">
    // Votre code JavaScript ici
</script>
{/literal}
{/if}

Cette approche est plus propre car elle centralise les ajouts et évite de surcharger le template produit.

Méthode 2 : Le hook `displayFooterProduct` (PrestaShop 1.7 / 8.x)

À partir de PrestaShop 1.7, la bonne pratique consiste à passer par un module qui s'accroche aux hooks du système. Cela évite de modifier directement les fichiers de thème, ce qui facilite les mises à jour.

Hooks pertinents pour les pages produits

HookPositionUsage recommandé `displayFooterProduct`Bas de la fiche produitScripts spécifiques au produit `displayProductAdditionalInfo`Zone d'informations complémentairesContenus dynamiques `actionFrontControllerSetMedia`Chargement des assetsFichiers JS/CSS externes `displayAfterBodyOpeningTag`Après ``Scripts de tracking

Exemple de module minimal

<?php
/**
 * @author Alexandre Carette <contact@alexandrecarette.fr>
 * @copyright 2026 Alexandre Carette
 * @license Propriétaire et Confidentiel
 */

if (!defined('_PS_VERSION_')) {
    exit;
}

class MyProductScripts extends Module
{
    public function __construct()
    {
        $this->name = 'myproductscripts';
        $this->version = '1.0.0';
        $this->author = 'Alexandre Carette';
        $this->tab = 'front_office_features';
        $this->need_instance = 0;
        $this->ps_versions_compliancy = ['min' => '1.7.0.0', 'max' => '8.99.99'];

        parent::__construct();

        $this->displayName = $this->l('Scripts produit personnalisés');
        $this->description = $this->l('Ajoute du JavaScript personnalisé aux fiches produits.');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('actionFrontControllerSetMedia');
    }

    public function hookActionFrontControllerSetMedia($params)
    {
        if ($this->context->controller instanceof ProductControllerCore
            || $this->context->controller->php_self === 'product') {
            $this->context->controller->registerJavascript(
                'myproductscripts-custom',
                'modules/' . $this->name . '/views/js/product-custom.js',
                [
                    'position' => 'bottom',
                    'priority' => 200,
                ]
            );
        }
    }
}

Puis créez le fichier modules/myproductscripts/views/js/product-custom.js avec votre logique JavaScript.

Méthode 3 : Via l'API `registerJavascript` (recommandé en 8.x)

PrestaShop 8.x conserve le système de hooks mais encourage fortement l'utilisation de registerJavascript et registerStylesheet pour gérer les assets. Cette API offre un contrôle précis sur le chargement :

$this->context->controller->registerJavascript(
    'identifiant-unique',
    'modules/monmodule/views/js/script.js',
    [
        'position' => 'bottom',      // 'head' ou 'bottom'
        'priority' => 200,            // Plus bas = chargé en premier
        'inline' => false,            // true pour du JS inline
        'attributes' => 'defer',      // defer, async, ou module
    ]
);

Le piège TinyMCE : quand le back-office mange votre JavaScript

Si vous tentez d'insérer du JavaScript directement dans le champ description longue d'un produit via le back-office, vous allez rencontrer un problème majeur : l'éditeur de texte riche TinyMCE supprime automatiquement les balises