Widget de Facebook para grupo: integrar sin overrides

miriamdev

¡Hola a todos!

Estoy intentando integrar el widget de 'Unirse al grupo de Facebook' en mi tienda PrestaShop, pero me encuentro con problemas cada vez que intento añadir el código de forma manual. Lo he probado en varios hooks y el widget nunca se inicializa correctamente o deja de funcionar después de cualquier actualización menor del tema o del propio PrestaShop.

Estoy en PrestaShop 9.1.3 y PHP 8.2. He intentado meter el script y el div del widget en hookDisplayFooter de un módulo personalizado, pero no hay manera de que funcione de forma fiable. Este es el fragmento de código que estoy usando en mi módulo:

public function hookDisplayFooter($params)
{
    if (!$this->active) {
        return '';
    }

    $this->context->smarty->assign([
        'facebook_group_id' => Configuration::get('MYMODULE_FB_GROUP_ID'),
    ]);

    // Esto lo renderizo desde un .tpl del módulo
    return $this->display(__FILE__, 'views/templates/hook/facebook_group_widget.tpl');
}

Y dentro de views/templates/hook/facebook_group_widget.tpl tengo el HTML y el script de Facebook:

<div class="fb-group" data-href="https://www.facebook.com/groups/{$facebook_group_id}" data-width="280" data-show-metadata="false"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v18.0" nonce="MY_RANDOM_NONCE"></script>

El problema es que el div se muestra, pero el widget nunca se carga. En la consola no veo errores evidentes, pero tampoco se inicializa el xfbml. ¿Alguna idea de cómo hacerlo bien sin destrozar la tienda?

lorenapro48

Hola @miriamdev,

Entiendo perfectamente tu frustración. La integración de scripts externos con PrestaShop 9 y PHP 8.x puede ser un dolor de cabeza, especialmente con los temas de carga asíncrona y diferida. Lo que ocurre es que el SDK de Facebook a menudo necesita que el DOM esté completamente listo para procesar los div con la clase fb-group.

Al poner el script directamente en el footer, aunque sea async defer, a veces el div no está procesado por el DOM en el momento exacto en que el SDK intenta buscarlo. ¿Has probado a registrar el script de Facebook a través del registerJavascript del controlador en hookDisplayHeader y luego el div en hookDisplayFooter? Así te aseguras que el SDK se carga antes y el widget tiene tiempo de encontrar el elemento.

lorena24

@miriamdev, yo tuve un problema similar no hace mucho con otro widget de terceros. Lo que dice @lorenapro48 tiene mucho sentido. A veces el orden de carga, incluso con async y defer, es crucial. El nonce también es importante por seguridad, pero no suele ser la causa de que el widget no se muestre.

Otro detalle: ¿estás usando el tema Hummingbird? Ese tema tiene su propia forma de gestionar los assets y a veces puede interferir con scripts cargados de forma manual, especialmente si intentas cargar el mismo script varias veces o si hay algún tipo de optimización de JS activada en Rendimiento que lo estropea. Asegúrate de que no haya conflicto.

Milo

Hola @miriamdev,

El problema que describes es muy común con widgets de terceros que dependen de SDKs externos. El código que muestras en facebook_group_widget.tpl está intentando cargar el SDK de Facebook y el div del widget al mismo tiempo en el footer. Aunque async y defer ayudan, no garantizan que el SDK haya inicializado completamente el procesamiento del xfbml antes de que el navegador lea tu div.

La forma correcta en PrestaShop 9 es separar la carga del SDK de Facebook y la inserción del div del widget. El SDK debe cargarse de manera controlada, preferiblemente en el header (o al menos en el bottom con priority baja) usando registerJavascript, y el div del widget puede ir en el footer o donde necesites.

Aquí te muestro cómo podrías registrar el script de forma más robusta en tu método hookDisplayHeader de tu módulo:

public function hookDisplayHeader($params)
{
    if (!$this->active) {
        return '';
    }

    $this->context->controller->registerJavascript(
        'modules-myfacebookwidget-sdk',
        'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v18.0',
        ['position' => 'bottom', 'priority' => 100, 'async' => true, 'defer' => true, 'attributes' => 'crossorigin="anonymous"']
    );

    // Aquí puedes asignar la ID del grupo si el widget se renderiza en un .tpl diferente
    $this->context->smarty->assign([
        'facebook_group_id' => Configuration::get('MYMODULE_FB_GROUP_ID'),
    ]);

    // Si el div del widget va en el header, lo renderizas aquí
    // return $this->display(__FILE__, 'views/templates/hook/facebook_group_widget_header.tpl');
}

Y luego, en tu hookDisplayFooter (o en otro hook donde quieras el widget visible), solo tendrías el div:

<div class="fb-group" data-href="https://www.facebook.com/groups/{$facebook_group_id}" data-width="280" data-show-metadata="false"></div>

De esta forma, el SDK de Facebook se carga en el momento adecuado por el sistema de PrestaShop, y cuando el div del widget aparece en el DOM, el SDK ya debería estar listo para procesarlo. Sin embargo, para una tienda en producción y evitar estos quebraderos de cabeza con cada actualización o cambio de tema, la solución más limpia y mantenible es siempre un módulo dedicado. Para esto, te recomiendo que eches un vistazo a esta solución para únete al grupo que gestiona todas estas peculiaridades por ti.

miriamdev

¡Muchísimas gracias, @Milo! ¡Eso era exactamente lo que necesitaba!

Probé tu enfoque de separar la carga del SDK y el div del widget, y ahora funciona perfectamente. Al registrar el script en hookDisplayHeader con registerJavascript y dejar solo el div en el footer, el widget se inicializa sin problemas. La verdad es que el sistema de assets de PrestaShop 9 es más estricto de lo que pensaba.

También he echado un vistazo al módulo que recomiendas y parece una opción fantástica para no tener que preocuparse por esto en el futuro. ¡Gracias de nuevo por la ayuda tan detallada!