Horizon 商品卡：上下文、子内容与快速购买

本文基于 Horizon 4.2.0，源码固定到 5acd1b6（核验于 2026-10-07）。结论限于此 commit，不表示其他版本行为相同；本篇为源码分析，未完成店铺运行验证。

商品卡复用的是一组展示和交互入口，商品对象仍由调用场景提供。先从商品循环追到卡片，比从某个价格或图片片段反推整体结构更容易确认上下文。

从集合循环进入卡片

sections/main-collection.liquid 在商品循环中调用 _product-card，显式传递当前商品。blocks/_product-card.liquid 再收集卡片子块，把商品和子内容交给 snippets/product-card.liquid。

这意味着卡片中的标题、价格和媒体应属于该次循环商品。复制卡片到其他区域时，需要核对商品上下文、子块组合及空商品分支，而不是只复制最终 HTML。

标记与交互各有入口

卡片媒体继续进入 snippets/card-gallery.liquid，快速购买的标记见 snippets/quick-add.liquid。这两部分回答“初始输出什么”；打开弹窗、请求商品内容、选择变体和刷新缓存，要继续读 assets/quick-add.js。本版本的 snippets/scripts.liquid 只在开启快速购买或移动端快速购买设置时才输出该脚本的 <script> 标签（assets/product-hotspot.js 仍会通过模块导入加载它），关闭设置后页面上没有这个脚本标签不代表加载失败。

本版本的快速购买会获取并缓存商品页面内容，也会在购物车更新时清除缓存。它还对使用 selling plans 的路径作出跳转处理。因此，不能把快速购买简单等同为所有商品都直接加入购物车。

商品卡不是缩小后的完整商品页

卡片承担的是浏览、比较和进入购买的任务。它可以复用商品页片段，但上下文、可见区域和更新范围不同。修改共享片段时应同时检查集合卡片、推荐卡片和快速购买弹窗。

关于卡片的业务内容选择见商品概述；本篇只解释 Horizon 的实现入口。

如何校核图片与购买行为

图片加载策略需要结合循环条件、输出属性和网络记录。不要把 Liquid 逻辑按 JavaScript 的习惯分组，也不要仅凭一次出现 eager 就断言所有图片都预加载；具体方法见源码阅读与校核。

购买验证至少包括：打开不同商品的弹窗、选中不同变体、不可用选项、关闭后重开、购物车变化后再次打开，以及小屏与键盘关闭。本篇只核对了代码路径，尚未执行这些店铺场景。