在开发WooCommerce主题或插件时,我们难免要和用到JavaScritp,WooCommerce 为我们提供了一些JS Events,方便我们在合适的时机添加自己的JavaScript事件
WooCommerce中的JS Events
下面是WooCommerce为我们提供的部分JS Events,如需了解全部,请参考WooCommerce的JS源代码。
结帐过程中的JS Events
$( 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' );
购物车页面中的JS Events
$( 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 ] );
产品详情页中的JS Events
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
可变产品详情页中的JS Events
$( document.body ).trigger( 'found_variation', [variation] );
添加到购物车过程中的JS Events
$( 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' );
怎么使用这些JS Events
如果需要使用这些JS Events插入我们的自定义动作,只需要在合适的target上面绑定WooCommerce 提供的Events那么即可,如下:
jQuery('body').on('init_checkout', function(){
console.log('init_checkout triggered');
});