Español
es

Lista de eventos JS en el frontend de WooCommerce

4 jul 2019, 12:35:17
Vistas: 75.9K
Votos: 42

¿Dónde puedo encontrar una lista exhaustiva de eventos Javascript definidos por WooCommerce (eventos como woocommerce_variation_has_changed)?

woocommerce fueradetema javascript jquery
0
Todas las respuestas a la pregunta 4
9
122

En mi búsqueda de lo mismo, me sumergí un poco en los archivos fuente de JS.

Eventos JavaScript de Woocommerce

Eventos JS del Checkout de Woocommerce

$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );

Eventos JS de la página del carrito de Woocommerce

$( document.body ).trigger( 'wc_cart_emptied' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_wc_div' );
$( document.body ).trigger( 'updated_cart_totals' );
$( document.body ).trigger( 'country_to_state_changed' );
$( document.body ).trigger( 'updated_shipping_method' );
$( document.body ).trigger( 'applied_coupon', [ coupon_code ] );
$( document.body ).trigger( 'removed_coupon', [ coupon ] );

Eventos JS de la página de producto individual de Woocommerce

$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );

Eventos JS de la página de producto variable de Woocommerce

$( document.body ).trigger( 'found_variation', [variation] );

Eventos JS de Añadir al carrito de Woocommerce

$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'removed_from_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'wc_cart_button_updated', [ $button ] );
$( document.body ).trigger( 'cart_page_refreshed' );
$( document.body ).trigger( 'cart_totals_refreshed' );
$( document.body ).trigger( 'wc_fragments_loaded' );

Eventos JS de Añadir método de pago de Woocommerce

$( document.body ).trigger( 'init_add_payment_method' );

Para vincular un listener a estos eventos, usa:

jQuery('<event_target>').on('<event_name>', function(){
    console.log('<event_name> triggered');
});

Por ejemplo:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // ahora.haz.loque.quieras();
});
8 nov 2019 14:02:16
Comentarios

Gracias por tu respuesta, esto es lo que estaba buscando, volveré aquí si encuentro otros eventos.

ZecKa ZecKa
8 nov 2019 14:52:17

Esto no funciona para mí. Sospecho que mi script necesita depender de los scripts de woocommerce, pero no sé cómo están registrados.

Badger Badger
12 mar 2020 16:50:29

@Badger ¿qué es lo que no funciona específicamente? ¿En qué página estás trabajando y has comprobado si los scripts de woocommerce se están cargando?

jgangso jgangso
16 mar 2020 11:05:15

