Widget - popup

Documentation et tutoriels

  • e-majine
  • Module de base

Widget popup

Sommaire

1. Ajouter la configuration dans vos fichier HTML et CSS

2. Configurer le widget

3. Affichage sur le front

  1. Ajouter la configuration dans vos fichier HTML et CSS

Pour ajouter votre widget popup vous devez ajouter les configurations ci-dessous dans le code source de votre e-majine.

Pour cela ouvrez votre application d’accès FTP, connectez vous au FTP de votre CMS et ajoutez les informations suivantes

Condition d’utilisation :

1/ Contenu HTML

1/ Creation du dossier popup

→ dans html/modeles/[langue]/defaut/boxes

2/ Création du fichier

popup.html dans le dossier “popup”

3/ Ajouter le code suivant dans popup.html

<div class="widgetPopup" mxAttribut="id:id" style="display:none">

<div class="popupContent" id="popup-content">

<a id="popup-link" href="#"><img src="" /></a>

<span class="popupClose" id="popup-close">x</span>

</div>

</div>

<mx:text id="popup" />

2/ Contenu css

1/ Ouvrez le fichier style.css

→ dans html/modeles/[langue]/defaut/css/styles.css

2/ Ajouter le contenu ci-dessous

body .widgetPopup {

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

z-index: 9999;

}

body .popupContent {

position: absolute;

top: 41%;

left: 45%;

transform: translate(-41%, -45%);

  width: auto;

  height: auto;

}

@media (min-width: 721px) {

body .popupContent img {

max-width: 600px;

max-height: 300px;

width: 100%;

height: 100%;

}}

@media (max-width: 720px) {

body .popupContent img {

max-width: 575px;

max-height: 384px;

width: 100%;

height: 100%;

}}

body .popupClose {

position: absolute;

top: 3%;

right: 5%;

color: black !important ;

font-size: calc(2vw);

font-weight: bold;

cursor: pointer;

z-index: 2;

}

Nb: Si la popup ne s’affiche pas ou il y a un bug d’affichage , veuillez déplacer  la configuration du widget dans un autre dossier.Si toutefois le problème persiste , il faudra revoir l’intégrations css, il pourrait y avoir un conflit bloquant l’affichage de la popup.

Vous ne pouvez ou ne savez pas le faire vous-même :

Effectuez une demande d’accompagnement →

2. Configurer le widget

Si vous souhaitez afficher une popup sur votre site, voici la démarche à suivre.

Depuis e-majine, dans le menu, cliquez sur “mon site” puis “présentation et widget”.

Vous pouvez sélectionner la rubrique sur laquelle vous souhaitez que votre widget s’affiche.

Vous trouverez à droite une colonne avec tous les widgets disponibles. Faites un glisser-déposer du widget appelé “Popup” dans la zone à gauche de votre choix.

La popup s’affichant par dessus le contenu de votre site, vous pouvez le placer dans n’importe quelle zone sans que cela n’ait d’impact.

Une modale s’ouvre alors vous permettant de configurer la popup.

Nommez le widget et ajoutez l’image de la popup que vous souhaitez afficher.

La popup occupe toujours 60% de la page, jusqu’à une taille de 600 pixels par 300 pixels.

Pour une qualité optimale de cette popup, nous vous conseillons d’importer une image faisant directement cette taille. Pour une popup carré par exemple, importez une image de 300 pixels par 300 pixels.

Vous avez aussi la possibilité d’afficher une popup différente en version tablette/mobile et en version desktop.

Si vous souhaitez activer cette fonctionnalité, décochez la case “utiliser la même image sur toutes les interfaces (desktop, tablette, mobile)”.

Une autre section de sélection d’image va alors s’afficher, permettant de choisir une autre image pour la version tablette/mobile. La popup s'affiche toujours à 60% de la taille de l’écran, jusqu’à une taille de 384 pixels par 575 pixels.

Vous pouvez ensuite indiquer un lien effectif au clic sur l’image.

Enfin, si vous souhaitez que la popup s’affiche après un court délai, vous pouvez indiquer le nombre de secondes dans le champ dédié. Si vous souhaitez qu’elle s’affiche dès le chargement de la page, vous pouvez indiquer 0.


3. Affichage sur le front

1/ Affichage de la popup aux utilisateurs

1/ Temporalité d’affichage

La popup est affichée à chaque nouvelle session de l’utilisateur

2/ Format d’affichage

En version tablette/mobile, la popup s'affiche en vertical, contrairement à la version desktop qui s’affiche en horizontal.

L'image changera de la version desktop à tablette/mobile à partir des écrans faisant 720px de largeur. Pour le tester sur le front, vous devez rafraîchir la page.