在哪里可以找到在 WooCommerce 管理页面上触发的 Javascript (JQuery) 事件的完整列表？

Question

在哪里可以找到在 WooCommerce 管理页面上触发的 Javascript (JQuery) 事件的完整列表？

例如，如果您想在产品编辑页面向产品添加新属性后运行 Javascript 函数，您应该使用哪个事件？

this question 的答案仅报告 WooCommerce 前端中的事件。

Answer 1

WooCommerce 管理员的 Javascript 事件可以在目录中找到： /wp-content/plugins/woocommerce/assets/js/admin

如果您想在 Wordpress 管理员中使用 JQuery，请记住在加载 JQuery 后加载您的脚本。

看看这些答案：

• How can I include JavaScript that use jQuery on admin side
• get_template_directory_uri pointing to parent theme not child theme

确保将 $in_footer 参数设置为 true wp_enqueue_script 函数否则事件可能不会 在 Wordpress 管理页面中触发。

更多详情：

• jQuery.on() does not work in WordPress admin panel

元盒订单

• quantity_changed 在订单项目行的数量发生变化时触发（以及在更新行的总计和税费之后）
• order-totals-recalculate-before 在发送 Ajax 请求以重新计算总数之前触发（点击“重新计算”后）
• order-totals-recalculate-success Ajax 请求成功时触发（点击“重新计算”后）
• order-totals-recalculate-complete Ajax 请求完成时触发（点击“重新计算”后）
• items_saved点击“保存”后触发并发送Ajax请求
• refund_quantity_changed在您更改要退款的产品数量时触发

元盒产品变化

• wc-enhanced-select-init 加载变体时运行操作（在产品编辑页面上）
• woocommerce_variations_loaded 在通过 Ajax 加载变体后触发（在产品编辑页面上）
• woocommerce_variations_saved 在通过 Ajax 保存对变体的更改后触发
• woocommerce_variations_save_variations_button 点击“保存更改”按钮后触发
• woocommerce_variations_save_variations_on_submit 在点击“更新”按钮而不是“保存更改”后触发
• woocommerce_variations_added 添加变体后触发
• woocommerce_variations_removed 删除变体后触发
• woocommerce_variations_input_changed 在更改变体的任何输入字段后触发。此事件在添加 variation-needs-update 类并启用“保存更改”按钮后触发（删除 disabled 属性）
• woocommerce_variations_defaults_changed 更改选择“默认表单值”后触发

元盒产品

• woocommerce-product-type-change 选择“产品类型”更改时触发
• woocommerce_added_attribute 通过“添加”按钮添加属性行后触发
• reload 在重新加载变体面板后触发

设置

• updateMoveButtons 排序付款方式或运输方式后触发

---

用法

使用 admin_enqueue_scripts 挂钩将 .js 文件排队以在所有管理页面上运行。

在我的示例中，我使用get_stylesheet_directory_uri() 来获取子主题的网址。要获取根主题的 URI，您应该使用 get_template_directory_uri()。

// queue the "admin-scripts.js" script for all admin pages
add_action( 'admin_enqueue_scripts', 'add_admin_scripts' );
function add_admin_scripts() {
   wp_enqueue_script( 
      'custom_admin_script',
      get_stylesheet_directory_uri() . '/js/admin/admin-scripts.js',
      array('jquery'),
      '1.0',
      true
   );
}

然后您需要创建一个admin-scripts.js 文件并将其上传到目录：/themes/child-theme/js/admin/admin-scripts.js。

jQuery(function($){
    // triggered when the product type changes
    $('body').on('woocommerce-product-type-change',function(){
        // run code
    });

    // triggered when the quantity of the order item line changes
    $('body').on('quantity_changed',function(){
        // run code
    });

    // ...
});