Popup Prestashop

Prestashop 1.7 – Popup (ép. 36)

Le système de popup on aime… ou pas, mais beaucoup de sites e-commerce l’utilisent. Le système de popup n’est pas forcément mauvais en soi… c’est un peu comme l’alcool, il faut y aller avec modération et ça passera bien.

Une popup toute simple

Pour ce tutoriel, je me suis dit que ça serait bien que j’utilise un module Prestashop gratuit comme base… et j’en ai trouvé un chez mes amis de Team Ever qui proposent un module Popup Prestashop totalement gratuit (merci à eux).

J’ai testé leur module sous la version 1.7 de Prestashop et ça a fonctionné immédiatement, mais pour arriver à ce que je voulais j’ai profité pour ajouter des nouvelles règles CSS et j’ai aussi volontairement masqué certaines fonctions. Mon but c’est d’avoir vraiment une image simple qui s’affiche avec une action précise… une image c’est compatible tous les supports et ça cause pas de problèmes majeurs.

Pour faire un petit plus je me suis amusé à ajouter un petit comptage dans le module, afin que la popup ne s’affiche pas immédiatement. C’est important, car je déteste arriver sur des sites qui me montrent un popup alors que c’est la première fois que je viens. Il faut laisser le visiteur parcourir votre e-commerce et ensuite seulement vous lui affichez le popup.

Quand vous mettez en place un popup, mettez-vous toujours à la place de vos clients. Une bonne popup c’est une action réfléchie qui respecte le visiteurs… n’essayez pas à tout prix de capturer les e-mails des internautes pour les spammer (si si je vous connais… ne mentez pas). Bonne intégration à tous !

Ressources

Pour ce tutoriel vous aurez à disposition :

  • Une bannière PSD d’exemple pour le popup + la police Bebas Neue.
  • Le fichier d’optimisation CSS pour un meilleur rendu.
  • Le fichier du module modifié pour gérer le comptage des pages.

Télécharger

Résumé de la vidéo : intégration d’une popup dans Prestashop

  • La fenêtre popup permet d’afficher rapidement une information importante aux internautes qui naviguent sur votre shop.
  • La popup n’est pas une mauvaise pratique si on le fait correctement.
  • Utilisons ensemble le module Popup de Team Ever.
  • Création d’une image incitative au clic de 500px par 500px.
  • Ajustement des règles CSS pour simplifier l’affichage de la popup.
  • Ajout d’un système de comptage des pages pour ne pas être intrusif.
  • Conclusion ? Un module sympa et bien pratique !

