Créer des popup pour Prestashop

Bonjour, aujourd’hui je vais vous présenter le module « Ajax popup » qui vous permet de créer des pop-up pour prestashop avec différents contenus, notamment des pop-up avec du texte, des pop-up qui vont inclure le contenu d’une page CMS, des pop-up qui vont pouvoir inclure des vidéos ou des iframes. Ensuite je vais vous montrer comment intégrer les liens d’ouverture des pop-up. Vous allez pouvoir les mettre notamment dans les descriptions de vos produits ou dans vos pages CMS. Vous allez pouvoir les intégrer directement à vos menus ou directement dans les fichiers de votre thème.

Donc moi, j’ai déjà installé le module. Donc une fois que vous avez installé votre module, vous retournez dans votre menu de gauche, un onglet « opart ajax popup ». Lorsque vous cliquez dessus, vous arrivez sur la gestion des pop-up. Pour créer un pop-up, vous cliquez sur « ajouter ». Le premier champ « titre » correspond au nom de votre pop-up, ça va vous permettre de le retrouver plus facilement dans l’administration et ça va aussi être par défaut, l’encre du lien qui va vous permettre d’ouvrir le pop-up. Donc pour l’exemple, je vais simplement ajouter du texte. Là vous avez l’outil qui vous permet de gérer tout ce qui est police etc, au niveau de votre texte. Par exemple, je peux parfaitement mettre en gras cette partie là, souligner celle-ci, vous pouvez ajouter des images, des liens etc. C’est l’outil classique que vous retrouvez dans la description de vos fiches produits. Le menu « responsive », on va le laisser de côté pour l’instant. Au niveau de la largeur, je vais indiquer 400 pixels et au niveau de la hauteur 400 pixels également. Le champ « lien » se remplira automatiquement une fois que vous allez enregistrer votre pop-up. Voilà, donc j’ai créé mon pop-up, il apparait ici. Je vais récupérer le contenu du champ « lien » donc je clique sur « modifier », j’ai bien mon champ lien qui s’est créé et là j’ai le code du lien qui permet de voir le pop-up. Donc pour l’utiliser je vais aller le copier et je vais aller le coller dans ma description d’une fiche produit. Donc je vais prendre le premier produit et je vais le mettre dans la description courte. Alors la seule chose à savoir c’est que le code que vous avez copié est un code HTML donc vous ne pouvez pas le coller directement en mode texte, il faut que vous passiez en mode code source et que vous colliez le code à l’endroit où vous voulez. Cliquez sur « ok » donc vous avez votre lien qui apparait. On fait « enregistrer » et donc si je vais sur mon produit, j’ai bien mon pop-up de texte qui apparait lorsque je clique dessus, j’ai un pop-up avec le contenu que j’avais indiqué et le pop-up fait bien et bel, 400 pixels de large et 400 pixels de haut.

Donc maintenant je vais vous montrer comment créer un pop-up responsive, c’est à dire un pop-up qui va se redimensionner en fonction de la taille de l’écran de l’utilisateur. Pour ça, je vais retourner dans mon menu pop-up et je vais modifier le pop-up que j’ai créé. Je vais indiquer responsive et une chose importante à comprendre ici, la largeur et la hauteur, lorsque vous êtes en mode responsive ne doivent pas dépasser 100 parce qu’en fait c’est un pourcentage et non plus des pixels que vous indiquez. Donc si vous mettez 100 en largeur et 100 en hauteur, vous allez avoir un pop-up qui va faire la taille complète de l’écran. Pour le coup, je vais mettre 50 et 50 et je vais enregistrer. Quand je regarde les pop-up, les valeurs ici ont été modifiées donc je dois le copier à nouveau, je dois retourner dans mon produit pour le modifier. Comme toute à l’heure, je passe en mode code source, je supprime l’ancien et je mets le nouveau. Je sauvegarde et si je retourne sur ma fiche produit, je rafraîchi, quand je clique dessus, j’ai bien un pop-up qui fait la moitié de la largeur et la moitié de la hauteur de mon écran. Alors une chose qui peut être intéressante de comprendre c’est que vous n’êtes pas obligé de faire la première étape de modification du pop-up. En fait, cette étape de modification du pop-up, elle n’a d’utilité réelle que si vous modifiez le contenu du pop-up en lui même. Parce qu’en fait ces informations là, le mode responsive ou non, la largeur, la hauteur et le titre du pop-up, c’est simplement pour générer le code du lien. Rien ne vous empêche vous derrière d’aller modifier le code du lien directement dans votre code, sans modifier votre pop-up au départ. Je vais vous montrer ce que ça donne, par exemple le pop-up pour le produit « t-shirt à manches courtes », on a indiqué qu’il devait être responsive. Finalement, si je modifie les valeurs qui sont là, je peux le rendre responsive ou pas, changer sa largeur, changer sa hauteur etc. Par exemple, là on a 50 et 50, c’est la largeur et la hauteur, je vais mettre 150 et 150 et là 1 ça veut dire responsive, donc je vais mettre 0, ce qui veut dire non responsive, je fais « ok », « enregistrer », je retourne sur mon produit, je rafraichi et là quand je clique sur mon pop-up, j’ai un pop-up de 150 par 150 qui n’est pas responsive. De la même manière, le texte de votre lien, vous pouvez le modifier directement dans le code de votre lien, sans avoir à modifier le titre de votre pop-up. Là on a mon pop-up de texte. Si je vais dans ma fiche produit, que je modifie au niveau du code source, on retrouve bien mon pop-up de texte ici. Il suffit que je mette autre chose, et je vais avoir une nouvelle encre pour mon lien, qui fonctionne toujours comme toute à l’heure.

