Crear pop-ups personalizados en Prestashop 1.6 (muy fácil)

09 julio, 2015 |

Si te gusta, compártelo ;)

Insertar hooks en páginas cms de prestashop 1.6, vista previa

En este tutorial se muestra cómo crear de forma fácil pop-ups personalizados para Prestashop 1.6.

El objetivo será crear un enlace en la descripción de un producto o en una página CMS, y que al hacer clic en este enlace aparezca una ventana a modo de pop-up con el contenido que hayamos preparado previamente.

Primeros pasos...

Primeramente debemos desactivar el uso de la librería HTMLPurifier, esto lo haremos desde nuestro Back-office, desde Preferencias > Configuración.

Desactivar libreria HTML Purifier - crear pop-ups personalizados Prestashop 1.6

No debemos preocuparnos por la recomendación de mantener activada esta opción, cuando acabemos el tutorial podremos activarla de nuevo. La razón de esta desactivación es (al menos para el caso que nos ocupa) que no podríamos insertar estilos CSS en línea. Necesitamos crear un display:none en línea, y si activamos esta opción no se registrará la propiedad display.

Preparando el pop-up...

Aunque como decía al principio del tutorial, es posible crear el pop-up en la descripción de una página CMS, para este caso vamos a hacerlo desde la descripción de un producto concreto.

Por tanto vamos a editar un producto de nuestra elección; debemos abrir el código fuente de la descripción de dicho producto:

Editar la descripción del producto - crear pop-ups personalizados en Prestashop 1.6

Lo que hacemos en esta imágen es convertir el texto "more!" en un enlace:

<a class="myfancybox" href="#myspecialcontent">more!</a>

A continuación insertaremos el contenido que aparecerá al hacer clic en el enlace:

<div style="display: none;">
 <div id="myspecialcontent">
  <p>Contenido personalizado</p>
 </div>
</div>

Observemos la correlación del enlace con este último fragmento. Como vemos el atributo href del enlace tiene el valor #myspecialcontent, éste coincide con el atributo id de la segunda etiqueta <div>, de forma que al hacer clic en el enlace, la etiqueta <div> con id myspecialcontent sea llamada.

He pasado por alto el atributo class del enlace, este atributo contiene el valor myfancybox, éste coincide con un último aspecto de este tutorial...

... El archivo global.js

Debemos buscar y abrir el archivo ../prestashop/themes/default-bootstrap/js/global.js

Dentro de él debemos buscar la siguiente línea:

$(document).ready(function(){

Y a continuación insertar esta línea:

$('.myfancybox').fancybox();

De forma que quede así:

$(document).ready(function(){
 $('.myfancybox').fancybox(); 
 highdpiInit();
 responsiveResize();
 $(window).resize(responsiveResize);
 if (navigator.userAgent.match(/Android/i))
 {
     /* resto del contenido */
    
Como he mencionado antes había una correlación entre el atributo class del enlace more! y la línea que hemos insertado en el archivo global.js, ahora podemos ver que se trata del valor myfancybox. Esta coincidencia es fundamental para nuestro objetivo.

Probar el resultado

Y ahora solo queda ir a la página del producto que hayamos editado y hacer clic en el enlace more! para comprobar el resultado:

Crear pop-ups personalizados en Prestashop 1.6 - resultado final

12 comentarios:

  1. si despues de usarlo un tiempo quiero desactivarlo como lo hago?

    ResponderEliminar
    Respuestas
    1. Hola,
      Tienes dos opciones, puedes quitar el enlace o comentar la línea del archivo global.js, así:

      /* $('.myfancybox').fancybox(); */

      Comentando esta última línea el enlace estará "vacío", por lo que tendrás que asignarle otra URL al enlace.

      Eliminar
  2. Claro,conciso y ameno.
    Gracias

    ResponderEliminar
  3. Thanks i like your blog very much , i come back most days to find new posts like this! Good effort. I learnt it
    prestashop 1.6

    ResponderEliminar
  4. He intentado que salga una imagen en el popup pero no me aparece nada, sólo me salen textos o enlaces, pero nunca imágenes. ¿Tengo que hacer algo especial?

    ResponderEliminar
    Respuestas
    1. Lo que tienes que hacer es, desde la edición de X producto, es insertar una imagen con el botón que hay en el editor por defecto. Te saldrá una ventana en la que puedes subir una imagen o tomar una que tengas en el directorio prestashop/img/cms, que seguramente es el directorio que te saldrá por defecto. Al aparecer la ventana verás (probablemente) la imagen de un edificio.

      Puedes tomar la imagen del edificio y acepar otro cuadro de dialogo hasta que la imagen sea insertada. Todo esto es para que tomes la etiqueta html img y la pongas en el el lugar del texto personalizado. Lo importante es tomar el código que genera prestashop automáticamente al insertar una imagen.

      Luego ya haces lo que quieras con ese fragmento de código. El aspecto del código sería una cosa así:

      <img src="http://localhost/prestashop_1.6/img/cms/cms-img.jpg" alt="" width="370" height="192" />

      Eliminar
  5. El código está muy bien , Lo puse en una tienda con Presta 1.6.1.9 y funciono perfectamente, pero lo pongo en otra con Presta 1.6.1.3 y no sale nada, hago todo exactamente igual que la otra,, porque no me funciona en la segunda ??? ,, no lo entiendo ,, alguien sabría porque ?? ,, gracias y saludos

    ResponderEliminar
    Respuestas
    1. Borra la caché de la tienda y del navegador, tómalo como costumbre porque eso suele pasar a menudo.

      Eliminar
    2. Hola Francisco,
      Gracias por tu respuesta. Lo hice como dices, pero no sale tampoco. En Presta 1.6.1.9 active en CCC las opciones -"Smart Cache" para el código Javascript y -Compresión Javascript dentro del código HTML y fue cuando funciono, pero hago lo mismo en 1.6.1.3 y no va ,,, será algo de la plantilla puesta o de la configuración del Presta 1.6.1.3 , pero ni idea de que es, tu que piensas que puede ser ?? ,,, un saludo

      Eliminar
    3. Hola Francisco ,, ya lo solucione !!!! ,,, funciona muy bien , puse el código de el global.js también en product.tpl y eureka !!! ,,, funciono ,,, gracias por todo !!

      Eliminar