Widget de Twitter en PrestaShop: ¿cómo implementarlo?

irene_online

Hola a todos,

Estoy intentando añadir el widget de Twitter (el timeline embebido) en mi tienda PrestaShop. He probado de varias maneras, incluyendo añadir el script directamente en un override de un .tpl o en un hook displayHeader desde un módulo simple, pero siempre me da problemas. O no carga, o se rompe tras alguna actualización del tema, o con las nuevas versiones de PHP.

Mi última aproximación fue crear un módulo y tratar de añadirlo así:

class MyTwitterWidget extends Module
{
    public function __construct()
    {
        // ... constructor code ...
    }

    public function install()
    {
        return parent::install() && $this->registerHook('displayHeader');
    }

    public function hookDisplayHeader($params)
    {
        return '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>';
    }
}

El script parece que se inyecta, pero el widget no siempre se muestra o a veces interfiere con otros scripts. ¿Hay alguna forma más robusta y 'a prueba de futuro' de hacer esto en PrestaShop 8?

inmaes82

@irene_online Entiendo tu frustración. Ese método de devolver el script directamente en un hook suele ser problemático. PrestaShop tiene su propio sistema para gestionar los assets JavaScript y CSS, y al inyectar el script de forma cruda, te saltas ese sistema. Esto puede causar problemas de carga, conflictos con la caché o incluso que el script se cargue en un orden incorrecto.

¿En qué versión exacta de PrestaShop estás? A veces el comportamiento de addJS o de cómo se gestionan los hooks en el displayHeader cambia ligeramente entre versiones.

felix_es35

Sí, @inmaes82 tiene razón. La inyección directa de <script> en el return de un hook es una receta para el desastre en PrestaShop, especialmente con temas modernos o cuando el CCC (Combine, Compress, Cache) está activo. Los scripts asíncronos externos a veces se llevan mal con la forma en que PrestaShop carga los JS de forma diferida. Asegúrate de que tu widgets.js no intente hacer algo antes de que el DOM esté completamente listo.

@irene_online, ¿estás en PrestaShop 8.1.7, verdad? Para esta versión, la forma más limpia es usar addJS del controlador para que PrestaShop lo gestione correctamente.

Milo

Hola @irene_online,

Los compañeros @inmaes82 y @felix_es35 han apuntado muy bien al problema. La causa raíz es que al devolver directamente una etiqueta <script> desde hookDisplayHeader, estás omitiendo el gestor de assets de PrestaShop. Esto evita que el script sea procesado correctamente por el sistema de caché y concatenación, y puede llevar a problemas de carga, conflictos o que no se incluya en el lugar óptimo del HTML.

Para PrestaShop 8.1.7, la forma correcta de añadir un script externo es utilizando el método addJS del controlador. Esto permite que PrestaShop lo incluya de forma controlada y compatible con el resto de la tienda. Aquí te muestro cómo modificar tu método hookDisplayHeader:

class MyTwitterWidget extends Module
{
    // ... (otras partes de tu clase)

    public function hookDisplayHeader($params)
    {
        // Usa addJS para que PrestaShop gestione el script correctamente
        $this->context->controller->addJS('https://platform.twitter.com/widgets.js', null, true);

        // Si necesitas un contenedor HTML para el timeline de Twitter, deberías
        // cargarlo en un archivo .tpl y luego renderizar ese .tpl en otro hook
        // (por ejemplo, displayFooter o un hook personalizado en el sidebar).
        // Pero para cargar el script principal de Twitter, con addJS es suficiente aquí.
        return ''; // No devuelvas HTML directamente para el script de carga.
    }
}

Con esta modificación, el script de Twitter se cargará de forma asíncrona y de una manera más compatible con PrestaShop. Para una solución más completa y mantenible, especialmente si necesitas configurar el widget (ID de timeline, tema, etc.) desde el back office sin tocar código, te recomendaría un módulo para widget de twitter gratis que gestiona toda la integración de forma profesional y te evita problemas en futuras actualizaciones del tema o de PrestaShop.

irene_online

¡Muchas gracias, @Milo! ¡Y también a @inmaes82 y @felix_es35 por vuestra ayuda!

Probé la solución de addJS que me diste y funciona perfectamente en mi PrestaShop 8.1.7. El script se carga sin problemas y el widget se visualiza correctamente. ¡Es mucho más limpio y no me da los errores que antes! Creo que para mi caso con esta modificación me sirve, pero tendré en cuenta el módulo para futuras necesidades más avanzadas. Es un alivio no tener que preocuparme por cada actualización. ¡Problema resuelto!