Donc maintenant on va voir comment créer un pop-up de type CMS, c’est à dire un pop-up qui va aller chercher le contenu d’une page CMS et pour ça, on va se rendre dans le menu pop-up et vous n’avez pas besoin de créer de pop-up, vous avez juste besoin de créer un lien. Donc dans la partie « aide » vous avez le lien d’exemple pour créer un lien d’ouverture de pop-up, de type CMS avec les explications en dessous. En fait, le premier chiffre correspond à l’ID de votre page CMS, le second la largeur que j’expliquais toute à l’heure, le troisième la hauteur, ensuite il faut indiquer CMS et enfin 0 ou 1 si vous voulez que votre pop-up soit responsive ou pas. Donc la première étape en fait, c’est simplement de repérer l’ID de la page CMS que vous voulez. Pour ça, vous allez dans le menu « CMS », vous avez votre liste de page CMS et ici vous avez l’ID de chaque page. Donc on va prendre par exemple, les mentions légales qui ont l’ID numéro 2. Donc si on regarde il y a quelques lignes de texte. On va se souvenir que l’ID c’est 2, on retourner ici, on va copier le code d’exemple et on va aller le coller dans notre description. Donc je vais le mettre en dessous. On avait dit que le premier chiffre c’était l’ID de la page qu’on voulait, 2. On avait dit que le deuxième chiffre c’était la largeur donc on va mettre 500, la hauteur on va mettre 200 et on va laisser CMS parce que c’est un pop-up de type CMS et on va laisser 0 parce qu’on ne veut pas que le pop-up soit responsive. Dernière chose, j’ai oublié, ici vous avez votre texte, vous le modifier en mettant ce que vous voulez pour le texte de votre lien. Par exemple, on va mettre … . Vous enregistrez et lorsque vous retournez sur votre fiche produit, une fois rafraichie vous avez votre deuxième lien quand vous cliquez dessus, ça ouvre bien un pop-up qui fait la largeur et la hauteur que j’ai indiqué, donc pour le coup c’était peut être un peu court la hauteur que j’ai proposé, avec le texte de la page CMS.

Maintenant je vais vous montrer comment créer un pop-up de type vidéo. En fait, c’est très simple, la première étape c’est de sélectionner une vidéo, donc là j’ai pris une vidéo au hasard, c’est la bande annonce du dernier Xmen. Vous récupérez le code de partage, sur la plupart des plateformes de vidéos comme Youtube, Dailymotion, Vimeo, vous avez toujours un code de partage donc c’est ça qu’il faut récupérer. Vous le copiez, là j’ai une vidéo qui va faire 560 par 315 et vous allez le coller dans un nouveau pop-up. L’important c’est de le coller en mode code source car là encore c’est du code HTML. Vous mettez le titre de votre pop-up, ici il faut mettre des largeurs et hauteurs qui vont permettre à votre vidéo d’être bien intégrée dans le pop-up. Donc en l’occurrence plus large que la vidéo en elle même. Vous faites « enregistrer » et vous récupérez le code de votre lien et toujours comme toute à l’heure, vous pouvez aller le coller dans votre description et toujours en mode code source. Je rafraichi la page, j’ai mon nouveau lien et quand je clique dessus, j’ai mon pop-up avec ma vidéo qui se lance. Alors toute à l’heure, au début de la vidéo, je vous disais qu’on pouvait aussi intégrer des iframes dans les pop-up, en fait c’est ce qu’on vient déjà de faire avec cette vidéo parce que le code que propose Youtube pour intégrer une vidéo c’est une iframe. En fait le code d’une iframe c’est simplement cette partie là. Et la page que vous appelez, son URL se trouve ici donc au lieu de mettre l’URL de la vidéo, on peut très bien mettre l’URL d’un site, en l’occurrence je vais mettre le site de ma boutique. Je sauvegarde, si je retourne sur ma fiche produit, je rafraichi, voilà, j’ai une iframe avec mon site qui apparait derrière. A vous ensuite de gérer les dimensions de l’iframe et les dimensions du pop-up pour que la partie que vous voulez qui s’affiche, s’affiche entièrement sur le site.

