Eventos JavaScript en PrestaShop 1.7

Como experto en el desarrollo de módulos para PrestaShop, me he visto muchas veces en la necesidad de ejecutar funciones para realizar acciones en algunos momentos determinados o lugares donde los eventos que facilita la plataforma me ha ayudado bastante.

PrestaShop suele modificar el DOM después de ejecutar algunas llamadas Ajax, tales como añadir al carrito, cambiar de combinación, cambiar cantidad en el carrito, etc. y, en algunos casos, algunos clientes nos han pedido necesidades que requieren ejecutar alguna función específica en el momento de la ejecución de esos eventos.

En este artículo vas a descubrir que eventos JavaScript tiene disponible PrestaShop y como utilizarlos.

10 eventos JavaScript que puedes aprovechar en PrestaShop

PrestaShop envía varios eventos desde el core.js para que podamos desarrollar código justo en el momento que se ejecuta alguna acción.

En la siguiente tabla vas a poder ver 10 eventos que puedes aprovechar para enganchar tu código y ejecutar alguna función específica.

Ahí va:

updateCart En la página del carrito, cada vez que sucede algo (cambiar la cantidad, eliminar el producto, etc.), el carrito se vuelve a cargar mediante una llamada ajax. Después de actualizar el carrito, se activa este evento.
updatedAddressForm En el formulario de dirección, alguna entrada activará llamadas ajax para modificar el formulario (como el cambio de país), después de actualizar el formulario, se activa este evento.
updateDeliveryForm Durante el pago, si se modifica la dirección de entrega, se activará este evento.
changedCheckoutStep Cada envío del paso de pago activará este evento.
updateProductList En cada página de la lista de productos (categoría, resultados de búsqueda, caída de precios, etc.), la lista se actualiza a través de llamadas ajax si cambia los filtros o las opciones de clasificación. Cada vez que el DOM se vuelve a cargar con una nueva lista de productos, se activa este evento.
clickQuickView Si su tema lo maneja, este evento se activará cuando haga clic en el enlace de vista rápida.
updateProduct En la página del producto, seleccionar una nueva combinación recargará el DOM a través de llamadas ajax. Este evento se activará después de modificar la combinación, pero antes de la llamada ajax.
updatedProduct En la página del producto, seleccionar una nueva combinación recargará el DOM a través de llamadas ajax. Después de la actualización, este evento se dispara.
handleError Este evento se activa después de un error en la solicitud POST. Tiene eventType como primer parámetro.
updateFacets En cada página de la lista de productos (categoría, resultados de búsqueda, caída de precios, etc.), la lista se actualiza a través de llamadas ajax si cambia los filtros o las opciones de clasificación. Cada vez que se recargan las facetas, se activa este evento.

Documentación oficial

Ejemplo práctico

Iré al grano y pondré un par de ejemplos para que te hagas una idea más técnica:

prestashop.on('updatedProductList', function(e) {
    $('.js-product-miniature').each(function() {
        $(this).find('div.product-flag-wishlist').appendTo($(this).find('div.thumbnail-container'));
    });
});

Este código lo que hace es capturar el evento «updatedProductList» para agregar un corazón y algo de lógica por encima de las imágenes del producto en la todas las listas de productos de la tienda PrestaShop.

Lo utilizo uno de los archivos JavaScript de nuestro módulo más popular para las listas de deseo del cliente que puedes ver en detalle en el siguiente enlace:

https://www.jamodules.com/es/211-listas-de-deseos-del-cliente.html

Fíjate en el siguiente código, mucho más completo que también usa este módulo de lista de deseos:

prestashop.on('updatedProduct', function(e) { 
    var id_product = $('#product_page_product_id').val();
    if (logged != 0) {
        if (added == 1) {
            favorite_icon = 'favorite';
            favorite_title = ADD_TO_MY_WISHLIST_TEXT_BUTTON;
        } else {
            favorite_icon = 'favorite_border';
            favorite_title = ADD_TO_MY_WISHLIST_TEXT_BUTTON;
        }
        $('#product .product-flags:first-child').append('<li class="product-flag wishlist"><a href="#wishlist_form_'+id_product+'" data="'+id_product+'" class="open_wishlist_form product_to_wishlist_'+id_product+'" title="'+favorite_title+'"><i class="material-icons '+favorite_icon+'">'+favorite_icon+'</i></a></li>');
    } else {
        $('#product .product-flags:first-child').append('<li class="product-flag wishlist"><a href="'+auth_controller_url+'" data="'+id_product+'" title="'+favorite_title+'"><i class="material-icons '+favorite_icon+'">favorite_border</i></a></li>');
    }
 
    //si tiene atributos
    if (e.id_product_attribute != 0) {
        if ($("input#idCombination").length == 0) {
            $('<input type="hidden" name="idCombination" id="idCombination" value="'+e.id_product_attribute+'">').appendTo('.product-variants');
        } else {
            $("input#idCombination").val(e.id_product_attribute);
        }
    }
});

El código anterior se ubica en la página del producto y, en este caso, cada vez que la información del producto se actualiza, se recoge el identificador del producto, se observa si el usuario está logeado para añadir el corazón que va a permitir añadir o eliminar el producto de la lista de deseos.

Si el producto tiene atributos, actualizamos la combinación elegida ya que los productos pueden ser añadidos a la lista de deseos con la combinación deseada.

Como regalo, te voy a enseñar otro código muy útil para capturar el evento que actualiza el carrito de compras.

prestashop.on('updateCart', function(e) {
    setTimeout(function() {
        if (e.resp.cart.subtotals.products.amount < JMINIMUMCART_VALUE) {
            $('.js-cart-detailed-actions a').hide();
            $('#threshold').show();
        } else {
            $('.js-cart-detailed-actions a').show();
            $('#threshold').hide();
        }
    },3000);
});

¿Qué hace este código?

Si te ubicas en el carrito de la compra, cada vez que el carrito se actualice, ya sea para incrementar, decrementar o eliminar un producto del carrito, esperamos 3 segundos a que PrestaShop cargue el DOM para revisar el importe total del carrito y si este es menor a una cantidad fijada, por ejemplo 50€, se oculta el botón de «Finalizar compra» y se muestra un mensaje de umbral mínimo de venta, como por ejemplo: Para finalizar tu compra, tu pedido debe ser superior a 50€.

De esta forma, evitamos que el cliente pueda realizar compras inferiores  a 50€.

Lógicamente, si el importe es superior a 50€, el botón de «Finalizar compra» se habilita y el mensaje de umbral de venta mínima desaparece.

Todo esto es dinámico ya que a medida que vas incrementando o decrementando las cantidades de la cesta, este código se ejecutará y hará la comprobación para habilitar o no el botón de «Finalizar compra».

Espero que os haya servido.

Si necesitáis un desarrollo similar dentro de PrestaShop y no dais con la tecla, solo tenéis que enviar un mensaje con los máximos detalles de vuestra necesidad y podemos estudiar que coste podría tener lo que necesitéis implementar.

Contactar ahora

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre