WooCommerce前端的JS活动列表

时间:2019-07-04 作者:ZecKa

在哪里可以找到WooCommerce定义的javascript事件的详尽列表。(如“woocommerce\\u variation\\u has\\u changed”等事件)

2 个回复
最合适的回答,由SO网友:jgangso 整理而成

在寻找相同的内容时,我对JS源文件进行了一些深入研究。

Woocommerce Javascript事件

$( 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\' );
Woocommerce购物车页面JS事件
$( 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 ] );
Woocommerce单一产品页面JS事件
$( \'.wc-tabs-wrapper, .woocommerce-tabs, #rating\' ).trigger( \'init\' );
Woocommerce可变产品页面JS事件
$( document.body ).trigger( \'found_variation\', [variation] );
Woocommerce添加到购物车JS事件
$( 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\' );
Woocommerce添加支付方式JS事件
$( document.body ).trigger( \'init_add_payment_method\' );

要将侦听器绑定到这些事件,请使用:

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

F. ex.

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

SO网友:Vincenzo Di Gaetano

To find a complete list of all events (并随时更新添加的新内容)您可以咨询。目录中的js文件:/wp-content/plugins/woocommerce/assets/js/frontend

下面我报告了其他事件(除了@jgangso的回答之外):

变化hide_variation 重置显示的变化数据时触发show_variation 当发现与所有属性匹配的变体时触发woocommerce_variation_select_change 属性字段更改时触发woocommerce_variation_has_changed 更改变体选择时触发check_variations 触发:当属性字段更改时,从DOM重新加载变化数据时woocommerce_update_variation_values 更新变体时触发woocommerce_gallery_reset_slide_position 如果变体的图像与当前图像不同,请重置幻灯片位置woocommerce_gallery_init_zoom 为所选变体设置产品图像wc_fragments_refreshed 通过Ajax刷新购物车片段成功时触发wc_fragments_ajax_error 通过Ajax刷新购物车片段失败时触发wc_fragment_refresh 后退按钮(safari)后显示页面时刷新wc_fragments_loaded 装载购物车碎片后触发,国家/地区选择(签出)country_to_state_changed 当国家/地区从选择字段更改时触发country_to_state_changingwc_address_i18n_ready 处理区域设置单个产品wc-product-gallery-before-init 在初始化页面上的所有库之前触发wc-product-gallery-after-init 初始化页面上的所有库后触发价格滑块price_slider_updated 价格滑块更新后触发price_slider_create 价格滑块创建后触发price_slider_slide 价格滑块滑动后触发price_slider_change 价格滑块更改后触发相关答案:

相关推荐

用短码替换整个标记--JavaScript

如果标记文本等于一个值,我试图用一个短代码替换整个标记。我正在将此脚本放入页面的页脚。以下是我正在尝试的:var stockcounter = document.getElementsByClassName(\"stock in-stock\"); if(stockcounter[0].innerHTML==\'0 in stock\') { //Displays timer stockcounter[0].outerHTML = do_shortcode