如何在Shopify主题中实现用户选语言后不再弹出对应弹窗

实现思路 #

你站点现有的「不再显示」复选框已经实现了状态持久化（存储在LocalStorage/Cookie中），只需在用户点击语言选择按钮时复用这套逻辑即可，无需修改原有大体积的弹窗控制JS。

具体实现步骤 #

1. 复用原有复选框逻辑（推荐）
   直接给语言选择按钮绑定点击事件，自动勾选复选框并触发其原有change事件，就能复用已有的状态存储逻辑，代码示例如下：

document.addEventListener('DOMContentLoaded', function() {
  const langBtn = document.querySelector('.selector-button');
  const dismissCheckbox = document.getElementById('dismiss');
  
  if (langBtn && dismissCheckbox) {
    langBtn.addEventListener('click', function() {
      // 自动勾选不再显示复选框
      dismissCheckbox.checked = true;
      // 触发复选框原生change事件，执行原有存状态的逻辑
      dismissCheckbox.dispatchEvent(new Event('change'));
    });
  }
});

2. 特殊情况适配
   如果弹窗是动态加载的，上述事件绑定不生效，可以改用事件委托的写法：

document.addEventListener('click', function(e) {
  if (e.target.closest('.selector-button')) {
    const dismissCheckbox = document.getElementById('dismiss');
    if (dismissCheckbox) {
      dismissCheckbox.checked = true;
      dismissCheckbox.dispatchEvent(new Event('change'));
    }
  }
});

如果触发change事件后仍不生效，可以直接手动写入和原有复选框一致的存储标识：

• 先打开浏览器控制台「应用」面板，勾选复选框后查看LocalStorage/Cookie中变化的键名（通常为dismiss_popup、hide_popup这类命名）
• 在按钮点击事件中直接写入对应存储即可，示例：

// 写入LocalStorage示例
localStorage.setItem('你的存储键名', 'true');
// 写入Cookie示例，有效期1年
document.cookie = "你的存储键名=true; max-age=31536000; path=/; SameSite=Lax";

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