56 commentaires sur “Prestashop 1.7 – Popup (ép. 36)”

  1. Bonjour, très bonnes explications comme toujours cependant dans le dossier que tu as mis en lien. Il faut que j’installes quel fichier ? car il y a plusieurs archives dans le dossier.

    Cordialement.

    Répondre

    1. Bonjour,

      La première chose à faire c’est d’installer le module Prestashop de popup « everpopup-7.zip » et ensuite il faut suivre les instructions données dans la vidéo.

      A bientôt !

      Répondre

  2. Salut,
    superbe explication de l’utilisation de la popup… j’aime bcp le concept de l’attente du nombre de pages avant d’afficher seulement, je tente de créer un test booléen pour que la popup s’affiche malgré tout sur la page d’acceuil a l’arrivée du client mais sans succès…savez-vous où ou comment je dois déclarer ma booléenne pour pouvoir ajouter un test logique ?

    Répondre

    1. Hello,

      A essayer d’initialiser une variable dans le fichier « \controllers\front\IndexController.php » car c’est cette page qui est normalement appelée pour la page d’accueil.

      A bientôt !

      Répondre

  4. Salut, merci pour ce tuto, pouvez vous m’indiquer pour la version 1.6.1.2 (enfin version 1.6) dans quel fichier mettre le custom.css car ne trouve pas l’emplacement donné.

    Répondre

      1. Bonjour

        Pourriez vous s’il vous plait donner le fichier everpopup.php modifié pour prestashop 1.6 afin que ne s’affiche que après 5 clics. merci

        Répondre

        1. Bonjour,

          Dans le zip à télécharger avec les sources, normalement la modification est déjà incluse à l’intérieur.

          A bientôt !

          Répondre

  5. Bonjour,
    merci pour votre tuto.
    Sur presta 1.6.1.17 l’installation fonctionne bien par contre en intégrant votre version everpopup.php le popup s’affiche immédiatement à l’ouverture du site (la ligne 407 du php precise d’ailleurs * Hook Prestashop 1.7 only)
    pourriez vous communiquer une version everpopup.php pour avoir le même rendu ouverture après plusieurs pages sur 1.6 ou donner les modifs a faire. un grand merci d’avance pour nous les débutants.

    Répondre

  6. Super tutos, comme d’habitude 🙂 Sur 1.7 cela marche parfaitement mais comme dit par d’autres en 1.6 cela ne marche pas. Du moins le « décalage » par pages.
    Dommage car 1.6 est majoritairement utilisé 😉

    Répondre

    1. Bonjour,

      Oui disons que je prends de l’avance Prestashop 1.6 est encore bien utilisé, mais j’essaie de suivre la tendance du moment.

      A bientôt !

      Répondre

  7. Bonjour, j’ai installé le module sur la version 1.6.1.18 mais rien ne s’affiche, apparement sur le site de le Team il faut « fancybox » mais je ne l’ai pas et j’ai chercher sur internet mais je ne vois pas si c’est un module ou juste une modification a faire ? merci

    Répondre

    1. Bonjour,

      Difficile de répondre à cette question, car le tutoriel a été effectué sur une version 1.7 de Prestashop. Dans Prestashop 1.7 il me semble que Fancybox est inclus de base… mais pour la version 1.6 j’ai pas le fait le test d’intégration.

      A bientôt !

      Répondre

  8. Salut, Super tuto ça fonctionne à merveille (presque).
    Effectivement j’ai constaté un petit bug. J’ai mi une ancre vers le formulaire d’inscription à la newsletter en lien du logo du module. ça fonctionne bien, cependant quand je clique sur ce dernier et que je parcours une nouvelle page le popup s’affiche de nouveau. Alors que si je le ferme sans cliqué sur le lien il ne s’affiche plus.

    Serais-tu d’où ça pourrait venir ?

    Merci encore pour ce super tuto !

    Répondre

    1. Hello,

      Franchement je pourrai pas vraiment répondre précisément sur ce cas… ça fait déjà un petit moment que ce tutoriel est sorti. Désolé de ne pas pouvoir t’aider plus sur cette question.

      A bientôt !

      Répondre

  9. Salut, J’ai également remarqué que si le client s’inscrivez à la newsletter via le formulaire de création de compte (authentification) il ne recevait pas la confirmation d’inscription à la newsletter et donc pas son code de réduction. ça fonctionne uniquement quand on s’inscrit via le block emailsubscription au dessus du footer.

    C’est assez contraignant, me demande si ne vais pas empêcher peut être simplement l’inscription à cette dernière lors de la création de compte. C’est un peu dommage. Qu’en penses-tu ?

    Répondre

      1. Salut merci pour ta réponse. Effectivement je trouvais ça intéressant mais l’ai enlevé car les clients inscrits ainsi ne reçoivent pas le mail avec leur bon de réduction. Ils ne le reçoivent que si ils s’inscrivent via le block au dessus du footer. C’est un problème avec le module Newsletter de prestashop et non celui de team ever qui fonctionne… Suis sous 1.7.3… Si quelqu’un a la solution elle m’intéresse. Merci d’avance.

        Répondre

        1. Hello Robin,
          Je viens de voir le message et navré de répondre aussi tardivement, en effet le mail dépend d’un module tiers, Ever Popup se contente d’enregistrer les nouveaux inscrits, mais cela peut être rapidement corrigé.
          Le module a été refait de A à Z en date du 15 décembre 2018, et surtout j’ai intégré le design de Germain dans le module, un énorme merci à lui 🙂
          N’hésitez pas à me demander depuis mon site pour améliorer un module qui je l’espère aidera un maximum de personnes. Dans tous les cas, je vous invite à tester la nouvelle version qui demeure gratuite avec un bon clin d’œil à Webbax, dont les conseils valent plus que le coup ^_^

          Répondre

  10. Bonjour, j’ai un problème que je ne trouve pas la solution. Fondamentalement, j’insère les différents paramètres, puis l’image que je veux voir apparaître dans le Popup, mais malheureusement, je ne sors pas dans le guichet, pourquoi? Merci

    Répondre

  11. Bonjour,
    Je ne parviens à installer le module sous Prestashop 1.7.5
    J’envoi le dossier dezzipé par ftp dans le répertoire modules mais le module reste introuvable dans le BO. Une idée ?

    Répondre

    1. Bonjour,

      A vérifier sur le FTP si le dossier contient bien tous les fichiers… et dans les modules du back-office, il faut parfois passer par le catalogue des modules pour le trouver (et lancer une recherche).

      A bientôt !

      Répondre

  12. Bonjour, j’ai installé le module et saisi toutes les données correctement pour créer et publier un Pop Up, mais une fois enregistré, je ne vois plus aucun Pop Up sur mon site. J’ai la version 1.6.1.17 de Prestashop. Par chance, vous pouvez me dire pourquoi. et que pourrais-je essayer de faire? Excusez mon mauvais français, merci beaucoup

    Répondre

    1. Bonjour,

      A voir si ce n’est pas un problème de cookies, essayez de vider les cookies du navigateur (pour votre site) et ensuite affichez à nouveau la page de votre boutique Prestashop pour voir si le popup s’affiche.

      A bientôt !

      Répondre

  13. Bonjour, Merci pour ce super tuto.
    J’aurais une question: plutôt que d’attendre 5 pages, j’aimerais attendre 5 secondes avant que la popup ne s’affiche. Quel serait le code pour ça ?
    MERCI

    Répondre

    1. Hello,

      A vrai dire je n’ai pas essayé… mais je pense que pour ça il faudrait mettre dans le Javascript du popup Prestashop un « setTimeout » avec un délai (c’est dans ce sens là qu’il faut chercher).

      A bientôt !

      Répondre

  14. Bonjour à Webbax et à tous les lecteurs. Il y avait longtemps que je n’avais pas posé de question… mais là j’ai besoin d’un peu d’aide. J’ai mis en place ce tuto avec la version everpopup mise à jour sur le site Ever Team et je suis sous Prestashop 1.7.2. Pour l’application de la dernière partie du présent tuto (affichage du popup après X pages de navigation), j’ai dû insérer le code proposé par Webbax à la ligne 292 et non 400 du fichier everpopup.php (qui s’appelle d’ailleurs maintenant everpspopup.php dans la nouvelle version). Bon, çà fonctionne, et dès la Xème page, le popup s’affiche mai aussi sur toutes les pages suivantes, c’est un peu intrusif et agressif pour le visiteur. Y aurait-il moyen de ne le faire afficher que toutes les X pages de navigation (remettre le compteur de pages vues à 0) ? Je vais essayer de poser également la question à Ever Team pour faire un retour ici dès que j’ai l’info. Bonne journée à tous.

    Répondre

  15. Bon, je me réponds à moi-même, j’ai trouvé une solution pour ceux que çà peut intéresser : j’ai à peine modifié le code proposé par Webbax dans le fichier everpopup qui devient :

    // Webbax - Tuto 36 - Popup
