如何实现添加购物车成功消息在自定义菜单页展示？

下面提供两种简单可行的实现方式，适配你当前的重定向逻辑：

方法一：URL参数传递状态 #

这种方法不需要额外存储，通过URL参数标记添加状态：

1. 修改「add to cart」的处理逻辑，在重定向到菜单页时，给URL追加状态参数，比如：

   // 点击按钮后的重定向代码示例
   window.location.href = 'https://notjustcurries.ca/our-menu/?added=success';
   

2. 在菜单页的前端代码中，添加页面加载检测逻辑：

   document.addEventListener('DOMContentLoaded', () => {
     const params = new URLSearchParams(window.location.search);
     if (params.get('added') === 'success') {
       // 创建提示框
       const toast = document.createElement('div');
       toast.className = 'cart-toast'; // 可以用你网站已有的样式类
       toast.textContent = 'You have added this product to the cart';
       // 基础样式（可根据网站风格调整）
       toast.style.cssText = `
         position: fixed;
         top: 30px;
         right: 30px;
         background: #2ecc71;
         color: white;
         padding: 16px 24px;
         border-radius: 6px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.15);
         z-index: 9999;
       `;
       document.body.appendChild(toast);
   
       // 3秒后自动隐藏并清理URL参数
       setTimeout(() => {
         toast.remove();
         window.history.replaceState({}, document.title, window.location.pathname);
       }, 3000);
     }
   });
   

方法二：会话存储（sessionStorage） #

这种方法不会暴露URL参数，更隐蔽：

1. 在「add to cart」的处理逻辑中，先标记会话存储再重定向：

   // 点击按钮后执行
   sessionStorage.setItem('cart_added', '1');
   window.location.href = 'https://notjustcurries.ca/our-menu/';
   

2. 菜单页加载时检测会话存储：

   document.addEventListener('DOMContentLoaded', () => {
     if (sessionStorage.getItem('cart_added') === '1') {
       // 同方法一创建提示框的代码
       const toast = document.createElement('div');
       toast.className = 'cart-toast';
       toast.textContent = 'You have added this product to the cart';
       toast.style.cssText = `
         position: fixed;
         top: 30px;
         right: 30px;
         background: #2ecc71;
         color: white;
         padding: 16px 24px;
         border-radius: 6px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.15);
         z-index: 9999;
       `;
       document.body.appendChild(toast);
   
       // 隐藏后清除会话存储
       setTimeout(() => {
         toast.remove();
         sessionStorage.removeItem('cart_added');
       }, 3000);
     }
   });
   

补充说明 #

• 如果你的网站是WordPress搭建的，可以把上述JS代码添加到主题的「自定义JavaScript」面板，或者通过代码片段插件插入。
• 提示框的样式可以完全复用你网站现有的通知组件样式，替换掉示例中的inline CSS即可，保证风格统一。

内容的提问来源于stack exchange，提问作者Rebecca Kurtis Rawsthorne