Wordpress集成taxi.js后Contact Form7/Woocommerce JS功能失效求助

针对你遇到的问题，以下是几个可行的解决思路：

1. 修正data-taxi-reload属性的添加逻辑 #

你当前的代码会全局替换所有脚本标签，这会丢失原脚本的defer/async等关键属性，且并非所有脚本都需要重载。应该只针对Contact Form 7（CF7）和WooCommerce的核心脚本添加该属性：

function ntdev_add_taxi_reload_attr($tag, $handle, $src) {
    // 定义需要重载的目标脚本handle（根据实际情况补充）
    $reload_handles = [
        'contact-form-7',
        'woocommerce',
        'wc-add-to-cart',
        'wc-checkout'
    ];

    if (in_array($handle, $reload_handles) && strpos($tag, 'script') !== false) {
        // 在原标签基础上追加属性，不破坏原有配置
        $tag = str_replace('></script>', ' data-taxi-reload></script>', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'ntdev_add_taxi_reload_attr', 10, 3);

2. 监听Taxi.js页面切换事件，手动重新初始化插件 #

Taxi.js动态替换页面内容后，CF7/WooCommerce的初始化逻辑不会自动触发，需要监听taxi:page:load事件手动重新执行初始化：

创建自定义JS文件（比如custom-taxi-init.js）并挂载到主题：

document.addEventListener('taxi:page:load', function() {
    // 重新初始化Contact Form 7
    if (typeof wpcf7 !== 'undefined') {
        wpcf7.init();
        // 若使用CF7条件字段等扩展，同步初始化
        if (typeof wpcf7cf !== 'undefined') {
            wpcf7cf.init();
        }
    }

    // 重新激活WooCommerce添加到购物车功能
    if (typeof wc_add_to_cart_params !== 'undefined') {
        jQuery(document.body).trigger('wc_fragments_refreshed');
        jQuery('.add_to_cart_button').off('click').on('click', function(e) {
            e.preventDefault();
            wc_add_to_cart(jQuery(this));
        });
    }

    // 重新初始化WooCommerce结账页
    if (typeof wc_checkout_params !== 'undefined') {
        jQuery(document.body).trigger('update_checkout');
    }
});

在主题functions.php中注册该脚本（确保依赖Taxi.js和jQuery）：

function ntdev_enqueue_custom_taxi_scripts() {
    wp_enqueue_script(
        'custom-taxi-init',
        get_stylesheet_directory_uri() . '/js/custom-taxi-init.js',
        ['taxi-js', 'jquery'],
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'ntdev_enqueue_custom_taxi_scripts');

3. 检查Taxi.js配置与脚本加载顺序 #

• 确认Taxi.js的exclude配置未排除CF7表单、WooCommerce按钮等核心元素，确保这些元素能被正确替换。
• 确保你的自定义初始化脚本在Taxi.js之后加载，否则无法监听切换事件。

4. 排查脚本冲突 #

通过浏览器控制台查看是否有JS报错，逐步禁用其他第三方插件，排查是否存在脚本冲突导致初始化失败。

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