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 !

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (11 votes, moyenne : 4,45 sur 5)
Loading...

27 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.

    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 !

  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 ?

    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 !

  3. 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é.

      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

  4. 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.

  5. 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é 😉

  6. 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

    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 !

  7. 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 !

    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 !

  8. 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 ?

      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.

        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 ^_^

  9. 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

  10. 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 ?

    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 !

Laisser un commentaire

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