Shopify Liquid集合页面密码保护：localStorage校验方案咨询

你之前的写法报错核心原因是：Liquid是服务器端渲染语言，会在页面发送到浏览器前就执行完毕，而JS是客户端代码，在浏览器中运行。把Liquid的{% include %}标签直接嵌在JS的if/else里，服务器会先把两个snippet的HTML直接输出到JS代码中，导致JS语法错误——HTML代码并不是合法的JavaScript语句。

下面是两种最优实现方案：

方案一：提前渲染所有内容，用JS控制显示隐藏（简单高效） #

这种方法让Liquid先把两个snippet的内容都渲染到页面上，默认隐藏，再用JS根据localStorage的状态切换显示哪个。

<!-- 渲染密码表单和受保护内容，默认都隐藏 -->
<div id="password-form" class="hidden">
  {% include 'protected-collection-form' %}
</div>
<div id="collection-content" class="hidden">
  {% include 'protected-collection' %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const savedPassword = localStorage.getItem('password');
  const formEl = document.getElementById('password-form');
  const contentEl = document.getElementById('collection-content');
  const correctPassword = '你的目标密码'; // 建议不要明文写，可结合Shopify元字段从后端获取

  // 校验localStorage，切换显示状态
  if (savedPassword === correctPassword) {
    contentEl.classList.remove('hidden');
  } else {
    formEl.classList.remove('hidden');
    // 处理表单提交逻辑
    const form = formEl.querySelector('form');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const inputPwd = form.querySelector('input[name="password"]').value;
      if (inputPwd === correctPassword) {
        localStorage.setItem('password', inputPwd);
        formEl.classList.add('hidden');
        contentEl.classList.remove('hidden');
      } else {
        alert('密码错误，请重试');
      }
    });
  }
});
</script>

<style>
.hidden { display: none; }
</style>

优势： #

• 避免服务器端与客户端代码混写的冲突，不会出现JS语法错误
• 页面加载后直接切换显示，无额外网络请求，体验流畅
• 逻辑清晰，维护成本低

方案二：AJAX动态加载受保护内容（适合内容较大的场景） #

如果不想一开始就渲染受保护的集合内容，可以通过AJAX请求在校验通过后再加载：

1. 创建一个新的Shopify页面（比如命名为ajax-protected-collection），页面内容仅写：

{% include 'protected-collection' %}

2. 在集合页面模板中：

<div id="content-container">
  {% include 'protected-collection-form' %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const savedPassword = localStorage.getItem('password');
  const container = document.getElementById('content-container');
  const correctPassword = '你的目标密码';

  // 已保存正确密码，直接加载内容
  if (savedPassword === correctPassword) {
    loadProtectedContent();
  }

  // 表单提交处理
  const form = container.querySelector('form');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const inputPwd = form.querySelector('input[name="password"]').value;
    if (inputPwd === correctPassword) {
      localStorage.setItem('password', inputPwd);
      loadProtectedContent();
    } else {
      alert('密码错误');
    }
  });

  // 封装AJAX加载函数
  function loadProtectedContent() {
    fetch('/pages/ajax-protected-collection')
      .then(res => res.text())
      .then(html => {
        container.innerHTML = html;
      })
      .catch(err => console.error('加载内容失败:', err));
  }
});
</script>

重要提醒： #

前端校验密码的方式并不安全，用户可通过查看JS代码获取密码。如果需要真正的权限控制，建议结合Shopify后端校验：比如将密码存储在集合的元字段中，提交表单时发送请求到后端（通过Shopify AJAX API或自定义应用）校验，校验通过后设置Cookie，后续请求通过Cookie判断权限。

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