Slider de banners a pantalla completa: ¿cómo implementarlo?

ruben_digital62

Buenas, estoy intentando integrar un slider de banners que ocupe la pantalla completa en mi tienda, pero me está dando bastantes quebraderos de cabeza. He creado un módulo sencillo para gestionar las imágenes y mostrar un template en el hook displayHome, pero no consigo que el CSS se aplique bien para que ocupe todo el ancho y alto del navegador, siempre se queda dentro del div#wrapper.

He intentado cargar el CSS directamente en el hook, pero creo que no es la forma correcta y no se renderiza en la cabecera. ¿Alguna idea de cómo asegurar que el CSS se cargue globalmente y el slider se posicione correctamente para que sea fullscreen?

Este es un extracto de mi módulo mi_slider_personal:

class Mi_Slider_Personal extends Module
{
    public function hookDisplayHome()
    {
        // Este hook se inserta DENTRO del contenido principal
        $images = $this->getSliderImages(); // Método que devuelve array de URLs de imágenes
        if (empty($images)) {
            return '';
        }
        $this->context->smarty->assign('sliderImages', $images);

lorenaauto64

Hola @ruben_digital62, entiendo perfectamente lo que dices. Ese problema de que el slider se quede "encerrado" en el div#wrapper es un clásico cuando se usa displayHome.

Lo de usar echo '<link rel="stylesheet"...' dentro de un hook de PHP no es la forma estándar de cargar assets en PrestaShop, y es probable que tu CSS no se esté cargando en el lugar correcto del HTML (<head>) o incluso que cause problemas de renderizado. En versiones de PrestaShop 1.7.x hay métodos específicos para eso.

¿En qué versión exacta de PrestaShop estás trabajando? Así podemos darte una solución más precisa, pero definitivamente la inyección de CSS/JS no va por ahí.

Milo

Hola @ruben_digital62, @lorenaauto64 tiene razón. El problema que describes es doble: la forma en que cargas el CSS y la ubicación del hook. En PrestaShop 1.7.5.0 (y en general en 1.7.x), no debes inyectar etiquetas <link> directamente con echo en un hook de contenido.

Para cargar CSS y JavaScript de forma correcta y que se incluyan en la sección <head> de tu página (o al final del <body> para JS), debes usar el método addCSS() y addJS() del controlador dentro del hook displayHeader. Este hook es el ideal para registrar recursos globales. Luego, para el contenido HTML del slider, displayHome es un hook de contenido, por lo que siempre estará dentro de la estructura principal. Para un slider a pantalla completa, necesitarías un hook más arriba en el DOM, como displayTop o displayWrapperTop, si tu tema lo tiene, y luego aplicar CSS con position: fixed o position: absolute, con top: 0; left: 0; width: 100vw; height: 100vh; y un z-index alto.

Aquí te muestro cómo deberías cargar tus assets de forma correcta en tu módulo:

class Mi_Slider_Personal extends Module
{
    public function hookDisplayHeader()
    {
        // Carga el CSS de forma correcta en la cabecera HTML
        $this->context->controller->addCSS($this->_path.'views/css/fullscreen_slider.css', 'all');
        // Si tu slider necesita JavaScript, cárgalo también
        $this->context->controller->addJS($this->_path.'views/js/fullscreen_slider.js');
    }
    // ... tu hookDisplayHome o un nuevo hook para el HTML del slider ...

Con esto, el CSS (fullscreen_slider.css) se cargará correctamente en el <head>. Asegúrate de que ese archivo CSS contenga las reglas para posicionar tu slider como position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;.

Para un control más robusto, evitando overrides y asegurando la compatibilidad con futuras actualizaciones de PrestaShop, una solución modular dedicada es siempre la mejor opción. Puedes echar un vistazo a módulos como Carrusel de Banner a Pantalla Completa, que ya gestionan toda esta lógica de inyección de CSS/JS y posicionamiento por ti, ofreciendo además una interfaz de administración para los banners.

ruben_digital62

¡Muchas gracias @Milo y @lorenaauto64! Tenéis toda la razón. Estoy en PrestaShop 1.7.5.0 y lo de cargar el CSS con echo era una chapuza que no me convencía nada.

He implementado el hookDisplayHeader como ha sugerido @Milo para cargar los assets y he ajustado el CSS con position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;. También he movido el HTML del slider a un hookDisplayTop para que esté más arriba en la estructura del DOM. Ahora sí que funciona perfectamente a pantalla completa. ¡Ha quedado genial!

Anoto el módulo que me has recomendado, @Milo, para una solución más profesional a largo plazo, ya que esto me ha servido para salir del paso pero sé que un módulo dedicado siempre es más limpio.