Lista degli eventi JS nel frontend di WooCommerce

Question

Lista degli eventi JS nel frontend di WooCommerce

4 lug 2019, 12:35:17

Visualizzazioni: 75.9K

Voti: 42

Dove posso trovare una lista esaustiva degli eventi Javascript definiti da WooCommerce (eventi come woocommerce_variation_has_changed)?

ZecKa

778

woocommerce offtopic javascript jquery

Tutte le risposte alla domanda

Commenti

Grazie per la tua risposta, è esattamente quello che cercavo. Tornerò qui se troverò altri eventi.

ZecKa

8 nov 2019 14:52:17

Non funziona per me. Sospetto che il mio script debba dipendere dagli script di WooCommerce, ma non so come siano registrati.

Badger

12 mar 2020 16:50:29

@Badger cosa esattamente non funziona? Su quale pagina stai lavorando e hai verificato che gli script di WooCommerce vengano caricati?

jgangso

16 mar 2020 11:05:15

Nessun messaggio viene registrato nella console quando aggiungo qualcosa al carrello nella pagina prodotto utilizzando questo codice: jQuery(function() { // Prodotto aggiunto al carrello jQuery('body').on('added_to_cart', function(){ console.log('Articolo aggiunto al carrello'); }); }); Gli script sembrano caricarsi correttamente. Ho accodato il mio script come dipendente da 'woocommerce'

Badger

17 mar 2020 19:03:58

@Badger scusa mi ero completamente dimenticato di risponderti. Per altri che potrebbero avere lo stesso problema, di default Woocommerce effettua un ricaricamento completo della pagina all'evento add-to-cart, quindi l'evento JS non viene mai eseguito. Se abiliti l'add-to-cart con AJAX nelle impostazioni di WC, otterrai anche l'evento JS.

jgangso

13 ago 2020 12:56:28

Mostra i restanti 4 commenti

Per trovare una lista completa di tutti gli eventi (e rimanere aggiornati su eventuali nuovi aggiunti) puoi consultare i file .js nella directory: /wp-content/plugins/woocommerce/assets/js/frontend

Di seguito riporto altri eventi (oltre alla risposta di @jgangso):

VARIANTI

hide_variation attivato quando i dati della variante visualizzata vengono resettati
show_variation attivato quando viene trovata una variante che corrisponde a tutti gli attributi
woocommerce_variation_select_change attivato quando un campo attributo cambia
woocommerce_variation_has_changed attivato quando la selezione della variante è stata modificata
check_variations attivato:
- quando un campo attributo cambia
- quando si ricaricano i dati della variante dal DOM
woocommerce_update_variation_values attivato quando le varianti sono state aggiornate
woocommerce_gallery_reset_slide_position resetta la posizione della slide se la variante ha un'immagine diversa da quella corrente
woocommerce_gallery_init_zoom imposta le immagini del prodotto per la variante scelta

FRAMMENTI CARRELLO

wc_fragments_refreshed attivato quando l'aggiornamento dei frammenti carrello via Ajax ha successo
wc_fragments_ajax_error attivato quando l'aggiornamento dei frammenti carrello via Ajax fallisce
wc_fragment_refresh aggiorna quando la pagina viene mostrata dopo il pulsante indietro (safari)
wc_fragments_loaded attivato dopo che i frammenti carrello sono stati caricati

SELEZIONE NAZIONE (CHECKOUT)

country_to_state_changed attivato quando la nazione cambia dal campo di selezione
country_to_state_changing e wc_address_i18n_ready gestiscono la localizzazione

PRODOTTO SINGOLO

wc-product-gallery-before-init attivato prima dell'inizializzazione di tutte le gallerie nella pagina
wc-product-gallery-after-init attivato dopo l'inizializzazione di tutte le gallerie nella pagina

SLIDER PREZZI

price_slider_updated attivato dopo l'aggiornamento dello slider prezzi
price_slider_create attivato dopo la creazione dello slider prezzi
price_slider_slide attivato dopo lo scorrimento dello slider prezzi
price_slider_change attivato dopo la modifica dello slider prezzi

Risposte correlate:

Dove trovare una lista completa degli eventi Javascript (JQuery) attivati nella pagina admin di WooCommerce?

Vincenzo Di Gaetano

293

14 mar 2021 01:28:40

Oltre alla lista completa dei riferimenti, puoi optare per un approccio interattivo e incollare il codice qui sotto nella tua console JS per monitorare le azioni effettuate nel negozio che desideri analizzare. Osserva la console per vedere gli eventi rilevati che verranno registrati.

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)
  }
)

David Wolf

283

29 ago 2022 12:00:11

Se vuoi utilizzare i parametri nel tuo codice, ecco un esempio

jQuery(document.body).on("wc_cart_button_updated", function (e, $button) {
    console.log($button);
});

Andrew Schultz

233

29 giu 2023 11:43:45

jgangso 1.57K · Accepted Answer · 2019-11-08T14:02:16Z

Alla ricerca degli stessi eventi ho fatto un piccolo tuffo nei file sorgente JavaScript.

Eventi JavaScript di Woocommerce

Eventi JS del checkout di 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' );

Eventi JS della pagina del carrello di 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 ] );

Eventi JS della pagina prodotto singolo di Woocommerce

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

Eventi JS della pagina prodotto variabile di Woocommerce

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

Eventi JS "Aggiungi al carrello" di 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' );

Eventi JS "Aggiungi metodo di pagamento" di Woocommerce

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

Per associare un listener a questi eventi, usa:

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

Esempio:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // ora.fai.qualcosa();
});