-
Présentation générale
Le module popup va vous permettre d'afficher beaucoup de contenu (texte, images, etc...) sans dénaturer la mise en page de vos boutiques zlio. Notre module Popup par défaut s'intégre facilement sur tous types de boutiques (voir rubrique "intégration") mais si vous êtes à l'aise avec les langages de programmation internet (CSS, HTML,...) n'hésitez pas à customiser et/ou modifier les paramètres de vos popups.Popup par défaut
La popup par défaut est de taille 600x350 pixels (largeur x hauteur) et n'utilise pas d'effet particulier pour son affichage. Si vous avez besoin d'adapter les dimensions ou si vous souhaitez ajouter un effet pour son affichage, vous pouvez consulter les rubriques "customisation" et "paramétrage".
voir une démonstration
Crédits
Notre module popup est basé sur le plugin JQuery jqModal. -
Comment intégrer des popups sur votre boutique zlio?
1e Etape : Insertion du code javascript
Cliquez gauche sur les lignes de code suivantes, puis faites Ctrl+A pour sélectionner tout le code. Ensuite faites Ctrl+C pour copier le code. Connectez vous à votre interface d'administration, sélectionnez l'onglet "aspect" puis "En-tête & Pied de page (HTML)". Cliquez gauche sur la zone pied de page HTML pour faire apparaître le curseur. Finalement faites Ctrl+V pour coller les lignes de code. N'oubliez pas de "Sauver" vos modifications.
Script pour Boutique V3.5 :
Script pour Boutique V3.0 :
Remarque : certaines lignes de code sont communes aux différents modules javascript yoja. Si vous avez déjà intégré un module yoja sur votre boutique, vérifiez de ne pas insérer deux fois les mêmes lignes (par exemple jquery-1.2.1.js et yoja.core.js)
2e Etape : Création du contenu de votre popup
Il suffit d'insérer sur votre boutique le code HTML suivant et d'adapter le contenu comme vous le souhaitez. Vous pouvez insérer ce code n'importe où sur votre boutique, par exemple dans les zones "En-tête & Pied de page (HTML)" de l'onglet "aspect" de votre console d'administration.
A noter l'utilisation de l'attibut "id" qui représente l'identifiant unique de votre popup dans la page. Cet identifiant vous permettra de customiser et de paramétrer votre popup (à voir rubrique "customisation" et "paramétrage").3e Etape : Créer les boutons qui vont permettre d'afficher votre popup
Votre popup apparaîtra lorsque l'utilisateur cliquera sur un bouton (plusieurs boutons peuvent ouvrir une même popup). Vous pouvez créer différents type de bouton comme par exemple :
- un lien texte
- une image
- etc... il suffit d'ajouter la class "myPopupTrigger" qui est contruit à partir de l'id de votre popup "myPopup" et du suffixe "Trigger"
En utilisant les principes ci-dessus vous pourrez créer autant de popups que vous le souhaitez.Besoin d'aide ?
Si vous rencontrez des problèmes pour intégrer le gadget popup sur votre boutique, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique. -
Comment modifier les paramètres de vos popups ?
Pour modifier les paramètres de vos popups, il suffit d'insérer le code suivant juste après les lignes de code présentées dans la partie "Intégration" et de modifier l'identifiant (ici "myPopup") en fonction de l'identifiant de votre popup.
Liste des paramètres disponibles
Voici la liste des tous les paramètres disponibles :animation Permet de déterminer l'animation à utiliser pour l'affichage de votre popup. A choisir parmi "appear", "slideHorizontal", "slideVertical", "grow", "none" (valeur par défaut) speed La vitesse de l'animation. Peut valoir "slow", "normal" ou "fast" ou encore une durée en millisecond (ex: 300). Valeur par défaut : 250 modal Si ce flag est positionné à true, la popup est de type modal, c'est-à-dire que vous ne pourrez plus intéragir avec le reste de la page (voir également le paramètre overlay). Par défaut à false. Si cette valeur est à false et que le paramètre overlay est différent de 0 alors le clic en dehors de la popup ferme la popup. overlay Exprime la transparence en pourcentage de la zone overlay, c'est à dire la zone qui entoure la popup. Valeur par dèfaut : 50. Si overlay vaut 0 alors la zone est desactivée et on peut intéagir avec le reste de la page closeClass La class CSS qui identifira les boutons de fermeture de la popup. Par défaut "yojaClose" overlayClass La class CSS qui identifira la zone autour de la popup. Par défaut "yojaOverlay" ajax Permet de charger la popup avec les données d'une autre page, exemple ajax:"mapage.html" target La class CSS qui identifira la zone où charger les données du paramètre ajax. Paramètre facultatif.
-
Comment customiser votre popup ?
Si vous souhaitez customiser votre popup, changer sa taille ou encore modifier sa position sur l'écran vous pouvez ajouter le code CSS suivant en modifiant l'identifiant (ici "myPopup") en fonction de l'identifiant de votre popup puis en adaptant les propriétés par défaut suivantes.
Comment customiser la zone externe à la popup?
La zone dite "overlay", zone externe à la popup peut être personnalisée. Il suffit ajouter le code CSS suivant en adaptant les propriétés. Vous pouvez également définir un overlay différent pour chacune de vos popups en utilisant la propritété "overlayClass" (voir rubrique "Paramétrage").
Si vous avez des problèmes pour customiser votre popup, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique.
 |
||||||||||||||||||||||
|
||||||||||||||||||||||
 |
