¿Cómo implementar un slider en la página de inicio?

raul_digital

Hola a todos,

Estoy intentando añadir un slider de imágenes en la página de inicio de mi tienda, pero me está costando un montón hacerlo de forma robusta. He intentado varias cosas y o bien no aparece, o se carga mal, o me rompe el diseño del tema.

Mi idea era hacer un pequeño módulo para gestionar esto, pero me encuentro con que el hookDisplayHome no me gestiona bien los estilos y scripts, y si intento meterlos directamente en el .tpl o en el core, sé que me va a dar problemas en cuanto actualice PrestaShop. He intentado esto en mi módulo:

public function hookDisplayHome($params)
{
    // Esto es un intento simple, pero el contenido no se renderiza bien o no aparece.
    // ¿Dónde meto los CSS y JS para que no me rompa nada?
    $slides = [
        ['image' => 'img/slide1.jpg', 'title' => 'Oferta Verano'],
        ['image' => 'img/slide2.jpg', 'title' => 'Nuevos Productos']
    ];
    $this->context->smarty->assign('mySlides', $slides);
    return $this->display(__FILE__, 'module:mymodule/views/templates/hook/myslider.tpl');

El myslider.tpl es un HTML básico con un bucle para mostrar las imágenes. El problema es que no veo la forma correcta de cargar los CSS y JS asociados a este slider sin hacer un "hack" que luego me penalice.

¿Alguna idea de cómo debería enfocarlo para que sea compatible y no me genere conflictos?

hugoonline

Hola @raul_digital, entiendo perfectamente tu frustración. Esto de los sliders siempre es un quebradero de cabeza en PrestaShop si no se hace bien.

Lo primero de todo, ¿qué versión exacta de PrestaShop estás usando? Saber si es PS 8.x o alguna anterior ayuda mucho a entender cómo se deben cargar los assets (CSS/JS).

Respecto a tu código, el hookDisplayHome está bien para el HTML del slider, pero como bien dices, no es el lugar para los scripts y estilos. Si los metes ahí directamente, lo más probable es que se carguen de forma asíncrona o en un lugar incorrecto del DOM, rompiendo el diseño o la funcionalidad JavaScript. Necesitas un hook diferente para los assets.

fernando_lab

Justo como dice @hugoonline, el hookDisplayHome es solo para el contenido. Yo tuve un problema similar con un carrusel de marcas y la solución fue usar hookHeader para todo lo que fueran recursos (CSS, JS) y luego en hookDisplayHome solo el renderizado del HTML.

@raul_digital, asegúrate también de que tu myslider.tpl esté en la ruta correcta y que el módulo lo pueda encontrar, aunque si se rompe el diseño, el problema principal es la carga de los estilos, no tanto la ruta del tpl.

Milo

Hola @raul_digital,

Los compañeros @hugoonline y @fernando_lab han dado en el clavo. Para cargar correctamente los archivos CSS y JavaScript de tu slider, debes utilizar el hookHeader. Este hook es el lugar apropiado para inyectar recursos en la sección <head> de tu página, asegurando que se carguen antes del contenido y que el navegador los interprete correctamente.

Aquí te muestro cómo deberías estructurar tu módulo para registrar ambos hooks y cargar tus assets de forma correcta:

public function install()
{
    return parent::install() &&
           $this->registerHook('displayHeader') &&
           $this->registerHook('displayHome');
}
public function hookDisplayHeader($params)
{
    // Carga tus archivos CSS y JS aquí
    $this->context->controller->addCSS($this->_path.'views/css/myslider.css');

Con este enfoque, myslider.css y myslider.js se cargarán en el <head>, y luego el HTML de tu slider se renderizará en displayHome. Asegúrate de que los archivos myslider.css y myslider.js existan en las rutas especificadas dentro de tu módulo (views/css/ y views/js/ respectivamente).

Es importante recordar que manejar sliders personalizados con código puede ser complejo y propenso a errores en actualizaciones o cambios de tema. Para una solución más mantenible y con más funcionalidades, te recomiendo explorar una solución para deslizador de que ya esté probada y optimizada para PrestaShop.

raul_digital

¡Muchas gracias @Milo y a todos! Con la explicación de los hooks displayHeader y displayHome y el código de ejemplo, pude entender y aplicar la solución perfectamente. Ahora el slider se carga con sus estilos y scripts sin romper nada y funciona de maravilla. También he visto la recomendación del módulo, lo tendré en cuenta para futuras mejoras o si necesito más funcionalidades de gestión. ¡Problema resuelto!