$wait_nb_pages = 5;
$nb_pages_viewed_before_popup = $this->context->cookie->nb_pages_viewed_before_popup=$this->context->cookie->nb_pages_viewed_before_popup+1;
if($this->context->cookie->nb_pages_viewed_before_popup%$wait_nb_pages>0){
   return;
}
// --

    De cette manière le popup ne s’affichera pour le visiteur que tous les modulo 5 pages, ce qui est beaucoup plus léger et garde son efficacité.
    Je précise aussi que j’ai intégré l’image dans le corps du texte du popup et non dans le champs image prévu, çà ne donnait pas de bons résultats chez moi. Reste juste un problème de bordures blanches tout autour du popup, si quelqu’un peut me tuyauter je suis preneur…
    Bonne soirée à tous.

    Répondre

  17. Bonjour,
    Ve module me parait super, le seul problème c’est que quand je clic sur l’ajout au panier l’autorisation m’est refusée avec cette prase traduite…Votre demande semble étrangement similaire aux demandes automatisées de logiciel de publication de spam ou il a été refusé par une politique de sécurité configurée par l’administrateur du site.
    Si vous croyez que vous devriez être en mesure d’effectuer cette demande, s’il vous plaît nous le faire savoir.

    Je ne comprends pas….vous avez une idée svp ?
    Merci
    Corinne

    Répondre

    1. Bonjour,

      Concernant ce message, je ne suis pas certain que Prestashop en soit la cause… Vérifiez si vous avez un antivirus / firewall et désactivez le 5/10 minutes pour voir si c’est lui qui déclenche cette alerte.

      A bientôt !

      Répondre

  18. bonjour
    je viens d’installer ce module, mais il ne fonctionne pas.
    je ne comprends pas pourquoi, j ai même téléchargé la notice qui es simple a première vue.
    je viens de regarder votre vidéo et a priori cela devrait marcher.. mais non
    je suis sous presta shop 1.7
    si vous aviez quelque conseil a me donner

    Répondre

  19. Désolé, ne tenez pas compte de mon commentaire plus haut, j’ avais oublié de cocher une case.
    J’ en profite pour vous remercier car vous partager beaucoup de solution.
    Thierry

    Répondre

  20. Bonjour, merci pour ce tuto.
    je voudrais savoir comment faire pour mettre un filtre de mes catégories sur ce popup?
    cordialement.

    Répondre

  21. Bonjour,

    J’ai suivi votre tuto à la lettre
    Je suis en Prestashop 1.7.5.2.
    Je dois désactiver l’option fancybox pour que la popup s’affiche.
    J’ai utilisé votre fichier image de 500 x 500 pour tester

    Le seul souci que j’ai est l’affichage de la popup qui se fait sur toute la largeur de l’écran avec l’image à gauche. Ceci sur un pc
    Sur un smartphone ou un ipad, ce n’est pas responsive du tout.
    Pourtant les fichiers css sont bien là…

    J’ai désactivé le popup pour l’instant, mais si il faut le remettre pour voir, ou si vous voulez des screenshots, dites le moi…

    Merci pour votre aide

    Répondre

    1. Bonjour Alain,
      Ca date un peu mais aviez-vous trouvé la solution? J’ai le même souci que vous : les modifs CSS ne sont pas prises en compte (donc affichage de la popup sur toute la largeur, et non responsive).
      Je suis en PS 1.7.6.8
      D’avance merci 😉

      Répondre

        2. Je n’avais pas réussi à faire vraiment ce que je voulais…j’avais contourné en créant une image carrée (avec texte incorporé à l’image du coup)

          Répondre

  22. Bonjour,

    Je suis navré j’utilise everpspopup en version 3.1.2 sous PS 1.6 et j’ai une question bête mais impossible de passer le css dans le template

    on as:

    $this->context->controller->addCSS(($this->_path).’views/css/everpspopup.css’, ‘all’);

    J’ai donc essayer de mettre mon fichier sous:

    /themes/my/css/modules/everpspopup/views/css/everpspopup.css
