如何合并两个JavaScript onclick事件到单个按钮？现有方案通知不显示

嘿，这个问题我太熟了！你遇到的核心问题是页面跳转打断了通知的渲染——当你调用window.location.href时，浏览器会立刻开始加载新页面，根本没来得及把UIkit的通知显示出来就跳走了。下面给你两种靠谱的解决思路：

方案1：延迟跳转，给通知留显示时间 #

这种方法简单直接，适合不想改太多代码的场景，通过setTimeout让页面跳转延迟几秒，确保用户能看到通知：

<script>
function combinedAction() {
  // 先显示通知，设置显示时长为2秒
  UIkit.notification({
    message: '商品已添加到购物车！',
    timeout: 2000
  });
  
  // 延迟2秒后执行页面跳转
  setTimeout(() => {
    window.location.href = 'https://chatsales.nl/pakketten/doe-het-zelf?add-to-cart=420';
  }, 2000);
}
</script>
<button type="button" onclick="combinedAction()">点击添加购物车</button>

注意点： #

• 你可以根据需求调整延迟时间（比如1500毫秒=1.5秒），平衡通知可见性和跳转速度
• 如果用户在通知显示期间点击其他地方，跳转依然会执行，不影响功能

方案2：用WooCommerce AJAX添加购物车（更优雅） #

这是WooCommerce的最佳实践，通过AJAX异步添加商品，页面不需要跳转，通知能正常显示，用户体验更流畅：

<script>
function combinedAction() {
  // 发起AJAX请求添加商品到购物车
  fetch('?add-to-cart=420', {
    method: 'POST',
    headers: {
      // 利用WooCommerce自带的非ce验证确保请求安全
      'X-WP-Nonce': wc_add_to_cart_params.nonce,
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
  .then(response => {
    if (response.ok) {
      // 添加成功，显示成功通知
      UIkit.notification({
        message: '商品已成功添加到购物车！',
        status: 'success'
      });
      
      // 可选：触发购物车片段刷新，更新页面上的购物车数量显示
      if (typeof wc_cart_fragments_params !== 'undefined') {
        jQuery(document.body).trigger('wc_fragment_refresh');
      }
    } else {
      // 添加失败，显示错误通知
      UIkit.notification({
        message: '添加购物车失败，请重试！',
        status: 'danger'
      });
    }
  })
  .catch(error => {
    console.error('添加出错:', error);
    UIkit.notification({
      message: '网络错误，请稍后再试！',
      status: 'danger'
    });
  });
}
</script>
<button type="button" onclick="combinedAction()">点击添加购物车</button>

注意点： #

• 确保你的WordPress主题已经加载了WooCommerce的前端脚本（wc_add_to_cart_params等变量是WooCommerce默认提供的，只要开启了AJAX添加功能就会存在）
• 这种方法不需要跳转页面，用户可以继续浏览当前内容，体验更好

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