Passer une variable produit (EAN13) au panier AJAX PrestaShop

Le problème : rendre une donnée produit accessible côté JavaScript

Lorsqu'on personnalise le panier AJAX de PrestaShop (le fameux "layer cart" en 1.6, ou le modal d'ajout au panier en 1.7+), on a parfois besoin d'accéder à des données produit qui ne sont pas exposées par défaut côté JavaScript — typiquement l'EAN13, la référence fournisseur, ou tout attribut personnalisé.

Le réflexe initial est souvent de tenter un {$product.ean13} directement dans un fichier JavaScript ou dans un template global. Mais cette approche se heurte à un obstacle fondamental : le contexte Smarty d'un produit n'est disponible que dans la boucle qui itère sur les produits.

Pourquoi ça ne fonctionne pas dans une boucle `foreach`

Si vous affichez une liste de produits (catégorie, accueil, recherche), chaque produit est rendu dans une boucle {foreach}. Si vous tentez d'injecter une variable JavaScript à l'intérieur de cette boucle avec {addJsDef}, chaque itération écrase la précédente : à la fin du rendu, votre variable JavaScript ne contient que la valeur du dernier produit.

C'est un piège classique qui génère des bugs silencieux — le code semble fonctionner, mais la valeur est toujours celle du dernier élément de la liste.

Solution 1 : Input caché avec identifiant unique (pages listing)

Pour les pages qui affichent plusieurs produits, la méthode la plus fiable consiste à stocker la donnée dans un élément HTML avec un identifiant unique par produit :

{* Dans le template de boucle produit (product-list.tpl ou équivalent) *}
{foreach from=$products item=product}
  <div class="product-container" data-id="{$product.id_product}">
    {* ... affichage du produit ... *}
    <input type="hidden" 
           id="ean13_{$product.id_product}" 
           value="{$product.ean13|escape:'htmlall':'UTF-8'}" />
  </div>
{/foreach}

Côté JavaScript, on récupère ensuite la valeur ciblée :

// Récupérer l'EAN13 d'un produit spécifique par son ID
function getProductEan13(productId) {
    var input = document.getElementById('ean13_' + productId);
    return input ? input.value : '';
}

// Exemple lors de l'ajout au panier
$('.ajax_add_to_cart_button').on('click', function () {
    var productId = $(this).data('id-product');
    var ean13 = getProductEan13(productId);
    // Utiliser ean13 dans votre logique personnalisée
});

Avantage : chaque produit conserve sa propre valeur, pas d'écrasement.

Solution 2 : `addJsDefL` pour la fiche produit (page unique)

Sur la fiche produit, un seul produit est affiché. On peut donc injecter directement une variable JavaScript globale via la fonction Smarty {addJsDefL} :

{* Dans product.tpl (PrestaShop 1.6) *}
{addJsDefL name=productEan13}{$product->ean13|escape:'javascript'}{/addJsDefL}

La variable productEan13 est alors disponible dans tous vos fichiers JavaScript :

// Personnaliser l'image du layer cart avec l'EAN13
if (typeof productEan13 !== 'undefined' && productEan13) {
    $('.layer_cart_img').html(
        '<img class="layer_cart_img img-responsive" ' +
        'src="' + baseUri + 'img/cms/illustrations/' + productEan13 + '.jpg" ' +
        'alt="' + productEan13 + '" />'
    );
}

Différence entre `addJsDef` et `addJsDefL`

FonctionType de sortieUsage `{addJsDef}`Variable JS bruteNombres, booléens, objets JSON `{addJsDefL}`Chaîne JS échappéeTextes, EAN, références (protège les guillemets)

addJsDefL est à privilégier pour les chaînes de caractères car il gère automatiquement l'échappement, évitant les injections XSS et les erreurs de syntaxe JavaScript.

Approche moderne : PrestaShop 1.7 et 8.x

À partir de PrestaShop 1.7, l'architecture a changé. Le système de templates utilise désormais des événements JavaScript et un objet prestashop global.

Méthode via les data attributes

{* Dans le template produit (themes/votre-theme/templates/catalog/product.tpl) *}
<div id="product-details" 
     data-product="{$product.embedded_attributes|json_encode|escape:'htmlall':'UTF-8'}"
     data-ean13="{$product.ean13|escape:'htmlall':'UTF-8'}">
</div>

// Récupération propre en JS
const productDetails = document.getElementById('product-details');
const ean13 = productDetails?.dataset.ean13 || '';

Méthode via l'événement `updatedProduct`

En 1.7+, chaque changement de déclinaison déclenche un événement. C'est la méthode recommandée pour réagir dynamiquement :

prestashop.on('updatedProduct', function (event) {
    if (event.product_url) {
        // Recharger les données produit si nécessaire
        // L'EAN13 peut changer selon la déclinaison
    }
});

PrestaShop 8.x : exposer des données via un module

Pour une approche propre et maintenable en PrestaShop 8, créez un hook dans votre module :

// Dans votre module
public function hookActionFrontControllerSetMedia()
{
    Media::addJsDef([
        'customProductData' => [
            'ean13' => $this->getProductEan13(),
        ]
    ]);
}

private function getProductEan13(): string
{
    $idProduct = (int) Tools::getValue('id_product');
    if (!$idProduct) {
        return '';
    }
    $product = new Product($idProduct);
    return $product->ean13 ?? '';
}

Bonnes pratiques

1. **Toujours échapper les valeurs** — que ce soit avec `|escape:'htmlall'` dans Smarty ou `htmlspecialchars()` en PHP. Un EAN13 semble inoffensif, mais un champ mal échappé reste un vecteur XSS.
1. **Vérifier l'existence de la variable** — en JavaScript, toujours tester `typeof maVariable !== 'undefined'` avant utilisation pour éviter les erreurs sur les pages où le contexte produit n'existe pas.
1. **Préférer les data attributes aux variables globales** — en 1.7+, les `data-*` sont plus propres que les variables globales JavaScript et facilitent le debug.
1. **Activer le mode debug** — en cas de page blanche après modification d'un template Smarty, activez immédiatement le mode debug PrestaShop (`_PS_MODE_DEV_` à `true` dans `config/defines.inc.php`) pour obtenir le message d'erreur exact.
1. **Attention aux déclinaisons** — l'EAN13 peut varier selon la déclinaison produit. Sur une fiche produit avec déclinaisons, pensez à mettre à jour la valeur lors du changement de combinaison.