IE11环境下WooCommerce购物车图标商品数量更新问题排查

我之前也踩过IE11和WooCommerce购物车兼容的坑，结合你提供的代码，给你几个实用的解决方向：

1. 先修复PHP输出的语法问题 #

看你贴的代码里有<!--?php这种错误写法，这会导致PHP代码无法正确执行，先把注释符号去掉，确保购物车初始渲染正常：

<p> 
  <i class="fa fa-shopping-cart" aria-hidden="true"></i> 
  <a class="cart-contents" title="<?php _e( 'View your shopping cart' ); ?>" href="<?php echo wc_get_cart_url(); ?>" >
    <?php echo sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?>
  </a>
</p>

这段代码要确保能在页面加载时正确显示初始的购物车数量和总价，这是后续AJAX更新的基础。

2. 处理JS兼容性：替换ES6语法为ES5 #

IE11完全不支持ES6+的语法（比如箭头函数、const/let），而WooCommerce默认的购物车AJAX回调可能用到了这些，或者你自己的自定义JS里有。把所有回调函数改成普通函数，变量用var：

比如原来的更新逻辑如果是：

jQuery(document.body).on('updated_cart_totals', () => {
  // 你的更新代码
});

改成IE11能识别的：

jQuery(document.body).on('updated_cart_totals', function() {
  // 你的更新代码
});

3. 手动触发购物车片段刷新 #

IE11有时无法正确响应WooCommerce的updated_cart_totals或added_to_cart事件，我们可以手动发起AJAX请求来刷新购物车片段：

// 监听商品添加到购物车事件
jQuery(document).on('added_to_cart', function() {
  // 确保WooCommerce的参数存在
  if (typeof wc_cart_fragments_params !== 'undefined') {
    jQuery.ajax({
      url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'),
      type: 'POST',
      success: function(data) {
        if (data && data.fragments) {
          // 替换页面上的购物车片段
          jQuery.each(data.fragments, function(key, value) {
            jQuery(key).replaceWith(value);
          });
          // 触发刷新完成事件
          jQuery('body').trigger('wc_fragments_refreshed');
        }
      }
    });
  }
});

// 同样处理商品移除事件
jQuery(document).on('removed_from_cart', function() {
  // 重复上面的AJAX请求逻辑
});

这段代码会在商品添加/移除后，主动请求最新的购物车片段，然后替换页面上的元素，确保IE11能正确更新数量。

4. 添加必要的ES5 Polyfill #

如果WooCommerce的核心JS用到了IE11不支持的API（比如Array.prototype.forEach、Promise），可以在页面头部添加polyfill来补全这些功能。你可以下载polyfill文件到本地后引入，比如：

<script src="/path/to/core-js-bundle.min.js"></script>

最后验证步骤 #

1. 清除IE11的缓存和Cookie，避免旧的JS缓存影响测试
2. 测试添加/移除商品，观察购物车数量是否实时更新
3. 打开IE11的开发者工具（F12），查看控制台是否有报错，根据报错信息调整代码

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