Ventana modal al cargar página en Prestashop

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.