No se registra nada en la consola cuando agrego algo al carrito en la página de producto usando el siguiente código: jQuery(function() { // Producto agregado al carrito jQuery('body').on('added_to_cart', function(){ console.log('Item was added to cart'); }); }); Los scripts parecen estar cargándose. He encolado mi script para que dependa de 'woocommerce'

Badger Badger
17 mar 2020 19:03:58

@Badger lo siento, olvidé responderte. Para otros que puedan tener el mismo problema, por defecto Woocommerce recarga completamente la página al evento de agregar al carrito, por lo que el evento JS nunca ocurre. Si habilitas agregar al carrito con AJAX en los ajustes de WC, también obtendrás el evento JS.

jgangso jgangso
13 ago 2020 12:56:28

¿Alguien podría agregar una descripción a cada uno de los triggers? Específicamente, estoy buscando un evento que se dispare al completar el checkout correctamente - ¿debería usar "init_checkout" u otra cosa?

SwimmingG SwimmingG
20 dic 2021 14:20:07

@SwimmingG básicamente, un checkout exitoso (enviado) o pedido viene con una redirección a la página de 'agradecimiento' o similar. ¿Tienes un comportamiento personalizado en esto? Tal vez el gancho de acción woocommerce_thankyou (php) o similar sea lo que necesitas.

Viktor Borítás Viktor Borítás
22 dic 2021 21:56:17

@ViktorBorítás gracias Viktor - idealmente me gustaría poder usar un activador que solo use javascript en el front end en lugar de trabajar en php. Si no puedo hacerlo solo con js, entonces pasaré a lo que has mencionado. Muchas gracias :)

SwimmingG SwimmingG
3 ene 2022 10:48:51

Estoy buscando activar la búsqueda de stock después de actualizar los menús desplegables externamente, a menos que esté abordando esto de manera incorrecta. Necesito pasar los valores a algo para obtener un ID de variación.

Mi idea es que necesito activar una actualización en el botón de agregar al carrito, pero no he tenido suerte.

Adam Patterson Adam Patterson
27 ene 2022 16:55:43
Mostrar los 4 comentarios restantes
0
17

Para encontrar una lista completa de todos los eventos (y mantenerse actualizado sobre cualquier evento nuevo que se agregue) puedes consultar los archivos .js en el directorio: /wp-content/plugins/woocommerce/assets/js/frontend

A continuación, reporto otros eventos (además de la respuesta de @jgangso):

VARIACIONES

  • hide_variation se activa cuando se restablecen los datos de variación mostrados
  • show_variation se activa cuando se encuentra una variación que coincide con todos los atributos
  • woocommerce_variation_select_change se activa cuando cambia un campo de atributo
  • woocommerce_variation_has_changed se activa cuando se ha cambiado la selección de variación
  • check_variations se activa:
    • cuando cambia un campo de atributo
    • al recargar los datos de variación desde el DOM
  • woocommerce_update_variation_values se activa cuando se han actualizado las variaciones
  • woocommerce_gallery_reset_slide_position restablece la posición del slide si la variación tiene una imagen diferente a la actual
  • woocommerce_gallery_init_zoom establece las imágenes del producto para la variación elegida

FRAGMENTOS DEL CARRITO

  • wc_fragments_refreshed se activa cuando la actualización de fragmentos del carrito vía Ajax fue exitosa
  • wc_fragments_ajax_error se activa cuando la actualización de fragmentos del carrito vía Ajax ha fallado
  • wc_fragment_refresh actualiza cuando se muestra la página después del botón de retroceso (safari)
  • wc_fragments_loaded se activa después de que se han cargado los fragmentos del carrito

SELECCIÓN DE PAÍS (CHECKOUT)

  • country_to_state_changed se activa cuando cambia el país desde el campo de selección
  • country_to_state_changing y wc_address_i18n_ready manejan la configuración regional

PRODUCTO INDIVIDUAL

  • wc-product-gallery-before-init se activa antes de inicializar todas las galerías en la página
  • wc-product-gallery-after-init se activa después de inicializar todas las galerías en la página

DESLIZADOR DE PRECIOS

  • price_slider_updated se activa después de actualizar el deslizador de precios
  • price_slider_create se activa después de crear el deslizador de precios
  • price_slider_slide se activa después de deslizar el control de precios
  • price_slider_change se activa después de cambiar el deslizador de precios

Respuestas relacionadas:

14 mar 2021 01:28:40
0
10

Además de las referencias completas de la lista, puedes optar por la vía interactiva y pegar lo siguiente en tu consola JS para realizar las acciones en la tienda que deseas monitorear, observando la consola para ver los eventos afectados que se registran.

jQuery(document.body).on(
  "init_checkout payment_method_selected update_checkout updated_checkout checkout_error applied_coupon_in_checkout removed_coupon_in_checkout adding_to_cart added_to_cart removed_from_cart wc_cart_button_updated cart_page_refreshed cart_totals_refreshed wc_fragments_loaded init_add_payment_method wc_cart_emptied updated_wc_div updated_cart_totals country_to_state_changed updated_shipping_method applied_coupon removed_coupon",
  function (e) {
    console.log(e.type)
  }
)
29 ago 2022 12:00:11
0
0

Si deseas utilizar los parámetros en tu código, aquí tienes un ejemplo:

jQuery(document.body).on("wc_cart_button_updated", function (e, $button) {
    console.log($button);
});
29 jun 2023 11:43:45
Preguntas relacionadas
Obtener la URL de la página actual (incluyendo paginación)
8
respuestas
Cómo crear una estructura de enlaces permanentes con taxonomías personalizadas y tipos de contenido personalizados como nombre-base/taxonomia-padre/taxonomia-hijo/nombre-tipo-contenido
4
respuestas
¿Mostrar todas las subcategorías de una categoría específica?
2
respuestas
Función para obtener la URL de la imagen original subida - tamaño completo
3
respuestas
¿Cómo sobrescribir archivos JavaScript en un tema hijo?
5
respuestas
Agregar columna 'orden de menú' a la pantalla de administración de tipos de contenido personalizados
4
respuestas