本文介绍一种绕过 liquid 无法直接访问 localstorage 的限制、利用购物车属性持久化存储密码的可靠方案，实现 collection 页面的前端密码验证与内容条件渲染。
本文介绍一种绕过 liquid 无法直接访问 localstorage 的限制、利用购物车属性持久化存储密码的可靠方案，实现 collection 页面的前端密码验证与内容条件渲染。
在 Shopify 中，Liquid 是服务端模板语言，无法直接读取浏览器端的 localStorage（如 localStorage.getItem("password")），因此以下写法会报错：
{% if localStorage.getItem("password") == "123" %} <!-- ❌ 语法错误：Liquid 不认识 localStorage -->
{% include 'protected-collection' %}
{% endif %}
这是因为 {% %} 代码块在服务器渲染阶段即被解析执行，而 localStorage 只存在于客户端 JavaScript 运行时环境中，二者生命周期完全隔离。
✅ 正确思路是：将密码状态从客户端“同步”到服务端可访问的数据源——Shopify 提供的 cart.attributes 正是理想选择。它支持以键值对形式存储轻量级元数据，且可在 Liquid 中直接读取，同时具备跨页面刷新的持久性（有效期至购物车清空或超时）。
实现步骤
1. 前端提交密码并存入购物车属性
在密码表单提交时（例如点击“Enter”按钮后），使用 fetch 向 /cart/update.js 发送 POST 请求，将密码写入 cart.attributes.password：
// 示例：密码验证成功后执行
const password = document.getElementById('collection-password').value;
if (password === 'your-secret-password') {
fetch('/cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
attributes: { password: password } // ✅ 写入 cart.attributes.password
})
})
.then(() => window.location.reload()) // 刷新页面触发 Liquid 重新渲染
.catch(err => console.error('Failed to save password:', err));
}
⚠️ 注意：/cart/update.js 是 Shopify 官方支持的无刷新更新购物车属性的端点，无需额外 API 权限，且兼容所有主题。
2. Liquid 模板中条件渲染内容
在 collection.liquid 或自定义模板中，通过 cart.attributes.password 判断是否已授权：
{% if cart.attributes.password == 'your-secret-password' %}
{% include 'protected-collection' %} <!-- 已授权：显示受保护内容 -->
{% else %}
{% include 'protected-collection-form' %} <!-- 未授权：显示密码输入表单 -->
{% endif %}
✅ cart.attributes 在每次页面加载时由 Shopify 服务端自动注入，因此可安全用于 Liquid 条件判断。
3. （可选）退出登录逻辑
若需支持“登出”，可提供清除密码的按钮：
// 清除密码属性
fetch('/cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ attributes: { password: null } })
}).then(() => window.location.reload());
对应 Liquid 中可扩展为：
{% if cart.attributes.password == 'your-secret-password' %}
<p>Welcome! <a href="#" onclick="clearPassword(); return false;">Log out</a></p>
{% include 'protected-collection' %}
{% else %}
{% include 'protected-collection-form' %}
{% endif %}
关键优势与注意事项
- ✅ 服务端可控：所有权限判断在 Liquid 层完成，避免前端绕过（如禁用 JS 或篡改 localStorage）；
- ✅ 无需 App 或后端 API：纯前端 + Shopify 原生能力，零额外部署成本；
- ⚠️ 安全性提示：该方案适用于低敏感度场景（如预发布内容、会员预览）。密码明文存于 cart.attributes，不可用于高安全要求场景（如支付凭证）；生产环境建议配合 Shopify Password Protection 或第三方认证服务；
- ⚠️ 缓存兼容性：确保 CDN 或主题缓存策略不缓存含用户态 Liquid（如 cart.attributes），否则可能造成状态错乱；推荐对受保护页面禁用静态缓存，或使用 ?t={{ now | date: '%s' }} 动态参数辅助；
- ? 状态同步时机：cart.attributes 更新后必须刷新页面（或通过 turbo/hydrogen 等框架重载组件），才能触发新的 Liquid 渲染。
通过这一模式，你能在保持 Shopify 架构简洁性的同时，灵活实现基于密码的页面访问控制，兼顾开发效率与运行可靠性。
