Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Afficher des pop-ups modales sans toucher aux fichiers TPL

sebastienlille

Bonjour à tous,

J'essaie de mettre en place un système de notifications pop-up sur mon site PrestaShop (un message de bienvenue, une promo newsletter, etc.). Le but est de pouvoir afficher une fenêtre modale sur certaines pages, avec un contrôle de la fréquence (par exemple, via un cookie).

J'ai essayé de créer un petit module qui s'accroche à displayBeforeBodyClosingTag pour injecter mon HTML, mais je me retrouve avec un div qui s'affiche simplement, sans être une vraie modale avec un overlay, et surtout, sans gestion des cookies ni de positionnement configurable. Je ne veux pas modifier les fichiers .tpl de mon thème directement car ça pose des problèmes lors des mises à jour.

Voici le code de ma méthode de hook dans mon module :

public function hookDisplayBeforeBodyClosingTag($params)
{
    // Vérifier si un cookie existe pour ne pas afficher le popup à chaque visite
    // (logique à implémenter, mais pas le souci principal pour l'instant)
    
    $this->context->smarty->assign([
        'popup_message' => $this->l('Profitez de 10% de réduction sur votre première commande !'),
        'popup_id' => 'my-custom-popup',
    ]);

    // Ceci affiche le contenu mais ne gère pas l'aspect modal ni la fermeture propre
    return $this->display(__FILE__, 'views/templates/hook/my_basic_popup.tpl');
}

Et mon my_basic_popup.tpl est juste un div avec un bouton de fermeture simple. Comment pourrais-je rendre ça plus dynamique et configurable, sans devoir coder la logique JS/CSS de la modalité et des cookies à chaque fois ? J'ai l'impression de réinventer la roue ou d'utiliser le mauvais hook/la mauvaise approche.

arthurvendeur

@sebastienlille Je comprends tout à fait ta frustration, c'est un classique sur PrestaShop quand on veut faire du pop-up sans module dédié. Ton approche avec displayBeforeBodyClosingTag est bonne pour injecter du HTML/JS, mais le problème, c'est que display se contente de renvoyer une chaîne de caractères. Pour avoir un vrai comportement de modal, il faut non seulement le HTML et le CSS, mais aussi du JavaScript pour gérer l'ouverture, la fermeture, l'overlay, et surtout la logique de cookie pour la fréquence.

La méthode display de ton module va juste inclure le contenu de ton my_basic_popup.tpl directement dans le HTML de la page. Si ton .tpl ne contient pas déjà toute la structure JS/CSS pour le transformer en modal interactif (avec un fond grisé, une position fixe, etc.), ça restera un simple div.

Tu es sur quelle version exacte de PrestaShop ? Ça peut changer un peu la donne pour certaines APIs côté JS.

Milo

Salut @sebastienlille,

@arthurvendeur a bien résumé la situation. Ton code injecte bien le contenu HTML via Smarty, mais un 'vrai' pop-up modal avec toutes les fonctionnalités attendues (overlay, animation, gestion des cookies pour ne pas réapparaître trop souvent, ciblage des pages, etc.) demande une couche JavaScript et CSS significative. Le simple fait de retourner le template ne suffit pas, il faut ensuite 'activer' ce contenu en tant que modal via du JS.

Pour une solution propre et plus robuste, voici une approche où tu pourrais charger tes assets (JS/CSS) et initialiser une logique côté client pour ta modale. Cependant, gérer la persistance via cookies, les différentes conditions d'affichage, et l'édition facile du contenu sans toucher au code deviendrait vite lourd avec cette seule méthode.

Voici un exemple de comment tu pourrais charger un fichier JS spécifique à ton popup, où la logique modal serait gérée (pour PS 1.7.6.5):

public function hookDisplayBeforeBodyClosingTag($params)
{
    // On ajoute le fichier JS qui gérera l'affichage modal et les cookies
    $this->context->controller->registerJavascript(
        'modules-mypopupmodule-popup',
        'modules/' . $this->name . '/views/js/popup_handler.js',
        ['position' => 'bottom', 'priority' => 150]
    );

    $this->context->smarty->assign([
        'popup_message' => $this->l('Profitez de 10% de réduction sur votre première commande !'),
        'popup_id' => 'my-custom-popup',
        'cookie_name' => 'popup_shown',
        'cookie_duration' => 7, // jours
    ]);

    return $this->display(__FILE__, 'views/templates/hook/my_basic_popup.tpl');
}

Dans ton fichier popup_handler.js (situé dans modules/mypopupmodule/views/js/), tu devrais avoir toute la logique JavaScript pour transformer ton div en une vraie modale (ajout d'un overlay, gestion de l'affichage/masquage, et surtout la lecture/écriture des cookies). Le problème est que cela reste une solution "maison" qui demande du développement.

Pour éviter de réinventer la roue et avoir une solution clé en main, avec une interface d'administration pour gérer facilement tous les paramètres (contenu, position, fréquence par cookie, ciblage), je te recommande de regarder un module dédié comme PopUp Gratuit. Ces modules sont conçus spécifiquement pour ça, ils gèrent les mises à jour, la compatibilité, et te donnent un contrôle total sans coder.

sebastienlille

Merci @Milo pour cette explication détaillée et la suggestion de code. Le fait d'ajouter le JS via registerJavascript est une excellente piste pour rendre le tout plus propre que de l'inline dans le TPL. Je n'avais pas pensé à cette méthode.

Pour répondre à @arthurvendeur, je suis sur PrestaShop 1.7.6.5.

Je vais tester l'approche avec le JS externe pour comprendre le mécanisme, mais je vois clairement les limites pour la gestion des options et la maintenabilité. L'idée d'un module tout fait comme PopUp Gratuit est effectivement beaucoup plus pertinente pour une boutique en production. Je vais regarder ça de près pour avoir une solution robuste et facile à configurer sans me casser la tête avec le code à chaque fois. Merci encore !