切换变体后价格和主图不跟着变怎么排查

现象#

选黑色时价格是 199，切到白色仍显示 199，主图也没换；刷新页面后白色才变成 229，分享出去的 ?variant= 链接打开也停在默认款。

原因#

• 主题 JS 监听原生 select[name=id] 的 change，换成色块后事件不再触发
• 价格和图片首屏由 Liquid 输出，客户端切换只改了选项状态没改 DOM
• ?variant= 只在服务端由 selected_or_first_available_variant 读取一次
• section rendering 返回的片段被缓存，切换时拿到的是旧价格

处理步骤#

1. 在变体选择容器上监听 change，或直接监听主题抛出的 variant:change
2. 切换后按 variant.id 更新价格节点，不要按选项索引取
3. 用 history.replaceState 把地址栏 ?variant= 同步成当前 id
4. 图片按 variant.featured_media.id 匹配，匹配不到再回退商品首图
5. 关掉该 section 的片段缓存或加版本参数后再复测一次

验收标准#

连续切换 3 个变体，价格、主图、SKU 三处同步变化；复制地址栏 URL 新开窗口仍停在同一变体。