fbpx

Crear módulo de popup para contactos en Prestashop

Amigos míos aquí les dejo este pequeño código calientito, no se olviden de 2 cosas muy importantes bajar el modulo gratuito de contentbox.org

y SUSCRIBIRSE AL CANAL PARA PODER SEGUIR APRENDIENDO JUNTOS

MIRA EL PROCESO EN https://youtu.be/PP2oRkvfaQY 

 

/*HTML*/

<p><img onclick=”ocultarMostrar()” src=”https://farmaciacontigo.martatorre.dev/img/cms/widget-sello.png” alt=”” width=”110″ height=”110″ class=”contacto-flotante” /></p>
<p></p>
<div id=”ventana-contacto” class=”ventana-clases”>
<h3 style=”font-family: SerreriaSobria;”>RECOMENDACIONES, DUDAS SOBRE UN PRODUCTO, CONSEJOS…</h3>
<p style=”font-family: raleway;”>Queremos ayudarte a encontrar la mejor solución a tu problema. Escríbenos, llámanos, envíanos una foto… ¡estamos aquí para ayudarte!</p>
<br /> <i class=”far fa-phone-alt icopop”></i> <a class=”textpop”> 999 999 999</a><br /> <i class=”fab fa-whatsapp icopop”></i> <a class=”textpop”> 675 593 737</a><br /> <i class=”far fa-envelope icopop”></i> <a href=”mailto:correo@dominio.com” class=”textpop”> o escríbenos por aquí</a></div>

/*CLASE BOTON CONTACTO*/

.contacto-flotante {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 100;
}

.ventana-clases {
background: #fdd8ad;
color: #333;
width: 474px;
padding: 30px;
height: 332px;
position: fixed;
bottom: 25px;
right: 25px;
z-index: 99;
border-radius: 0 0 45px 0;
display:none;
}

/*FUNCION JS*/
function ocultarMostrar() {
var x = document.getElementById(“ventana-contacto”);
if (x.style.display === “none”) {
x.style.display = “block”;
} else {
x.style.display = “none”;
}
}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Whatsappea
¿Hola necesitas información?