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:

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:

Source code

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:

Source code

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.

Source code

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