WooCommerce Bookings：触发产品页面预订费用AJAX重计算

嘿，我之前也踩过这个坑——直接模拟标准字段的change事件确实经常不管用，因为WooCommerce Bookings的前端JS有自己的状态管理和触发逻辑，不是随便触发个事件就能驱动重算的。下面给你几个靠谱的解决方案：

1. 直接调用Bookings的核心计算函数 #

这是最直接有效的方法，跳过模拟事件，直接触发它内部负责费用计算的JS函数。

打开你的主题JS文件（或者用自定义JS插件），添加这段代码：

jQuery(document).ready(function($) {
    // 替换成你新增字段的选择器，比如类名、ID都可以
    $('.your-custom-booking-fields').on('change input', function() {
        // 兼容不同版本的Bookings函数
        if (typeof wc_bookings_form !== 'undefined' && typeof wc_bookings_form.calculate_cost === 'function') {
            wc_bookings_form.calculate_cost();
        } else if (typeof wc_bookings_calculate_cost === 'function') {
            // 旧版本Bookings可能用这个全局函数
            wc_bookings_calculate_cost();
        }
    });
});

这段代码会监听自定义字段的change和input事件（覆盖下拉选择、输入框实时输入等场景），直接调用Bookings内置的费用计算函数，和标准字段触发的逻辑完全一致。

2. 触发Bookings的自定义更新事件 #

如果上面的方法没生效（比如不同版本的Bookings函数名有差异），可以试试触发它内部监听的自定义事件：

jQuery(document).ready(function($) {
    $('.your-custom-booking-fields').on('change input', function() {
        // 触发Bookings内部的参数变更事件，间接驱动费用重算
        $(document).trigger('wc_bookings_date_changed');
    });
});

这个事件是Bookings用来感知预订参数变化的核心事件，触发后系统会自动执行后续的费用计算流程。

3. 确保自定义字段能被后台获取到 #

光触发前端重算还不够，你得确保自定义字段的值能被后台PHP代码拿到，这样才能根据字段调整时长和费用。

在date-picker.php里新增字段时，要把字段的name属性设置成booking[xxx]的格式，比如：

<select name="booking[custom_duration_option]" id="custom-duration-option">
    <option value="2">2小时</option>
    <option value="4">4小时</option>
</select>

这样AJAX请求时，字段值会被打包到booking参数里，后台可以通过$_POST['booking']['custom_duration_option']获取到。

然后在主题functions.php里添加钩子，调整费用或时长：

// 调整预订费用
add_filter('woocommerce_bookings_calculate_booking_cost', 'custom_field_adjust_booking_cost', 10, 3);
function custom_field_adjust_booking_cost($cost, $booking, $product) {
    $custom_option = isset($_POST['booking']['custom_duration_option']) ? intval($_POST['booking']['custom_duration_option']) : 0;
    if ($custom_option > 0) {
        // 替换成你的费用计算逻辑，比如每小时100元
        $cost = $custom_option * 100;
    }
    return $cost;
}

// 如果需要调整预订时长，用这个钩子
add_filter('woocommerce_bookings_calculate_duration', 'custom_field_adjust_booking_duration', 10, 4);
function custom_field_adjust_booking_duration($duration, $product, $data, $duration_unit) {
    $custom_option = isset($_POST['booking']['custom_duration_option']) ? intval($_POST['booking']['custom_duration_option']) : 0;
    if ($custom_option > 0) {
        $duration = $custom_option;
    }
    return $duration;
}

为什么直接触发标准字段change没用？ #

因为Bookings的标准字段（比如日期选择器）的change事件绑定了额外逻辑——比如先验证日期合法性、更新内部状态标记，然后才会触发计算。单纯用$('#standard-field').trigger('change')模拟事件，可能跳过了这些前置检查，系统会认为没有实际变化，所以不会触发重算。直接调用核心函数或者触发自定义事件，才是符合它内部逻辑的正确方式。

内容的提问来源于stack exchange，提问作者christian