WordPress+Understrap集成MailChimp弹窗后JS/Ajax失效问题求助

这个问题我之前帮同行排查过类似场景，MailChimp的弹窗脚本特别容易和Bootstrap类主题的JS依赖“打架”，尤其是Understrap这种基于Bootstrap的框架，咱们一步步拆解解决：

1. 修复「Bootstrap tooltips require Tether」错误 #

你提到theme.js已经包含Tether且在Bootstrap之前加载，但大概率是Tether没有被暴露为全局变量——Bootstrap的工具提示组件需要window.Tether这个全局对象才能正常初始化，而MailChimp的脚本可能干扰了全局作用域，导致Tether没被Bootstrap检测到。

解决方法很简单：打开你的theme.js，找到Tether引入的代码（比如import Tether from 'tether'），在后面加一行强制挂载全局变量：

window.Tether = Tether;

保存后清掉浏览器和WordPress缓存，刷新页面看看这个错误是不是消失了。

如果还是不行，就把MailChimp的脚本改成延迟加载，确保它在主题所有依赖初始化完成后再运行：

document.addEventListener('DOMContentLoaded', function() {
  // 动态创建并加载MailChimp脚本
  const mcScript = document.createElement('script');
  mcScript.type = 'text/javascript';
  mcScript.src = '//downloads.mailchimp.com/js/signup-forms/popup/embed.js';
  mcScript.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
  
  // 脚本加载完成后初始化弹窗
  mcScript.onload = function() {
    require(["mojo/signup-forms/Loader"], function(L) { 
      L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"5792cac24346d164eb0cf6ad2","lid":"c1462a4600"});
    });
  };
  
  document.body.appendChild(mcScript);
});

2. 修复「Uncaught ReferenceError: Cookies is not defined」错误 #

这个是WooCommerce的脚本依赖Cookies全局对象，但它要么没被正确加载，要么被MailChimp的脚本覆盖了。给你两个解决方案：

方法一：强制提前加载Cookies库 #

打开主题的functions.php，添加一段代码确保Cookies库在WooCommerce脚本之前加载：

function load_wc_cookies_first() {
    // 替换成你主题里Cookies.js的实际路径，一般在assets/js/vendor下
    wp_enqueue_script( 
        'wc-cookies', 
        get_template_directory_uri() . '/assets/js/vendor/cookies.js', 
        array(), 
        '2.1.0', 
        true 
    );
}
// 优先级设为5，确保比WooCommerce脚本先加载
add_action( 'wp_enqueue_scripts', 'load_wc_cookies_first', 5 );

方法二：手动添加Cookies polyfill #

如果找不到主题里的Cookies库文件，可以在theme.js开头加一段极简的polyfill，满足WooCommerce的基础需求：

// 给window对象补上Cookies方法
window.Cookies = window.Cookies || {
    get: function(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    },
    set: function(name, value, options = {}) {
        let cookieStr = `${name}=${value};`;
        if (options.expires) {
            const date = new Date();
            date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            cookieStr += ` expires=${date.toUTCString()};`;
        }
        if (options.path) cookieStr += ` path=${options.path};`;
        if (options.domain) cookieStr += ` domain=${options.domain};`;
        if (options.secure) cookieStr += " secure;";
        document.cookie = cookieStr;
    }
};

3. 验证功能恢复 #

搞定上面两个错误后，务必清掉所有缓存（浏览器缓存、WordPress缓存插件的缓存），然后测试：

• 打开浏览器控制台，确认没有新的JS错误
• 点击艺术家图标，测试系列和产品的Ajax加载功能
• 确认MailChimp弹窗仍能正常触发显示

一般来说，只要解决了这两个未捕获的JS错误，浏览器就会继续执行后续的主题脚本，Ajax和原有JS功能自然就恢复了。

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