Shopify 购物车页(cart)配方
购物车页的任务是让顾客在结账前核对“买什么、买多少、大概付多少、下一步是什么”。它由 Shopify cart template type 承载,路径样例 /cart;cart 只有一个默认业务页面,所以本文把入口与配方合并。顾客进入时知道自己加购了什么,不知道的是金额如何构成、运费与优惠是否生效。
cart→ 可选 alternate(通常不需要)→ 购物车页 / 购物车抽屉 → 页面内容清单 → 内容 × 展现 → Theme 实现
购物车有两个入口:/cart 页面,以及许多主题提供的抽屉。抽屉不是 Template type,而是主题在页面上渲染的另一个入口,两者读同一份购物车。行项目、金额、数量与错误的模块契约见购物车摘要模块;本文只决定页面放哪些模块、按什么顺序、何时删掉。
先判断是否需要 alternate
默认 cart.json 已足够。官方 alternate 页面描述的是按资源在后台分配模板并用 ?view= 预览,没有说明 cart 这种无关联资源的类型如何选用 alternate,该做法未核验。有无追加购买、有无免运费规则,用同一模板内的 Section 与设置开关调整。一般规则见 Template type 与 alternate template。
页面内容清单
运行时数据不得写成静态文案;编辑内容各有权威来源,页面只放摘要与链接。
| 类别 | 优先级 | 页面内容 | 回答的问题 | 来源边界 |
|---|---|---|---|---|
| 运行时 | 核心 | 行项目(变体、图片、数量、行价) | 买的对不对 | 购物车对象 cart.items,不缓存 |
| 运行时 | 核心 | 小计、折扣、合计与结账入口 | 大概付多少、去哪结账 | 平台计算值,口径见购物车摘要 |
| 运行时 | 可选 | 折扣结果、数量规则与库存提示 | 优惠生效了吗、还能加吗 | 见促销兑现、库存状态 |
| 运行时 | 可选 | 运费预估、订单备注 | 大概运费、有无特殊说明 | 平台规则与交易动作;无法核实时写“结账时计算” |
| 编辑 | 可选 | 配送摘要与免运费提示 | 多久到、何时免运费 | 配送信息,数值与运费规则同源 |
| 编辑 | 可选 | 支付方式与退换、保证摘要 | 怎么付、买错能否退 | 支付方式只写结账实际启用的;保证详情摘要不得比正式条款更宽 |
| 编辑 | 可选 | 追加购买 | 还能配什么 | 关系与依据见交叉销售与追加购买 |
| 编辑 | 可选 | 客服入口 | 有问题找谁 | 客服渠道 |
| 编辑 | 空车时 | 浏览入口 | 接下来看什么 | 商品分类或特色商品 |
购物车页不复述完整政策、品牌故事或评价墙:顾客此刻的任务是核对与提交,长内容回到专门页面(如配送与退换页面)并以链接引用。
页面组合
顺序是待验证假设,不是必备清单。
| 序 | 模块 | 回答的问题 | 缺失时 |
|---|---|---|---|
| 1 | 行项目 | 买的对不对、数量能否改 | 不可缺;零项走空车状态 |
| 2 | 促销兑现 | 优惠有没有生效 | 没有可输入的优惠时删除,不放空输入框 |
| 3 | 免运费进度与运费预估 | 差多少免运费、大概运费 | 数据无法与运费规则同步时删除 |
| 4 | 摘要与结账入口 | 现在付多少、去哪结账 | 不可缺 |
| 5 | 追加购买 | 还能配什么 | 无可解释的搭配关系时整块删除,不用随机商品填充 |
| 6 | 配送、支付与退换摘要 | 多久到、怎么付、能否退 | 与结账实际不一致或无核实来源的项删除,不保留矛盾版本 |
| 7 | 客服入口 | 出问题怎么办 | 全站页脚已有入口时只留一条链接 |
最小成立组合:行项目 → 摘要与结账入口。需要优惠码时加第 2 段,运费规则稳定时加“结账时计算”文字。追加购买放在行项目之后还是摘要之下是待验证位置,无论哪种,结账入口都不得被遮挡或推离视线。
不应默认出现:评价墙、品牌故事、完整推荐列表、订阅表单、弹窗促销。它们回答决策阶段的问题,放进购物车会稀释“核对与提交”。
免运费进度:在已读官方页面中没有找到平台内置的进度机制,Shipping rates 帮助页只把免运费列为一种运费选项,未写按金额设门槛的细节。门槛数值必须与运费规则同源,不得在主题设置里另填一份长期不同步的数字;做不到时删除该模块,改用静态说明并写明“以结账为准”。
运费预估:Ajax Cart 提供 GET /cart/shipping_rates.json,页面写明它可能较慢且受限流,推荐 POST /cart/prepare_shipping_rates.json 加 GET /cart/async_shipping_rates.json,未算完时返回 null。预估需要目的地参数,结果未到时保留“结账时计算”。与结账实际金额的差异未核验,文案不写“总计”。
内容 × 展现形式
| 内容 | 首选形式 | 适用条件 | 退化方式 |
|---|---|---|---|
| 行项目 | 表格式列表 / 小屏单列List | 逐行改量与移除 | 单列列表 |
| 摘要与结账入口 | 侧栏摘要;小屏Sticky Bar | 桌面有余量 | 列表下方;固定入口不得遮挡错误信息 |
| 免运费进度 | 一行文字 | 数据同源 | 删除 |
| 追加购买 | 1 到 3 张商品卡 | 有可解释关系 | 整块删除 |
| 配送、支付、退换摘要 | 短列表加链接 | 每项有核实来源 | 一条“配送与退换”链接 |
| 抽屉入口 | Drawer | 加购后需就地核对 | 关闭 JavaScript 时退化为 /cart 链接 |
抽屉只放行项目、小计与结账入口;追加购买以外的政策摘要、客服入口与备注说明留在页面,抽屉里不放完整推荐列表与多步表单。
状态与退化
| 状态 | 页面级处理 |
|---|---|
| 空车 | 保留页面与标题,结账入口不可用并说明原因 |
| 加载与更新 | 保留原内容,禁止重复提交,金额区标记为更新中 |
| 库存不足、数量规则、折扣失败 | 各自就近提示,不合并成“更新失败”;类型见购物车摘要 |
| 商品失效 | 标出该行不可结账,不自动删除 |
| 跨市场 | 市场或币种变化后整页重读,配送与支付摘要一并复核 |
| 请求失败 | 保留数量与输入,可重试,结果未知时不宣称已更新 |
空车取舍:有稳定分类时,给 2 到 4 个分类入口和一个搜索入口;没有责任人维护的“推荐商品”不放,过期商品会变成误导。只留“继续购物”一个链接同样成立,哪种更好是待验证假设。Dawn 的空车分支可显示指定集合的卡片,见 Dawn 购物车与 Horizon 购物车。
Shopify Theme 实现
| 层次 | 已核验的机制 / 建议职责 |
|---|---|
| Template | 官方 cart 页面:渲染 /cart,模板为 templates/cart.json,可引用 Section;HTML 与 Liquid 必须在被引用的 Section 中 |
| Main Section | 官方 JSON templates 页面只把 main 当示例 ID,未规定必须有 main section;必须有的是表单 action="{{ routes.cart_url }}"、method="post",以及 type="submit"、name="checkout" 的结账控件 |
| Sections / Blocks | 模板最多 25 个 Section,每个最多 50 个 Block(JSON templates 页面所写);行项目、摘要、追加购买、政策摘要、客服入口分成可排序 Section |
| Settings | 开放内容选择与布局;不开放“覆盖金额或门槛”的开关 |
| 数据来源 | Liquid cart:items、items_subtotal_price、total_price、original_total_price、total_discount、cart_level_discount_applications、note、attributes、requires_shipping、taxes_included、checkout_charge_amount 等,口径见购物车摘要 |
| 动态更新 | Ajax Cart 的 add、change、clear、update 可用 sections 参数取回最多五个分区 HTML;备注与属性经 update.js 提交 |
| 结账 | 表单提交后进入 Shopify 结账。结账、感谢页与订单状态不属于 Theme template type,见 Template type与购买旅程 |
Section schema 页面写明 preset 是商家在“Add section”中可选的预定义配置,enabled_on 与 disabled_on 可限制 Section 出现的模板;没有 preset 的 Section 能否由编辑器添加,该页未明说,本文不断言。主题源码只链接已成文分析:Horizon 购物车、Dawn 购物车。
发布检查
- 空车、一件、多件、同商品两个变体,页面与抽屉数量和金额一致;
- 金额区没有自算数值,文案分清“小计”“预估”“结账时确认”;
- 免运费门槛、时效、支付方式与结账实际一致,或已删除该提示;
- 库存不足、数量规则与折扣失败各有就近提示,焦点没有随被销毁节点丢失;
- 追加购买加购后图标、抽屉与页面同步,已在购物车中的商品不再被推荐;
- 关闭 JavaScript 时抽屉退化为
/cart,表单仍能提交到结账; - 验证与记录方式见购买与事件验证与金额排查。
待继续完善
- 页面组成与顺序未在真实店铺验证;追加购买与空车入口的取舍需要样本;
- 免运费进度缺少与运费规则同步的可验证做法;cart 类型是否、如何使用 alternate 未核验;
- 本站关于运费与购物车金额的实验记录仍是未复现的草稿,不作依据;
checkout_charge_amount与结账实际金额的关系未核验。