交互、SEO 与发布验收
在真实模块和数据之上,验证键盘、可读输出与发布恢复。
客服浮层与可关闭对话框
全局按钮先有可用的帮助链接,再增强为对话框。打开、关闭、Esc 和焦点恢复要成套处理,手机避开购买和系统操作区域。
数据与依赖
- 原生 dialog、可访问标题和关闭按钮。
- 传入 trigger/dialog 两个实际元素。
交互逻辑
- 用户主动打开;关闭后焦点回到入口。
- 减少动效时不强加动画,外层页面不被误操作。
示例代码 · assets/ww-help-dialog.js
export function bindHelpDialog(trigger, dialog) {
let returnFocus;
trigger.addEventListener('click', () => {
if (dialog.open) return;
returnFocus = document.activeElement;
dialog.showModal();
});
dialog.querySelector('[data-close]').addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => returnFocus?.focus());
}
// Supply a native <dialog> with an accessible heading and type=button close control.
// Keep ordinary help and contact links available without JavaScript.
// Do not show a promotion automatically over a mobile buying control.
验收检查
- 用 Tab、Esc、触摸和屏幕缩放测试。
- 核关闭后主标题与购买入口可见。
示例函数需要原生 dialog 标记和普通帮助链接;不自动采集访客信息。
可读 HTML、规范地址与商品标记
先检查型号、价格、库存和政策的可见输出,再核结构化数据。由实际 product 对象生成标记,避免重复输出或另造评分与报价。
数据与依赖
- 真实 product/article 对象与当前页面主地址。
- 来源、市场、变体与可见正文相符。
交互逻辑
- 切换变体后核当前展示及声明一致。
- 筛选参数按实际抓取与索引策略管理。
示例代码 · snippets/ww-product-schema.liquid
{% if product != blank %}
<script type="application/ld+json">
{{ product | structured_data }}
</script>
{% endif %}
验收检查
- 查看原始 HTML 与真实渲染。
- 检查一个正确主实体,核缺货和市场变化。
若主题已输出标记,应修改现有输出而非再粘贴一份。代码只用于实际商品模板,不用于本知识页面生成 Product。
从静态检查到发布与恢复
先保存源码、锁文件与数据样本,再运行适用的静态检查。预览通过后按市场核正式切换与恢复状态,确认商品、购物车和结账交接仍一致。
数据与依赖
- 当前主题/框架版本和构建脚本。
- 已批准的预览环境、变量与回退目标。
交互逻辑
- 主题检查与 Headless 构建分别执行。
- Oxygen 变量变更后重部署,旧版本恢复仍需核依赖。
示例代码 · project-verification.txt
# From a Shopify theme project, before preview acceptance:
shopify theme check --path .
git diff --check
# From a Headless project whose package.json defines these scripts:
npm run typecheck
npm run build
# After static checks: preview each market and recheck after a version switch.
# Retain the exact commit, lockfile, environment and recovery target.
验收检查
- 手机、平板、桌面及相关语言逐项检查。
- 保留真实 URL、结果、来源和前后哈希。
静态检查与示例浏览器验证不等于已在商家 Shopify 店铺安装验收;上线需接项目实际环境。
先理解,再整合,最后验证
- 选择模块,确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。
依据核对 2026-11-12