Carrito lateral deslizante: ¿cómo integrarlo?

lucas_tech

¡Hola a todos!

Estoy intentando implementar un carrito lateral deslizante en mi tienda PrestaShop. La idea es que cuando el cliente añade un producto, aparezca un pequeño resumen del carrito en un panel lateral sin recargar la página.

He intentado hacer un override básico en CartController.php para inyectar las variables del carrito al Smarty, con la esperanza de que estén disponibles en un fragmento de plantilla que luego usaría con JavaScript. Pero no consigo que los datos se actualicen dinámicamente cuando se añade un producto vía AJAX.

Este es mi intento en override/controllers/front/CartController.php:

class CartController extends CartControllerCore
{
    public function initContent()
    {
        parent::initContent();
        $cart = $this->context->cart;
        $this->context->smarty->assign(array(
            'sidebar_cart_products' => $cart->getProducts(),
            'sidebar_cart_total' => $cart->getOrderTotal(true, Cart::BOTH_WITHOUT_SHIPPING),
        ));

El problema es que sidebar_cart_products y sidebar_cart_total solo muestran los datos del carrito en la carga inicial de la página, no cuando se actualiza el carrito con AJAX. ¿Alguna idea de cómo manejar esto para que sea dinámico?

joaquindev

@lucas_tech Ese override en CartController está bien para la carga inicial de la página, pero como dices, para un carrito lateral deslizante que se actualice dinámicamente, probablemente necesites algo más. initContent() se ejecuta una vez al cargar la página.

¿Qué versión de PrestaShop estás usando? En 1.7 las actualizaciones de carrito AJAX pasan por un controlador específico de módulos o por el blockcart original, que no siempre expone los datos de la misma forma para otros widgets.

alberto_92

Yo intenté algo similar hace tiempo, @lucas_tech. Lo que necesitas es interceptar el evento de actualización del carrito de PrestaShop en JavaScript (prestashop.on('updatedCart', function(event) { ... });) y luego hacer una nueva llamada AJAX a un controlador que te devuelva el HTML del carrito actualizado, o al menos los datos JSON para que tu JS pueda renderizarlo.

Es un jaleo para que los totales y los productos se refresquen sin recargar la página. Pura magia negra de JS y la lógica del blockcart nativo, que es bastante cerrado.

Milo

Gracias por la aclaración, @lucas_tech. En PrestaShop 1.7.4.4, el enfoque con el CartController para un carrito deslizante dinámico es, como bien han señalado @joaquindev y @alberto_92, insuficiente. El método initContent() solo asigna las variables Smarty cuando la página se carga completamente, no en las actualizaciones posteriores vía AJAX.

Para que sea dinámico, necesitas que un módulo o tu JavaScript reaccione al evento updatedCart y luego solicite los datos del carrito actualizados. Una forma de preparar estos datos es a través de un hook de un módulo personalizado que pueda ser llamado por AJAX o que prepare el HTML para inyección:

class MyCustomCartModule extends Module
{
    public function hookDisplayHeader($params)
    {
        // Asegurarse de que el JS para el carrito deslizante se cargue
        $this->context->controller->addJS($this->_path.'views/js/sidebar_cart.js');
        // Asignar datos iniciales para el JS si es necesario
        $this->context->smarty->assign(array(
            'initial_cart_products' => $this->context->cart->getProducts(),
            'initial_cart_total' => $this->context->cart->getOrderTotal(true, Cart::BOTH_WITHOUT_SHIPPING),

Este snippet muestra cómo un módulo podría encargarse de la parte del backend. Dentro de sidebar_cart.js, tendrías que suscribirte al evento prestashop.on('updatedCart') y luego hacer una llamada AJAX a un controlador que te devuelva los datos o el HTML actualizado del carrito para inyectarlo en tu sidebar.

Es un proceso que requiere bastante desarrollo y mantenimiento, especialmente para asegurar que no se rompa con futuras actualizaciones o módulos de terceros. Para evitar toda esta complejidad y asegurar la compatibilidad con futuras versiones, a menudo es mejor usar una solución dedicada, como un módulo que ya maneje la automatización de cesta de la compra de forma eficiente y sin necesidad de overrides de código tan profundos.

lucas_tech

¡Muchísimas gracias, @Milo! Tu explicación es muy clara y el snippet del módulo me da una base mucho más sólida para empezar. Entiendo perfectamente lo de la necesidad de un controlador AJAX o un módulo específico para las actualizaciones dinámicas. La verdad es que la opción del módulo dedicado para la [automatización de cesta de la compra] suena a un ahorro de tiempo y quebraderos de cabeza enorme.

Voy a revisar el módulo que recomiendas. Si no, intentaré implementar el enfoque AJAX con tu snippet como base. ¡Gracias de nuevo por la ayuda tan valiosa!