Donc là je vous ai montré différents types de pop-up qu’on peut créer. En fait vous avez autant de liberté que vous voulez à partir du moment où vous pouvez mettre du code HTML ici en fait dans vos pop-up. Certains clients par exemple, on créé des tableaux complets pour indiquer un guide de taille de leur vêtement, d’autres affichent un formulaire en JavaScript qui va aller chercher les points relais en fonction d’une adresse. Ca permet au visiteur, par exemple, de savoir s’il peut être livré dans un point relais proche de chez lui, sans aller sur une autre page, ça s’affiche directement dans un pop-up. Donc il y a énormément de choses qu’il est possible de faire avec ce module et tout dépend simplement de vos capacités à générer du code HTML. Il y a beaucoup d’outils qui vous proposent des codes tout fait, comme on l’a vu avec Youtube et les vidéos, il y a beaucoup d’outils qui vous proposent du code tout fait que vous allez pouvoir intégrer dans vos pop-up et afficher du coup sur votre site sans changer de page, ce qui est quand même assez intéressant.

Maintenant je vais vous montrer les différentes façons d’intégrer les liens parce qu’on n’est pas limité à intégrer les liens uniquement dans la description des produits. Depuis le début, j’ai intégré les liens dans la description courte de mon produit, mais rien ne m’empêche de l’intégrer dans la description longue ou sur un autre produit. En fait vous allez pouvoir intégrer vos liens n’importe où, où vous bénéficiez de cet outil qui vous permet d’accéder au code source. Donc là je vais récupérer le code de mon premier lien qui est ici et je vais aller le mettre dans ma description longue. Je sauvegarde, je rafraichi. Ma description longue apparait ici et j’ai bien mon lien qui ouvre mon pop-up. Après vous pouvez par exemple le mettre dans une page CMS. On va prendre les conditions générales de vente. Là vous avez à nouveau l’outil en question et vous allez pouvoir ajouter votre lien dans le code source. Je fais « enregistrer », je vais ouvrir ma page « conditions d’utilisations » donc là j’ai mon lien qui apparait ici et mon pop-up. Donc globalement à chaque endroit où vous allez pouvoir ajouter du code source, vous allez pouvoir ajouter un lien d’ouverture de pop-up. Si vous avez des modules qui vous autorisent à ajouter du code HTML dans le code source, vous pouvez créer un lien. Donc ça vous laisse déjà une très grande liberté à ce niveau là. Donc vous avez vu que vous pouvez intégrer les liens dans tous les endroits où vous pouvez mettre du code source, ça implique que vous pouvez ajouter vos liens directement dans les fichiers du thème de votre site parce que justement c’est du HTML. Donc là, j’utilise un éditeur de texte, un éditeur HTML qui s’appelle Eclipse mais vous pouvez utiliser n’importe quel éditeur de texte capable d’ouvrir du HTML, il y a en énormément. A partir de là, vous repérez le fichier et l’endroit dans le code HTML où vous avez besoin de mettre votre lien et vous le copiez tout simplement parce que là aussi c’est du code HTML qui génère l’affichage de votre site. Donc là je suis  dans le fichier « header tpl » qui affiche le haut de mon thème et je suis en dessous du logo en fait et j’ai rajouté mon lien, un autre texte qui va ouvrir mon pop-up. Je sauvegarde, je retourne sur n’importe quelle page de mon site parce que le header apparait sur toutes les pages de mon site et j’ai bien mon lien qui apparait ici. Quand je clique dessus, j’ai mon pop-up qui s’ouvre. En fait, étant donné que c’est du code HTML vous pouvez faire à peu près ce qu’il vous passe dans la tête à partir du moment où vous maitrisez suffisamment le HTML. Par exemple là, ici on a le lien qui se trouve sur le logo, donc c’est un lien qui existe de base, on peut très bien le modifier en prenant le début et la fin du lien, je vais supprimer ce texte là qui n’a plus lieux d’être et maintenant je vais avoir sur mon logo, là ici, j’ai le code qui fait apparaitre le logo et ici j’ai le code du lien. Donc le lien encapsule le logo. Sur mon logo, maintenant j’ai un lien qui permet de faire apparaitre le pop-up. Je vais rafraichir ma page, un autre texte a disparu, c’est normal et quand je clique sur mon logo, j’ai mon pop-up qui s’ouvre donc vous pouvez ce que vous voulez après. Vous avez vraiment une totale liberté à ce niveau là.

