Documentation OpartAjaxPopup

Documentation OpartAjaxPopup
Compatibilité :
Ce module est compatible avec la version 1.5 de Prestashop
Installation :
1.
2.
3.
4.
5.
6.
7.
Rendez-vous dans le backoffice puis dans le menu « modules »
Cliquez sur « ajouter un module » puis « choisissez un fichier »
Sélectionnez l'archive opartajaxpopup.zip qui se trouve sur votre ordinateur
Cliquez sur « mettre ce module en ligne »,
Rendez-vous dans « fonctionnalités front-office » et recherchez le module « Op'art ajax popup »
Cliquez sur le bouton « installer »
Une fois le module correctement installé, vous verrez un nouvel onglet nommé « Op'art ajax popup »
dans le menu du haut
Créer un popup :
Survolez le menu op'art ajax popup et cliquez sur « popup ».
Cliquez sur le bouton « créer » pour afficher le formulaire suivant :
Retrouvez d'autres modules sur : www.store-opart.fr
Suivez-moi sur : facebook | google+ | twitter | blog
Ce document ne peut en aucun cas être modifié, revendu ou copié (entièrement ou partiellement) (licence : CC BY-NC-ND 2,0)
1/5
Titre: Il s'agit du nom de votre popup il sera utilisez comme texte pour le lien permettant d'ouvrir le popup.
Code: C'est ici que vous devez enregistrer le contenu qui sera affiché dans votre popup. L'éditeur de texte
est le même que celui utilisé pour enregistrer les descriptions de vos produits.
Largeur: Indiquez ici la largeur en pixel de votre popup.
Hauteur: Indiquez ici la hauteur de votre popup.
Responsive : Si vous désirez que votre fenêtre se redimensionne en fonction de la taille de l'écran de vos
utilisateurs, sélectionnez « oui ».
Attention, lorsque votre popup est définie comme étant responsive, les valeurs en hauteur et largeur seront
définies en pourcentage. Il est donc nécessaire d'indiquer des valeurs comprise entre 0 et 100.
Lien : Vous ne pouvez pas modifier ce champ, il est ici à titre indicatif et sera rempli lorsque vous éditerez
votre popup. Il vous permettra de récupérer le code du lien affichant votre popup.
Une fois le formulaire correctement rempli, cliquez sur le bouton « enregistrer »
Récupérer le lien permettant d'ouvrir votre popup :
Une fois votre popup créé, vous le verrez apparaître dans la liste des popup.
Cliquez sur l'icône modifier pour afficher à nouveau le formulaire.
Cette fois le champ « lien » est rempli et contient le code de votre lien, copiez-le.
Comment utiliser votre code de lien.
Le code que vous venez de copier est du « code HTML », vous pouvez par conséquent l'utiliser partout où il
y aura d'autre code html.
La méthode la plus simple est de l'ajouter dans la description d'un de vos produits.
Rendez-vous dans le formulaire de modification d'un produit et cliquez sur l'onglet « information ».
Dans le champ description repérez l'icône permettant de passer l'éditeur de texte en mode « html ».
Retrouvez d'autres modules sur : www.store-opart.fr
Suivez-moi sur : facebook | google+ | twitter | blog
Ce document ne peut en aucun cas être modifié, revendu ou copié (entièrement ou partiellement) (licence : CC BY-NC-ND 2,0)
2/5
Collez le code du lien dans la fenêtre qui s'ouvre puis cliquez sur mettre à jour.
Cliquez sur le bouton enregistrer
Rendez-vous sur la fiche de votre produit (coté visiteur) et cliquez sur le lien, vous verrez alors le popup
apparaître.
Exemples d'utilisations diverses :
Retrouvez d'autres modules sur : www.store-opart.fr
Suivez-moi sur : facebook | google+ | twitter | blog
Ce document ne peut en aucun cas être modifié, revendu ou copié (entièrement ou partiellement) (licence : CC BY-NC-ND 2,0)
3/5
Afficher une vidéo:
1. Récupérez le code de la vidéo sur Youtube ou Dailymotion (ou n'importe quel autre site de partage
de vidéo).
2. Créez un nouveau popup.
3. Indiquez un titre.
4. Cliquez sur l'icône « html » de l'éditeur de texte.
5. Copiez le code de la vidéo dans la fenêtre qui s'ouvre et cliquez sur mettre à jour.
6. Indiquez une largeur et une hauteur équivalentes ou supérieures aux dimensions de votre vidéo.
7. Enregistrez le tout puis récupérez et utiliser le code du lien comme expliqué précédemment.
Afficher une iframe :
1. Créez un nouveau popup.
2. Indiquez un titre.
3. Cliquez sur l'icône « html » de l'éditeur de texte.
4. Copiez le code de votre iframe ;
Exemple de code d'une iframe :
<iframe style="margin: auto; display: block;" src="http://www.op-art.info" width="1020" height="600"></iframe>
Afficher le contenu d'une page CMS :
Afficher une page CMS dans un popup est un peu particulier, pour cela vous n'aurez pas besoin d'utiliser le
formulaire de création de popup. Il vous faudra créer manuellement votre lien.
Voici par exemple le code d'un lien permettant d'afficher la page CMS dont l'ID est 3
<a href="#" id="opartAjaxPopupId_3_450_100_cms_0" class="opartAjaxPopupLink">Votre texte</a>
Explications :
Il y a 4 informations importantes qui se trouve dans la parenthèse de votre lien (3,450,100,'cms').
3: correspond à l'ID de la page CMS que vous désirez afficher (vous pouvez retrouver l'ID d'une page CMS
dans « préférences/CMS »).
450 : correspond à la largeur de votre popup.
100 : correspond à la hauteur de votre popup.
'cms' : est une indication nécessaire pour que le script comprenne qu'il doit aller chercher une page CMS. (Si
vous oubliez cette information ou si elle est mal renseignée, vous aurez un message d'erreur).
Enfin, il vous faudra modifier les mots « votre texte » pour qu'il s'adapte à ce que vous voulez afficher (par
exemple « cliquez-ici » ou « en savoir plus »).
Autres exemples d'utilisations :
Découvrez quelques exemples d'utilisation sur cette page :
http://blog.manit4c.com/2013/04/19/exemples-dutilisationdu-module-opart-ajax-popup/
Créer un lien à partir d'un module de menu :
Dans certains cas vous voudrez ajouter votre lien dans un menu géré par un module menu.
Si ce module ne vous permet pas d'ajouter le code complet du lien voici un exemple de ce que vous devrez
ajouter dans le champ « url » :
javascript:showOpartAjaxPopup(3,450,100,'cms',0) ;
Retrouvez d'autres modules sur : www.store-opart.fr
Suivez-moi sur : facebook | google+ | twitter | blog
Ce document ne peut en aucun cas être modifié, revendu ou copié (entièrement ou partiellement) (licence : CC BY-NC-ND 2,0)
4/5
FAQ
Retrouvez les questions fréquentes régulièrement mises à jour directement sur cette page :
http://www.store-opart.fr/modules/4-opartajaxpopup.html#faq
Si vous rencontrez des problèmes pour utiliser ce module envoyez un email à [email protected]
Merci de détailler au maximum votre problème en indiquant les messages d'erreurs rencontrés,
éventuellement des captures d'écrans et dans la mesure du possible un lien vers votre boutique où le
problème apparaît.
Retrouvez d'autres modules sur : www.store-opart.fr
Suivez-moi sur : facebook | google+ | twitter | blog
Ce document ne peut en aucun cas être modifié, revendu ou copié (entièrement ou partiellement) (licence : CC BY-NC-ND 2,0)
5/5