Utilización de Eventos Javascript PrestaShop

Esta vez es el turno de una entrada técnica, vamos a hablar de los eventos Javascript PrestaShop, los que podemos utilizar a través del objeto javascript ‘PrestaShop’, el cual podemos instanciar en nuestros scripts para modificar o adaptar el resultado de estos eventos. Primero vamos a ver un poco de teoría.

La teoría

En las versiones 1.7 de PrestaShop, siempre que se utilice un tema estándar o bien construido siguiendo correctamente la arquitectura de PrestaShop, encontraremos muchos menos archivos javascript que en versiones anteriores, lo que repercute en una mejor carga y rendimiento de la tienda. Los principales archivos que tenemos que tener en cuenta son dos:

  • core.js Carga jQuery3, realiza llamadas ajax y define métodos centrales que todos los frontend deben usar, este archivo se carga a nivel de núcleo y no hay que definirlo de nuevo en el theme.
  • theme.js Agrupa todo el código y las librerías específicas del tema.

El archivo core.js genera el llamado objeto PrestaShop, el cual tiene una serie de eventos asociados que se lanzan cuando ocurre alguna acción en nuestra tienda, podemos instanciar estos eventos desde nuestros propios scripts para modificar el comportamiento final de los mismos y adaptar el resultado a las necesidades de nuestras tiendas. Los principales eventos que ofrece el objeto PrestaShop son:

Los eventos

  • updateCart: Este evento se lanza al producirse actualizaciones en el carrito de la compra
  • updatedAddressForm: Este evento se lanza cuando se actualiza el formulario de dirección
  • updateDeliveryForm: Durante el pago, si se modifica la dirección de entrega, se activará este evento.
  • changedCheckoutStep: Por cada cambio de paso en el proceso de checkout se disparará este evento.
  • updateProductList: En cada página de listado de productos (categoría, resultados de búsqueda, etc.), se lanza este evento si cambian los filtros o las opciones de clasificación. Cada vez que el DOM se recarga con una nueva lista de productos, se activa este evento.
  • clickQuickView Este evento se lanzará al hacer click en el enlace de vista rápida.
  • updateProduct: Este evento se lanza en la página del producto al seleccionar una nueva combinación, recargará el DOM a través de llamadas ajax. Después de la actualización, se activa este evento.
  • handleError: Este evento se lanza después de un error en la solicitud POST. Tiene eventType como parámetro.
  • updateFacets: En cada página de listado de productos (categoría, resultados de búsqueda, etc.), se lanza este evento si cambia los filtros o las opciones de clasificación. Cada vez que se recargan las facetas, se activa este evento.

Poniéndolo en práctica

Pero para ver como podemos utilizar estos eventos y modificar el compartimiento final, lo mejor es que veamos un par de ejemplos:

Cuando se actualiza el carro de la compra

PrestaShop.on(
  'updateCart',
  function (event) {
    console.log(event);
    alert('Se ha actualizado el carrito');
  }
);

En este ejemplo capturamos el evento ‘updateCart’. Cuando se actualiza información en el carrito de la compra podemos realizar las acciones que necesitemos en nuestra función.

Cuando se selecciona una combinación en la ficha de producto

PrestaShop.on(
  'updateProduct',
  function (event) {
    console.log(event);
    alert('Se ha actualizado la información del producto');
  }
);

En este segundo ejemplo, capturamos el evento ‘updateProduct’ el cual se ejecuta cuando se ha modificado la combinación seleccionada en la ficha de producto. En nuestra función podremos modificar el comportamiento final de esta acción, además el objeto event nos devuelve información sobre el producto y la combinación seleccionada.

Esperamos que la información recogida en esta entrada te haya sido útil, y recuerda, si necesitas ayuda con algunas de estas adaptaciones, siempre puedes contar con alguno de nuestros paquetes de soporte o programación a medida.

Fuente: JavaScript events

Con esto y más ¡tu tienda online siempre preparada!

Te puede interesar

  • Entrada

    PrestaShop: Herramienta Module Generator

    A la hora de crear un nuevo módulo para PrestaShop es importante seguir la estructura de carpetas propuesta por el cms por varias razones: Por todo ello, la manera más sencilla y rápida de obtener una estructura básica de un módulo PrestaShop es utilizar la Herramienta Module Generator que nos facilita PrestaShop. Lo primero que …

    Seguir leyendo

  • Entrada

    Añadir columnas a los listados del backoffice

    En este post vamos a contar como añadir columnas extras a tus listados del backoffice a través del hook: actionAdmin <ControllerName> ListingFieldsModifier En muchas ocasiones tenemos que mostrar columnas personalizadas en los listados que genera PrestaShop en su backoffice y además necesitamos que estas columnas se puedan filtrar y exportar, pues bien, el mejor método …

    Seguir leyendo

  • Servicio

    Soporte técnico PrestaShop

    Mantenimiento para tiendas online PrestaShop: Solución de problemas, asesoramiento para el mejor uso de la plataforma, actualizaciones de seguridad y mejoras.

    Seguir leyendo

¿Necesitas ayuda más avanzada para solucionar tus problemas?

Contáctanos o echa un vistazo a nuestros servicios, entre los cuales podrás encontrar varios planes de mantenimiento de Prestahop.

Nuestros servicios

Impulsa la venta online y haz crecer tu negocio en poco tiempo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *