Mover módulo homeslider en prestashop al hook top de la página

A continuación explicaremos los pasos que hay que realizar en la configuración de Prestashop para mover a la parte superior de la página, justo debajo del menú horizontal, el módulo ‘homeslider‘.

El módulo ‘homeslider’, por defecto, se utilza en Prestashop para mostrar una serie de imagenes como diapositivas en la página inicial de la tienda. Pero como todos los módulos de Prestashop, se puede configurar en qué área de trabajo se quiere situar.

El problema que presenta el módulo ‘homeslider‘ es que inicialmente no viene configurado con la posibilidad de moverlo a ese aŕea de trabajo de la cabecera de la página, conocido como ‘hookDisplayTop’.

Para poder hacerlo, hay que realizar unos cambios en el fichero que se encuentra en el raíz de la instalación de Prestashop, dentro de la carpeta ‘~/module/homeslider/homeslider.php‘.

Si vemos el contenido del fichero, veremos que sólo tiene definido como área de trabajo  ‘hookDisplayHome‘. Esta área de trabajo es la que se muestra en el panel central de la página. Ahora le que queremos hacer es añadir también el área de trabajo ‘hookDisplayTop‘.

Configurar la plantilla del módulo para permitir mover ‘homelslider’ al area de trabajo ‘hookDisplayTop’

Para configurar que el módulo pueda ser mostrado en el área de trabajo ‘hookDisplayTop’ debemos introducir las siguiente líneas al final en el fichero:

‘~/module/homeslider/homeslider.php‘

 PHP | 
 
 copy code |
?

01
02
public function hookDisplayTop($param) {
03
 
04
if(!$this->_prepareHook()){
05
     return;
06
}
07
 
08
// Comprobar si se trata del tema para móviles
09
if ($this->context->getMobileDevice() != false){
10
     return false;
11
}
12
 
13
// Añadir los ficheos Js y Css que se necesitan
14
$this->context->controller->addJS($this->_path.'js/jquery.bxSlider.min.js');
15
$this->context->controller->addCSS($this->_path.'bx_styles.css');
16
$this->context->controller->addJS($this->_path.'js/homeslider.js');
17
 
18
// Fichero con la template del homeslider
19
return $this->display(__FILE__, 'homeslider.tpl');
20
 
21
}

Una vez realizado este paso, hay que compilar las plantillas. Prestashop permite configurar esta compilación para que se realice automáticamente. Para ver si está configurado así hay que ir al menú  ‘Parametros avanzados > Rendimiento‘ y comprobar si está marcada esta opción de complicación:

Mover el módulo homeslider a la nueva posición

El siguien paso es proceder a mover el módulo ‘homeslider’.  Para ello hay que:

1. Acceder a la pestaña ‘Módulos->Posiciones‘. En esta ventana se muestran los módulos activos y las posiciones en las que se están mostrando dentro de la página.
2. Eliminar el módulo ‘homeslider‘ de la posición en la que se encuentra actulamente.

   

3. Hacer click en el botón ‘Trasladar un módulo‘ como se indica en la siguiente imagen:

   

4. En la siguiente vista seleccionar el módulo que se va a mover, identificado por ‘Image de control deslizante para su página web’,  y la posición en la que se quiera dejar, en este caso debería quedar de la siguiente forma:

   

5. Haciendo click en el botón ‘Guardar‘ el módulo ‘homeslider’ aparecerá en la nueva posición. Si todo ha ido bien deberemos ver el siguiente mensaje ‘Módulo copiado correctamente al hook‘. En caso de ver un mensaje que diga que el módulo no se puede mover a ese hook, revisar que estén recompiladas las plantillas y eliminar el módulo de la posición en la que se encuentra actualmente y repetir de nuevo los pasos de este tutorial.

Si accedemos de nuevo a la tienda Prestashop, veremos que el homerslider de imágenes aparece ahora en la parte superior de la ventana. Para centarlo horizontalmente habría que editar editar el CSS:

NOTA: en caso de acceder a la vista y ver nuestra página con un aspecto similar al que muestra la siguiente imagen, en la que no se vería el ‘homeslider’ en la posición que hemos configurado, deberemos borrar la caché de nuestra tienda, eliminado lo que haya en la carpeta ‘~/cache/’. Hecho esto si volvermos a entrar en la tienda ya veremos en homeslider como en la imagen superior:

Centrar el módulo ‘homeslider’ en la ventana, editar estilos css

El fichero que hay que editar ahora es ‘~/modules/homeslider/bx_styles.css‘.

El primer cambio es añadir:

 CSS | 
 
 copy code |
?

1
.bx-wrapper {
2
    margin-bottom:20px;
3
    height:300px;
4
    clear:both;
5
}

Tras este cambio, la imágen se verá ya en su tamaño original, con los números de las diapositivas a la derecha. Ahora entrar en la configuración del módulo y editar las imágenes y el resto de parámetros.

Por defecto, el ancho del módulo ‘homeslider’ es de 979px, este ancho está configurado en los estilos de todos  los ‘grids‘ en el fichero de estilos ‘global.css‘.

Como únicamente queremos cambiar la propiedad el ancho para el módulo ‘homeslider’, podemos añadir la siguiente línea al fichero ‘~/module/homeslider/js/homeslider.js‘ indicándole el ancho que se quiera configurar (500px en este ejemplo):

 Javascript | 
 
 copy code |
?

1
$(".bx-wrapper,.bx-window").width("500px");

Con estos pasos ya tendremos el módulo ‘homeslider’ en la parte superior de la ventana y centrado horizontalmente.

Si tienes dudas, comentarios o sugerencias no dudes en dejarnoslos.

Sobre David Otero

David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.

Find more about me on:
• 
• 
• 
•