Añadir bloques HTML personalizados

rubendigital

¡Hola a todos!

Estoy intentando añadir bloques de HTML personalizados en varias partes de mi tienda PrestaShop, pero me encuentro con problemas cada vez que intento hacerlo directamente. He probado a crear un módulo simple y usar hookDisplayHeader para inyectar el contenido, pero el HTML no se renderiza en la página o simplemente no aparece.

Mi idea era asignar el contenido a Smarty y luego que se mostrara. Aquí el fragmento de código de mi módulo myhtmlblock.php que no funciona como espero:

// modules/myhtmlblock/myhtmlblock.php
class MyHtmlBlock extends Module
{
    // ... (constructor, instalación, etc.)
    public function hookDisplayHeader($params)
    {
        // Esto no me carga el contenido visiblemente en el front-office
        $this->context->smarty->assign([
            'my_custom_html_content' => '<p>Mi bloque HTML personalizado en el header.</p>'
        ]);

El problema es que asigno la variable, pero el contenido HTML nunca se muestra en el cuerpo de la página, solo si lo meto directamente en un .tpl del tema, lo cual no quiero porque se pierde con las actualizaciones. ¿Alguna idea de cómo puedo lograr esto de forma correcta y mantenible?

paula_pro

¡Hola, @rubendigital!

Entiendo perfectamente tu frustración. Eso de las modificaciones que se pierden con las actualizaciones es un clásico de PrestaShop. El hookDisplayHeader está bien para cargar CSS o JS, o quizás metadatos, pero no para contenido HTML visible en el cuerpo de la página. Estás asignando una variable a Smarty, sí, pero ese hook no está diseñado para renderizar una plantilla que muestre ese contenido.

¿En qué versión de PrestaShop estás? Esto es clave, aunque la lógica de los hooks no ha cambiado mucho entre versiones 1.7 y 8.x para este tipo de cosas. Necesitas un hook que esté en una posición del <body> y que además devuelva contenido.

ivan24

@paula_pro tiene razón. He pasado por lo mismo. Intentar meter contenido visible en displayHeader es como intentar colgar un cuadro en el techo en lugar de en la pared; no es su propósito. Yo solía editar los archivos .tpl directamente, como footer.tpl o product.tpl, pero era un dolor de cabeza cada vez que el tema se actualizaba o cambiaba de versión. Al final, lo que te pasa es que el hook está en la sección <head> de tu HTML, por lo que el navegador no renderiza el contenido visualmente.

Para contenido visual, necesitas un hook como displayHome, displayFooter, displayLeftColumn, etc., y dentro de ese hook, tienes que decirle a PrestaShop que renderice un archivo .tpl de tu módulo donde realmente se muestre esa variable Smarty. Si no, solo estás asignando la variable 'en el aire' sin que nada la use.

Milo

Hola @rubendigital y a todos, muy buenas observaciones. @paula_pro y @ivan24 han dado en el clavo. El problema es doble:

Uso incorrecto del hook: El hookDisplayHeader es para la sección <head> de tu HTML. Aunque tu variable se asigna a Smarty, nada la está llamando ni renderizando en el <body>.
Falta de renderizado de plantilla: Incluso si usaras un hook de contenido, necesitas llamar al método display() de tu módulo para que PrestaShop renderice un archivo .tpl específico de tu módulo. Sin esto, la variable de Smarty se asigna, pero no se utiliza en ninguna plantilla para mostrarla.

Estás en PrestaShop 8.1.5, que tiene una arquitectura robusta, pero requiere usar los hooks correctamente. Para tu caso, una solución limpia y mantenible es usar un módulo dedicado para gestionar estos bloques HTML. Los overrides o las modificaciones directas en el tema pueden causar problemas de compatibilidad con futuras actualizaciones de PrestaShop o de tu tema.

Para esto, existe el módulo HTML Box Pro - contenidos personalizados que te permite añadir y gestionar contenido HTML en diferentes posiciones de tu tienda de forma sencilla desde el Back Office, sin necesidad de tocar código. Es la manera más segura y eficiente.

Si aún así quieres implementar esto con código en tu módulo, aquí tienes cómo sería la estructura correcta para un hook de contenido (por ejemplo, displayHome) que renderiza una plantilla:

public function hookDisplayHome($params)
{
    $this->context->smarty->assign([
        'my_custom_html_content' => '<p>Mi bloque HTML personalizado cargado con éxito en el home.</p>'
    ]);
    // Aquí es donde se le indica a PrestaShop que renderice una plantilla
    return $this->display(__FILE__, 'views/templates/hook/myhtmlblock_home.tpl');
}

// Y en tu archivo: modules/myhtmlblock/views/templates/hook/myhtmlblock_home.tpl
// {$my_custom_html_content nofilter}

Con esta corrección, asegúrate de crear el archivo .tpl y luego engánchalo al displayHome desde la sección 'Diseño > Posiciones' en tu Back Office si no lo haces programáticamente en la instalación del módulo. Espero que esto te ayude a aclarar el proceso.

rubendigital

¡Mil gracias, @Milo! ¡Eso era exactamente! Me faltaba el return $this->display(__FILE__, 'views/templates/hook/myhtmlblock_home.tpl'); en mi hook. Había asignado la variable pero no había indicado que renderizara una plantilla, y además el hookDisplayHeader no era el lugar adecuado.

Probé tu sugerencia con el hookDisplayHome y funciona a la perfección. Al final, para no complicarme y tenerlo todo gestionado de forma más visual y sin riesgo de tocar código, he decidido instalar el módulo que has recomendado. ¡Es justo lo que necesitaba para el día a día!

¡Un saludo y gracias por la ayuda tan detallada!