Listă de evenimente JavaScript în frontend-ul WooCommerce

Question

Listă de evenimente JavaScript în frontend-ul WooCommerce

4 iul. 2019, 12:35:17

Vizualizări: 75.9K

Voturi: 42

Unde pot găsi o listă exhaustivă a evenimentelor Javascript definite de WooCommerce (evenimente precum woocommerce_variation_has_changed)?

ZecKa

778

woocommerce offtopic javascript jquery

Toate răspunsurile la întrebare

Comentarii

Mulțumesc pentru răspuns, exact acest lucru căutam, voi reveni aici dacă găsesc alte evenimente.

ZecKa

8 nov. 2019 14:52:17

Această soluție nu funcționează pentru mine. Bănuiesc că scriptul meu trebuie să fie dependent de scripturile WooCommerce, dar nu știu sub ce nume sunt înregistrate.

Badger

12 mar. 2020 16:50:29

@Badger ce anume nu funcționează? Pe ce pagină lucrezi și ai verificat dacă scripturile WooCommerce sunt încărcate?

jgangso

16 mar. 2020 11:05:15

Nu se înregistrează nimic în consolă când adaug ceva în coș pe pagina produsului folosind următorul cod: jQuery(function() { // Produs adăugat în coș jQuery('body').on('added_to_cart', function(){ console.log('Item was added to cart'); }); }); Scripturile par să se încarce. Am încărcat scriptul meu ca dependent de 'woocommerce'

Badger

17 mar. 2020 19:03:58

@Badger îmi pare rău că am uitat să îți răspund. Pentru alții care ar putea întâmpina aceeași problemă, implicit Woocommerce face o reîncărcare completă a paginii la evenimentul de adăugare în coș, de aceea evenimentul JS nu are loc niciodată. Dacă activezi adăugarea în coș cu AJAX în setările WC, vei primi și evenimentul JS.

jgangso

13 aug. 2020 12:56:28

Arată celelalte 4 comentarii

Pentru a găsi o listă completă a tuturor evenimentelor (și a rămâne la curent cu orice noi evenimente adăugate) puteți consulta fișierele .js din directorul: /wp-content/plugins/woocommerce/assets/js/frontend

Mai jos menționez alte evenimente (în plus față de răspunsul lui @jgangso):

VARIAȚII

hide_variation declanșat când datele afișate ale variației sunt resetate
show_variation declanșat când a fost găsită o variație care se potrivește cu toate atributele
woocommerce_variation_select_change declanșat când un câmp de atribut se schimbă
woocommerce_variation_has_changed declanșat când selecția variației a fost modificată
check_variations declanșat:
- când un câmp de atribut se schimbă
- când se reîncarcă datele variației din DOM
woocommerce_update_variation_values declanșat când variațiile au fost actualizate
woocommerce_gallery_reset_slide_position resetează poziția slide-ului dacă variația are o imagine diferită față de cea curentă
woocommerce_gallery_init_zoom setează imaginile produsului pentru variația aleasă

FRAGMENTE COȘ

wc_fragments_refreshed declanșat când reîmprospătarea fragmentelor de coș prin Ajax a avut succes
wc_fragments_ajax_error declanșat când reîmprospătarea fragmentelor de coș prin Ajax a eșuat
wc_fragment_refresh reîmprospătează când pagina este afișată după butonul înapoi (safari)
wc_fragments_loaded declanșat după ce fragmentele de coș au fost încărcate

SELECȚIE ȚARĂ (FINALIZARE COMANDA)

country_to_state_changed declanșat când țara se schimbă din câmpul de selectare
country_to_state_changing și wc_address_i18n_ready gestionează localizarea

PRODUS SINGULAR

wc-product-gallery-before-init declanșat înainte de inițializarea tuturor galeriilor de pe pagină
wc-product-gallery-after-init declanșat după inițializarea tuturor galeriilor de pe pagină

GLISOR PRET

price_slider_updated declanșat după actualizarea glisorului de preț
price_slider_create declanșat după crearea glisorului de preț
price_slider_slide declanșat după glisarea pe glisorul de preț
price_slider_change declanșat după schimbarea glisorului de preț

Răspunsuri conexe:

Unde pot găsi o listă completă de evenimente JavaScript (JQuery) declanșate pe pagina de administrare WooCommerce?

Vincenzo Di Gaetano

293

14 mar. 2021 01:28:40

Pe lângă lista completă de referințe, poți merge pe calea interactivă și să lipești codul de mai jos în consola ta JS, apoi să efectuezi acțiunile în magazin pe care dorești să le targetezi. Urmărește consola pentru a vedea evenimentele declanșate înregistrate.

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 aug. 2022 12:00:11

Dacă dorești să utilizezi parametrii în codul tău, iată un exemplu:

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

Andrew Schultz

233

29 iun. 2023 11:43:45

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

În căutarea aceluiași lucru, am făcut o scurtă incursiune în fișierele sursă JS.

Evenimente JavaScript în WooCommerce

Evenimente JS la finalizarea comenzii în 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' );

Evenimente JS pe pagina coșului în 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 ] );

Evenimente JS pe pagina unui singur produs în WooCommerce

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

Evenimente JS pe pagina produselor variabile în WooCommerce

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

Evenimente JS la adăugarea în coș în 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' );

Evenimente JS la adăugarea metodei de plată în WooCommerce

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

Pentru a asculta aceste evenimente, folosește:

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

De exemplu:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // now.do.whatever();
});