¿Cómo integrar un slider emergente?

alberto_bici

Hola a todos,

Estoy intentando añadir un slider emergente (popup slider) a mi tienda PrestaShop para mostrar promociones especiales, pero me está dando bastantes dolores de cabeza. He intentado varias soluciones basadas en overrides o directamente inyectando código en el hookDisplayHeader, pero siempre acabo con problemas, o no se muestra bien, o el JS no carga, o simplemente se rompe algo al actualizar el tema.

Mi último intento fue algo así en el método hookDisplayHeader de un módulo personalizado, esperando que inyectara el HTML y JS necesarios:

public function hookDisplayHeader()
{
    // Esta aproximación está dando problemas con el renderizado y los assets JS/CSS
    $this->context->smarty->assign([
        'popup_content' => '<div id="my-popup-slider">...</div>',
        'show_promo_popup' => true,
    ]);
    return $this->display(__FILE__, 'views/templates/hook/popup_slider.tpl');
}

El problema es que el popup_slider.tpl no siempre carga los estilos o el JavaScript asociado correctamente, y el slider no funciona. Me temo que estoy perdiendo el contexto de los assets o no es la forma adecuada en PrestaShop 9. ¿Alguna idea de cómo abordar esto de forma robusta?

ignacio_tech

@alberto_bici Entiendo perfectamente tu frustración. La verdad es que integrar elementos dinámicos como un slider en un popup puede ser complicado si no se gestionan bien los assets.

Lo que te pasa es un clásico cuando intentas inyectar directamente HTML con JS y CSS asociados desde un hook tan temprano como displayHeader. El problema es que solo estás devolviendo el contenido Smarty, pero no estás registrando explícitamente los archivos JS y CSS para que PrestaShop los cargue correctamente en el frontend. Podrían estar siendo bloqueados o simplemente no se están encolando en el orden correcto.

Por cierto, ¿qué versión exacta de PrestaShop estás usando? Saberlo ayuda mucho, porque la forma de gestionar los assets ha cambiado un poco entre versiones, especialmente con la llegada de Symfony y el tema Hummingbird.

Milo

Hola @alberto_bici y @ignacio_tech,

@ignacio_tech ha dado en el clavo. El problema principal es que en PrestaShop 9 (y en las versiones recientes en general), para que un componente complejo como un slider emergente funcione correctamente, no basta con renderizar su plantilla HTML. Es crucial que los archivos JavaScript y CSS asociados se registren y carguen en el momento y lugar adecuados, y que el JS tenga acceso al DOM una vez que esté listo.

Tu snippet inicial devuelve la plantilla, pero no le dice a PrestaShop que también necesita cargar popup_slider.js y popup_slider.css. Para hacerlo de forma robusta, debes usar los métodos addJS y addCSS del controlador de la página. Aquí te muestro cómo podrías adaptar tu hookDisplayHeader:

public function hookDisplayHeader()
{
    // Registrar los archivos JavaScript y CSS del slider
    $this->context->controller->addJS($this->_path.'views/js/popup_slider.js');
    $this->context->controller->addCSS($this->_path.'views/css/popup_slider.css');
    // Asignar variables al Smarty si la plantilla lo necesita
    $this->context->smarty->assign([
        'popup_id_unique' => 'my-custom-popup-'.uniqid(),
    ]);
    return $this->display(__FILE__, 'views/templates/hook/popup_slider.tpl');

Con esto, te aseguras de que tanto el JavaScript como el CSS se encolen y carguen con el resto de los assets de la página. Tu popup_slider.js debería entonces contener la lógica para inicializar el slider y mostrar el popup una vez que el DOM esté cargado (por ejemplo, usando DOMContentLoaded).

Sin embargo, para una solución más completa y mantenible que no requiera tocar código directamente y que te ofrezca opciones de configuración desde el Back Office (frecuencia, contenido, diseño, etc.), te recomiendo usar un módulo dedicado. Para este tipo de funcionalidad, Animación del deslizador en ventana emergente es una opción muy buena y evitará que estos cambios se rompan con futuras actualizaciones de PrestaShop o de tu tema.

alberto_bici

¡Muchas gracias, @Milo y @ignacio_tech!

@ignacio_tech, estoy usando PrestaShop 9.2.0 con PHP 8.2. Lo de la gestión de assets tenía sentido y @Milo lo ha explicado perfectamente.

He probado a añadir las líneas addJS y addCSS como sugirió @Milo, y de repente el slider funciona. ¡El JavaScript y el CSS se están cargando correctamente ahora! Realmente era un problema de encolado de assets. Para una solución más a largo plazo y con más opciones, voy a investigar el módulo que me has recomendado, @Milo, porque la idea de no depender de mi propio código para algo tan visible es muy tentadora. Pero para entender el problema, tu explicación ha sido clave. ¡Problema resuelto!