Capturar eventos en PrestaShop (JavaScript)

Cuando usamos PrestaShop en ocasiones necesitamos ejecutar alguna acción cuando, por ejemplo, se cambia la cantidad de artículos en el carro de la compra.

Supongamos que queremos que se muestre un mensaje al usuario cuando éste cambie el número de unidades de la cesta.

Si echamos un vistazo a la, normalmente, incompleta documentación de PrestaShop podemos encontrar una sección llama JavaScript Events. La verdad es que no es de gran ayuda así que voy a darte algunas pistas

Detectar cuando el usuario cambia el número de unidades de la cesta

En PrestaShop hay una serie de eventos que se lanzan cuando se realizan algunas acciones. Uno de ellos es el de ‘updateCart‘. Éste se lanza en el momento que el usuario cambia el número de unidades de la cesta o elimina alguno de los artículos.

Podemos crearnos nuestro fichero JS en el que podemos añadir el siguiente código:

prestashop.on('updateCart', () => {
    alert('Gracias por modificar tu cesta);
})

Cuando recibimos este evento podemos recoger el objeto event que contiene algo de información. Utiliza un console.log() o, mejor, un debug, para ver su contenido.

Debes tener en cuenta algo muy importante; este evento se lanza al comienzo de la actualización del carro. Insisto, tu carro todavía no estará actualizado y contendrá los valores «viejos», de antes de la modificación.

Un fallo que, si no me equivoco, aún no se ha corregido es que el objeto prestashop «pierde» el carrro:

prestashop.on('updateCart', (e) => {
     console.log("Comienzo update")
     console.log(prestashop.cart)
})

Este fallo parece que lleva ocurriendo desde, por lo menos, mediados de 2018. Tendremos que echar una mano para corregirlo.

Evento cuando la actualización del carro ha terminado

Una vez que el carro se ha terminado de cargar se lanza el evento updatedCart. Eso es updateCart cuando el usuario cambia algo y updatedCart cuando se termina de refrescar. Esto no se menciona en la documentación, por supuesto. Te tienes que buscar la vida para encontrarlo.

Para capturar este evento podemos hacer lo siguiente:

prestashop.on('updatedCart', (e) => {
    console.log(prestashop)
    console.log(e)
})

Aquí también tenemos el problema con prestashop.cart pero, al menos, podemos usar la información que viene en el objeto ‘e’ o podemos leer del DOM para buscar la información que necesitamos.

Deja un comentario