Bonjour à tous,
Sur ma boutique https://www.minceur-forme.fr, je dois afficher une fenêtre popup imposée par mon fournisseur afin de rappeler aux prospects que cette boutique est exploitée par un membre indépendant (moi-même), etc.
Cette fenêtre, que j’ai installée il y a plusieurs années, doit s’afficher à l’arrivée du visiteur sur le site, quelle que soit la page par laquelle il y entre. Le texte y est écrit dans un cadre rectangulaire blanc, entouré d’un voile noir masquant le site.
Dans les thèmes de la nouvelle gamme (je viens d’installer le thème « Terres d’Asie »), les menus sont conçus pour s’afficher par-dessus le reste, ce qui est problématique car le menu horizontal s’affiche par-dessus le voile noir (et même par-dessus la popup en version mobile). En ce qui concerne le menu vertical, ce dernier s’affiche par-dessus la popup si et seulement si je le « fixe » via Configuration -> Apparence -> Navigation et menu -> Menu vertical -> « Fixer le menu vertical », ce qui donne un aspect global vraiment bizarroïde et inesthétique.
Pour corriger cela, je cherche à afficher la popup et le voile noir qui l’entoure par-dessus les deux menus (menu horizontal du haut et menu vertical de droite), sachant que pour que la popup fonctionne, j’ai inséré :
- le fichier javascript « js-include-2.js » (créé par mon fournisseur) dans Stockage -> Fichiers ,
- le code suivant dans Configuration -> Réglages -> Zones Editables -> « Zone en bas de votre site » :
<div id="herbalifepopup"> </div>
<div style="text-align: center;"> </div>
<script src="https://www.minceur-forme.fr/medias/files/js-include-2.js"></script>
- le code suivant dans Configuration -> Réglages -> Zones Editables -> « Styles css supplémentaires » :
@media(max-width:768px){
.herbalife-popup{
max-width: 250px;
}
}
Je colle ci-dessous le contenu du fichier « js-include-2.js » :
// Popup HTML
var varHTML = '<style>html{font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%}body{margin: 0; font-family: \'Helvetica\', \'Arial\', sans-serif !important;}p{margin: 0.5em;}p.para-lead{font-size: 1.2em; margin: 0.75em;}a{background-color: transparent; -webkit-text-decoration-skip: objects}a:active,a:hover{outline-width: 0}#herbalifepopup p,#herbalifepopup h1{font-family: \'Helvetica\', \'Arial\', sans-serif!important; color: #6c6d70!important}.herbalife-popup{position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 999999 !important; text-align: center !important; display: none; color: #6c6d70 !important}.herbalife-bg{position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background: #000 !important; opacity: 0.9 !important; z-index: 999998 !important}.herbalife-wrap{min-width: 400px !important; height: auto !important; max-height: 100% !important; position: absolute !important; top: 50% !important; left: 50% !important; z-index: 999999 !important; transform: translate(-50%, -50%) !important; margin: 0 auto !important; color: #6c6d70 !important;}.herbalife-content{position: relative !important; display: inline-block !important; padding: 15px !important; background: #fff !important; color: #6c6d70 !important}.herbalife-info{position: relative !important; float: left !important; padding: 15px !important; border: 3px solid #7ac142 !important; color: #6c6d70 !important}.herbalife-info h1{width: calc(100% - 2rem) !important; margin: 0 0 15px 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1em!important; font-weight: bold !important; color: #6c6d70 !important}.herbalife-info .herbalife-close{position: absolute !important; top: 5px !important; right: 10px !important; background: #7ac142 !important; border-radius: 50% !important; font-size: 12px !important; font-weight: bold; color: #fff !important; padding: 8px !important; text-decoration: none !important; text-align: center !important; cursor: pointer !important; line-height: 8px;}.herbalife-info .herbalife-close:hover{background: #6c6d70 !important;}.herbalife-info .herbalife-row{position: relative !important; float: left !important; color: #6c6d70 !important}.herbalife-info .left-col{width: 60% !important; position: relative !important; float: left !important; color: #6c6d70 !important}.herbalife-info .left-col.border{width: calc(60% - 16px) !important; padding: 0 15px 0 0 !important; /*border-right: 1px solid #7ac142 !important;*/ color: #6c6d70 !important}.herbalife-info .left-col img{max-width: 100% !important; height: auto; color: #6c6d70 !important}.herbalife-info .left-col img.f-right{float: right !important; margin: 10px 0 0 0 !important; color: #6c6d70 !important}.herbalife-info .right-col{width: 40% !important; position: relative !important; float: left !important; color: #6c6d70 !important}.herbalife-info .right-col.border{width: calc(40% - 15px) !important; padding: 0 0 0 15px !important; color: #6c6d70 !important; border-left: 1px solid #7ac142 !important;}.herbalife-info .right-col p.copy{margin: 15px 0 0 0 !important; font-size: 14px !important; line-height: 13px !important; color: #6c6d70 !important}.herbalife-info .right-col p span{color: #7ac142 !important}.herbalife-info p a{font-weight: bold; text-decoration: none; color: #6c6d70!important}.clear{height: 0px !important; line-height: 0px !important; clear: both !important}@media screen and (max-width:767px){.herbalife-wrap{overflow-y: auto; min-width: 90% !important}.herbalife-info .left-col, .herbalife-info .right-col, .herbalife-info .left-col.border, .herbalife-info .right-col.border{width: 100% !important; margin: 0 0 10px 0 !important; padding: 0 !important; border: 0 !important}.herbalife-info .left-col.border{text-align: center !important}.herbalife-info h1{font-size: 0.95em!important; line-height: 1.2em!important;}.herbalife-info .right-col, .herbalife-info .right-col.border{margin: 0 !important}.herbalife-info .left-col{margin: 0 !important}.herbalife-info .left-col img.f-right{float: left !important; margin: 5px 0 0 0 !important}.para-lead{font-size: 1em!important;}p{font-size: 0.85em; line-height: 1.4em!important;}}@media screen and (min-width:768px){.herbalife-wrap{min-width: 768px !important}}@media screen and (min-width:850px){.herbalife-wrap{min-width: 850px !important}}</style><div id="herbalifepopup"> <div class="herbalife-popup" id="wc_herba_popup"> <div class="herbalife-bg"> </div><div class="herbalife-wrap"> <div class="herbalife-content"> <div class="herbalife-info"><a class="herbalife-close" href="#" onclick="wcHidePopUp()">x</a> <p class="para-lead">Ce site internet est géré par le membre indépendant Herbalife Nutrition: MARIE-CELINE RATIE </p><div class="herbalife-row"> <div class="left-col border"> <h1>DEJA CLIENT?</h1> <p>La relation individuelle avec votre membre indépendant est la clé pour atteindre vos objectifs. Si MARIE-CELINE RATIE n’est pas votre membre, nous vous encourageons à acheter les produits auprès de votre distributeur actuel. Sinon, <a href="#" onclick="wcHidePopUp()">cliquez ici</a> pour poursuivre votre navigation sur ce site. </p></div><div class="right-col border"> <h1>DEJA MEMBRE HERBALIFE NUTRITION?</h1> <p>Pour acheter via votre propre compte d’enregistrement et bénéficier des avantages, veuillez vous rendre sur <a href="https://fr.myherbalife.com/">myherbalife.com</a></p></div></div><div class="clear"> </div></div></div></div></div></div>';
// Write HTML
document.getElementById('herbalifepopup').innerHTML = varHTML;
// Set a cookie
function wcSetCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// Get a cookie
function wcGetCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
// Hide popup
function wcHidePopUp () {
document.getElementById('wc_herba_popup').style.display = 'none'; // or 'block', or whatever.
}
var cookie_content = wcGetCookie('wc_popup_herba');
if (cookie_content != "shown") {
console.log('unset');
document.getElementById('wc_herba_popup').style.display = 'block'; // or 'block', or whatever.
wcSetCookie('wc_popup_herba', 'shown');
}
Sauriez-vous comment faire en sorte que la popup et le voile noir qui l’entoure s’affichent par-dessus les deux menus (menu horizontal du haut et menu vertical de droite) ?
Je vous remercie par avance de toute l’aide que vous pourrez m’apporter,
Bien cordialement,
Marie-Céline
