Ventana modal al cargar página en Prestashop

30 marzo, 2015 |

Si te gusta, compártelo ;)

Ventana modal en Prestashop al cargar página

Shadowbox es un plugin JavaScript basado en LightBox, con la diferencia de que Shadowbox no solo permite cargar imágenes en ventanas modales, además permite cargar páginas web, documentos html, archivos flash, galerías, y videos en diversos formatos de distintos servicios.

Aplicando esto a nuestra tienda Prestashop podemos cargar una ventana al entrar (cargar) en determinada página. Por ejemplo, podemos cargar una imagen con una determinada oferta en la página de una categoría concreta, o en una página CMS. También podría servirnos para notificar a nuestros clientes cualquier información importante; esto ya depende de nuestras necesidades.


Compatibilidad: Prestashop 1.5 y
Prestashop 1.6

Descargar los archivos del proyecto

Lo que vamos a hacer...

Solo vamos a necesitar cargar un archivo .js para lograr nuestro objetivo. Y aunque Shadowbox se apoya en jquery no vamos a necesitar cargar esta librería, pues ya se encuentra de forma nativa en Prestashop.

Así que, para comenzar debemos abrir el archivo header.tpl, localizado en la carpeta de nuestro theme.

Debemos pegar el siguiente código justo antes de </head>:

{if $page_name == 'category' and $category->id == 3}

<script type="text/javascript" src="{$js_dir}shadowbox.js"></script>
<script type="text/javascript"> 
Shadowbox.init({ language: "es", players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); 
</script>

<script type="text/javascript"> 
 $(document).ready(function(){
 setTimeout(function() {
 Shadowbox.open({
 content:    '<div><img src="{$img_dir}ofertas.png "></div>',
 player:     "html",
 title:      "Oferta",
 width:      762,
 height:     558
 });
 }, 50);
 });
</script>

{/if}
Explicación:
Como vemos en el código anterior, comprobamos previamente (mediante {if}) que nos encontramos en una página de tipo categoría en nuestra tienda, y cuyo id de categoría sea igual a 3. Si estas condiciones se cumplen se ejecutará el código necesario.
De esta forma podemos elegir en qué categoría queremos que se cargue la ventana.

Los ids de todas las categorías podemos consultarlos en nuestro Back-Office siguiendo la ruta Catálogo -> Categorías.

A continuación insertamos la función javascript necesaria para cargar la ventana al iniciar la página. Merecen nuestra atención los siguientes parámetros:

  • content: El contenido de la ventana modal. En este caso cargamos una imagen.
  • player: El tipo de visualizador, los tipos se encuentran en este mismo código, pueden ser img, html, iframe, qt, wmp, swf o flv .
  • title: El titulo de la ventana.
  • width: La anchura en pixels de la ventana.
  • height: La altura en pixels de la ventana.

El último parámetro (50) corresponde al tiempo en milisegundos que tarda en aparecer la ventana tras la carga de la página.

Las variables {$js_dir} y {$img_dir} equivalen respectivamente a prestashop/themes/nuestro_tema/js/ y prestashop/themes/nuestro_tema/img/, por lo que el archivo javascript y la imagen debemos insertarlos en esas rutas.

Por último, e imprescindible, debemos agregar un poco de CSS.

CSS para la ventana modal

Debemos agregar el siguiente código CSS en el archivo ../prestashop/themes/nuestro_tema/css/global.css

/* Ventana ShadowBox */

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;z-index:9999}
#sb-overlay{position:relative;height:100%;width:100%;z-inde}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(../img/close.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}

Y con esto hemos terminado. Aquí tenéis un demo.

10 comentarios:

  1. Hola, una pregunta como hago para que solo se vea en el index.php :)

    ResponderEliminar
    Respuestas
    1. En vez de {if $page_name == 'category' and $category->id == 3}

      pones esto:

      {if page_name == 'index'}

      Eliminar
  2. Buenos días, he seguido los pasos para mostrar el modal en la pantalla de inicio pero no muestra nada.

    He modificado la condición del if para que se vea en la pantalla inicial.

    Muchas gracias de antemano

    ResponderEliminar
  3. Disculpa, ya está solucionado, no habia vaciado la caché. Ya funciona correctamente.

    Muchas gracias por el aporte

    ResponderEliminar
  4. Buenos días,lo primero muchas gracias!! lo estoy utilizando y perfecto.

    Lo estoy utilizando en el index pero...¿cómo tendría que hacer para que se habriera en cualquier página? lo digo porque si un usuario entra a la web directamente a la página de un producto desde google no lo vería.

    Muchas gracias de antemano.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola, que se abra en todas las páginas es excesivo, porque se abriría en todas las páginas del carrito, por ejemplo. Pero si por ejemplo quieres que se cargue solamente en las páginas de categoría y producto, lo cual sería más lógico, podrías utilizar el condicional del siguiente modo:

      {if $page_name == 'product' || $page_name == 'category'}

      Eliminar
    2. tienes toda la razón. voy a añadirle la condición que me indicas.

      Muchas gracias de nuevo y por tu rápida respueta.

      Saludos

      Eliminar
    3. Perdona que te moleste de nuevo... ¿Sería posible en este mismo código hacer que sólo se muestre una vez por sesión? Me refiero a que si un cliente navega por diferentes páginas de mi tienda online no se le muestre en cada una de ellas.

      Muchas gracias de antemano.

      Eliminar
    4. Hola, lo siento, pero eso ya es más difícil, hay que utilizar variables de sesión, bien de Javascript o de PHP.

      Eliminar
  5. Muchas gracias de todas formas. Como de momento va a ser sólo para estas fechas lo mantendré con la modificación que me dijiste antes. A ver si tengo tiempo y busco una solución (si la encuentro os lo diré)

    Muchas gracias por todo !!

    ResponderEliminar