Je viens de vous montrer comment intégrer vos liens en utilisant le code HTML mais dans certains cas, ça peut être intéressant d’intégrer ce type de lien dans un menu et la plupart du temps, ces menus sont générés par des modules qui eux ne vont pas autorisés du code HTML. C’est le cas par exemple du menu horizontal, un menu de base de Prestashop qui affiche par exemple ici, ces quatre liens là. Si on veut rajouter un cinquième lien qui ouvre un pop-up, avec la méthode que je vous ai montré depuis le début, on ne pourra pas. Donc je vais vous montrer comment faire. C’est expliqué dans la documentation du module que je viens d’ouvrir ici. Donc en page 4, vous avez « créer un lien à partir d’un module de menu », et vous avez un exemple de code qui va falloir mettre à la place du lien ou de l’URL du champ URL proposé par le module en question. Donc je vais aller dans le module « haut horizontal » et je vais le configurer. Ce menu me permet de créer des nouveaux liens. Donc je vais ajouter un nouveau lien que je vais appeler « test pop-up menu » et ici je vais coller, dans le lien c’est soit lien soit URL, je vais coller l’exemple que je vais trouver dans ma documentation. En fait vous retrouvez les valeurs qu’on avait toute à l’heure. Ici 3 ça va être l’ID de la page CMS qui va s’ouvrir parce qu’ici on a CMS d’indiqué, 450 c’est largeur, 100 c’est la hauteur et 0 signifie que le pop-up ne sera pas responsive. J’ajoute mon lien, il apparait dans élément disponible et je vais l’ajouter à mon menu. Je fais enregistrer et quand je reviens sur ma page, j’ai un nouveau lien et quand je clique dessus, j’ai un pop-up avec les conditions générales de vente parce que c’est la page CMS qui possède l’ID numéro 3. Après on voit qu’au niveau des dimensions ce n’est pas vraiment adapté, on peut corriger ça très simplement en modifiant le lien en question. Là pour le coup, il est préférable de recoller le code et on va modifier la hauteur, on va mettre 350 par exemple, voilà. Maintenant j’ai les conditions de vente.

Maintenant dernière chose que je vais vous montrer c’est simplement comment à partir d’un lien d’ouverture de pop-up de ce type là, je vais vous expliquer comment générer le lien que vous allez pouvoir utiliser dans des modules de menus. Donc en fait c’est simplement les valeurs que vous retrouvez ici, 4, 615, 315, c’est les valeurs que vous allez devoir remettre dans votre module de menu. Si je prends 4, 615, 315, null et 0. Je retourne dans mon module, « menu haut horizontal », pour le coup je vais juste modifier le pop-up donc on a dit 4, 615, 315, null et 0. Je fais « mettre à jour » et là ça m’ouvrira mon autre pop-up en fait, voilà le pop-up est en iframe. Donc c’est très intéressant parce que ça va vous permettre justement par exemple, avec ce type de menus, d’avoir un lien vers une catégorie, vers une autre et puis au milieu de votre liste de liens, un pop-up qui va ouvrir une vidéo par exemple. Je vous conseille également de visiter ma boutique parce que vous allez trouver un module justement qui reproduit le fonctionnement du menu haut horizontal mais qui a la particularité de pouvoir se positionner aussi bien à gauche, à droite, en haut et en bas de votre site. Ce qui ne nous permet pas de faire le menu haut horizontal, par exemple ici, ce n’est pas forcément possible d’intégrer ce type de lien parce que ce module là ne permet pas de le faire. Avec le module multi menus, vous allez trouver la possibilité de le faire.

Voilà j’espère que cette vidéo vous aura plu. Je vous invite à vous abonnez à ma chaine Youtube, à me suivre sur Google+, Twitter ou Facebook, à visiter ma boutique en ligne et mon blog sur lequel vous trouverez des astuces sur Prestashop.

A très bientôt, merci, au revoir.