¿Preloader al cambiar atributo de producto?

mateoweb

¡Hola a todos!

Estoy intentando añadir un efecto de precarga (un spinner, por ejemplo) cuando un cliente cambia un atributo de un producto (talla, color, etc.) en la página del producto. La idea es que el spinner aparezca mientras se carga la nueva imagen, precio y stock via AJAX, y luego desaparezca. He intentado un override del ProductController para manejar esto, pero no consigo que el preloader se muestre correctamente, o bien se queda fijo y no desaparece.

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

class ProductController extends ProductControllerCore
{
    public function postProcess()
    {
        parent::postProcess();
        if (Tools::getValue('ajax') && Tools::getValue('action') == 'refresh') {
            // Intento de añadir una bandera para Smarty/JS
            $this->context->smarty->assign('show_preloader_flag', true);
        }
    }

Esperaba poder usar show_preloader_flag en el template para activar/desactivar el spinner, pero no parece funcionar en el contexto de la llamada AJAX. El preloader simplemente no aparece.

ana_cart

@mateoweb, veo lo que intentas, pero el método postProcess() de ProductController cuando es una llamada AJAX de tipo refresh (para actualizar atributos) no está pensado para asignar variables a Smarty de esa manera. Esa llamada devuelve directamente una respuesta JSON al navegador con los datos actualizados del producto.

¿Qué versión de PrestaShop estás usando? En 1.7.x, el manejo de estas actualizaciones de atributos es bastante específico a nivel de JavaScript.

felix_vlc69

Exacto, @ana_cart tiene razón. La lógica del preloader debe ser manejada casi en su totalidad por JavaScript en el lado del cliente. La asignación de Smarty que intentas hacer en postProcess nunca llegará al navegador porque la respuesta de esa petición es un JSON puro.

Lo que necesitas es un script JS que se ejecute en la página del producto, que detecte los cambios en los selectores de atributos y, antes de que se haga la petición AJAX, muestre el spinner. Luego, cuando la petición AJAX termine (o se actualice el DOM con los nuevos datos), oculte el spinner.

Podrías inyectar tu JS vía hookActionFrontControllerSetMedia en un módulo o incluso editar el product.js del tema (aunque esto último no es recomendable por las actualizaciones).

Milo

Hola @mateoweb,

Los compañeros han acertado. Tu enfoque en postProcess para asignar una variable Smarty no funcionará en el contexto de una petición AJAX para refrescar atributos, ya que estas peticiones devuelven directamente un JSON. La gestión de un preloader en este escenario debe hacerse principalmente con JavaScript en el frontend.

La forma correcta de inyectar tu script JavaScript y CSS para el preloader, si no quieres modificar directamente los archivos del tema, es a través de un módulo custom y el hook hookActionFrontControllerSetMedia. Aquí te muestro cómo sería la implementación en tu módulo:

// En el archivo principal de tu módulo (ej. mypreloader/mypreloader.php)
public function hookActionFrontControllerSetMedia($params)
{
    if ('product' == $this->context->controller->php_self) {
        $this->context->controller->addJS($this->_path.'views/js/front.js');
        $this->context->controller->addCSS($this->_path.'views/css/front.css');
    }
}

Dentro de views/js/front.js, deberías añadir tu lógica JavaScript. Esta lógica debe:

Seleccionar los elementos de los selectores de atributos (.js-attribute).
Añadir un event listener a estos selectores (por ejemplo, change).
Cuando se detecta un cambio, mostrar el preloader (añadiendo una clase a un elemento contenedor o mostrando un spinner ya oculto).
Escuchar el evento updatedProduct del bus de eventos de PrestaShop (prestashop.on('updatedProduct', function() { ... });). Este evento se dispara una vez que la página de producto ha sido actualizada con los nuevos datos de la combinación.
Dentro de este listener, ocultar el preloader.

Es importante que el CSS para el preloader también se cargue correctamente. Aunque esto te permite un control total, requiere mantener el código. Para una solución más robusta y fácil de mantener en tiendas en producción, especialmente con futuras actualizaciones de PrestaShop, muchos optan por utilizar un módulo preparado para efecto de carga al que ya gestiona toda esta lógica y las compatibilidades entre versiones.

mateoweb

¡Muchas gracias a todos, especialmente a @Milo!

Tenéis toda la razón. Mi error era intentar forzar la lógica del lado del servidor donde no tocaba. He seguido el consejo de @Milo e implementado el hookActionFrontControllerSetMedia en un módulo nuevo para cargar mi front.js y front.css. La clave fue escuchar el evento prestashop.on('updatedProduct') para ocultar el preloader. Ahora funciona perfectamente en mi PrestaShop 1.7.6.2.

Por ahora usaré el código, pero el módulo que mencionas me lo guardo para cuando necesite algo más potente o no quiera complicarme la vida con futuras actualizaciones. ¡Gracias de nuevo por la ayuda tan rápida y precisa!