/themes/my/css/modules/everpspopup/views/everpspopup.css
/themes/my/css/modules/everpspopup/everpspopup.css
/themes/my/modules/everpspopup/views/css/everpspopup.css

    Mais rien ne passe je comprends pas? une idée?

    Répondre

  24. Bonjour,
    J’utilise Prestashop 1.7. Je veux installer le module everpopup.
    J’ai bien regardé votre vidéo où tout semble simple…
    L’installation se fait bien mais pour la configuration, il me dit
    d’activer les overrides. J’ai essayé plusieurs solutions pour celà,
    mais rien n’a marché? Aucun site ne donne une solution claire, j’ai toujours le même problème. Que dois-je faire?
    Merci d’avance de m’aider

    Répondre

  25. Bonjour,

    A la configuration du module popup de Teamever, j’ai le message « activer les overrides ». J’ai fait plusieurs essais mais rien ne fonctionne. Que dois-je overrider et où?
    Merci d’avance pour votre réponse.

    Répondre

  26. Bonjour,

    super idée le popup. C’est vrai que le Ever Team est au top au niveau des modules gratuits. Par contre le système pour attendre l’ouverture de 5 pages ne fonctionne plus sur la nouvelle version du module.

    Au cas où tu aurais une solution, je serais preneur.

    Merci d’avance

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *