Horizon 变体选择：从选项标记到返回 HTML

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

变体选择不是只切换按钮选中样式。它还影响当前变体、可购买状态以及其他商品信息。阅读 Horizon 时，需要同时看选择器的初始标记和选中后的请求链。

Block 选择资源，Snippet 生成控件

blocks/variant-picker.liquid 取得商品资源并委托 snippets/variant-main-picker.liquid 渲染。片段按选项与设置组织按钮、色板或下拉；仅有默认变体的商品不输出这套选择器。色板的局部渲染继续进入 snippets/swatch.liquid。

商品选项数据和外观设置参与不同判断。要解释一种具体形态，必须跟踪实际条件分支，不能仅从 schema 中存在某个选项就断言它一定会显示。

请求范围取决于当前场景

assets/variant-picker.js 的 buildRequestUrl 使用选项值构造请求，并考虑关联商品地址以及当前组件所处场景。快速购买、商品卡色板和精选商品场景会参与分区参数选择；其他路径可能请求商品页面 HTML。

因此，不应把所有变体切换概括为“只替换当前卡片的几个字段”，也不能一律称为整个商品页重载。接着查看 fetchUpdatedSection 的调用参数和实际替换目标，才能确定本次更新边界。

异步结果需要协调多个消费者

组件会中止先前尚未完成的请求，解析新 HTML，并通过带 Promise 的商品选择事件传递结果。无有效变体时也有返回空资源的处理。assets/product-form.js 继续消费结果，更新变体字段、购买按钮和数量相关状态。

对定制的直接影响是：只修改选择器片段可能改变初始页面，却没有覆盖下一次返回的 HTML；只改视觉选中状态，也可能没有改变实际提交变体。

验证一次完整切换

用同一商品分别测试单选项、多选项、不可用组合和快速连续选择，记录选择值、请求 URL、返回变体、当前价格与购买字段。存在关联商品时，再检查页面地址和商品内容是否同步。

选项值的单复数、色板显示条件等细节应按固定版本追踪；本篇不把未复现的 UI 故障当成确定缺陷。继续阅读购买流程和商品卡。