核心实施拆解
从选型到加购：三条关键前端链路
iGarden 同时卖泳池清洁机器人和逆流训练设备。客群相近，适配问题却几乎不重叠。店面要先按任务分开目录，再用商品对象、变体和关联配件把“这池能不能用”写成可下单配置；搜索、抽屉购物车和市场入口保持共用，季节活动才不必另做一套购买路径。
项目背景
先明确客户怎么选，再决定前端承担什么
用户先输入泳池类型与面积，再比较只清池底或覆盖墙面/水线、运行时长、路径规划、吸力与过滤。K/K Pro、M1-AI、KN 等系列需要用清晰矩阵解释价格差，而非只靠旗舰标签。
Shopify 产品页与系列页前端、规格与比较模块、响应式商品叙事和购买流程支持。
01目录分流
清洁任务和训练任务，不要放进同一组选项
用户先进入泳池清洁或逆流训练，再按池况、覆盖或安装条件锁定主机；颜色和在售套装才进入变体，喷嘴与固定件作为关联商品。
- 01按清洁或训练进入对应系列
- 02用泳池尺寸、覆盖能力或安装条件锁定主机
- 03颜色与在售套装落到变体
- 04喷嘴、固定件和耗材作为关联商品
实现方法
- Shopify 系列按任务拆分泳池清洁与逆流训练，避免同一张集合页混用两套选型问题。
- 功率、覆盖范围和安装条件写在商品对象上，供产品页和搜索读取，而不是只出现在富文本里。
- 变体只代表当前可售配置；喷嘴、固定件和耗材用关联商品承接，避免把配件全部做成变体矩阵。
部署与验收
- 泳池规格说明和季节促销文案通过主题 schema settings 交给运营维护。
- 主机与配件始终作为 product / variant 交易；Predictive Search 按系列和商品返回建议，帮助用户先进入正确任务范围。
最终效果实现后的变化
- 用户进店后先回答正确的那组问题，再看到对应主机。
- 新品上架主要维护系列归属、规格字段和关联商品，不必重写整页文案结构。
查看脚本与 Shopify API 依据
predictive-search.jsPredictive Search API02产品页同步
逆流机的档位一变，结构图和加购对象必须一起变
Swim Jet X、Swim Jet P 的首屏要能核对出水方向、安装宽度和便携体积。选项变化需要同时驱动媒体、价格和将要提交的变体。
- 01解析当前商品与选项
- 02通过 pubsub 分发变体状态
- 03同步画廊、放大窗和价格
- 04商品表单提交同一变体
实现方法
- product-form.js 承担商品模板内的加购提交，始终使用当前变体，而不是页面上另一处仅供展示的选中项。
- media-gallery.js 与 product-modal.js 订阅同一变体变化，主图、缩略图和放大查看跟随当前配置。
- pubsub.js 在表单、媒体和价格模块之间传递状态，避免每个组件单独判断用户选了什么。
部署与验收
- Shopify section 重载后重新挂接画廊和加购绑定，避免主题编辑器里监听丢失或重复注册。
- 轮播由 Swiper 11 驱动，图片走 progressive-image.js；长规格在移动端折叠，抽屉购物车不盖住安装说明。
- 训练视频保留暂停，动效提供可减弱路径，避免演示打断尺寸核对。
最终效果实现后的变化
- 切换功率或安装配置时，结构图、价格和加入购物车的对象保持一致。
- 桌面端可以并列训练场景与购买栏，移动端仍能完成核对和加购。
查看脚本与 Shopify API 依据
product-form.jsmedia-gallery.jsproduct-modal.jspubsub.jsswiper-bundle-11.min.jsprogressive-image.jsanimations.jsShopify section events03购物车成交
主机、配件和季节折扣要写回同一张抽屉
高客单主机加购之后，喷嘴、固定件或耗材还要能进入同一购物车，促销是否生效也必须立刻可见。
- 01商品表单提交主机变体
- 02附加商品写入同一购物车
- 03抽屉按服务器购物车和主题折扣脚本回写结果
实现方法
- 加购、改数量和更新都走 Shopify Ajax Cart，服务器返回的 cart JSON 作为行项目唯一来源。
- additional-product.js 把喷嘴、固定件等附加商品接到当前购物车上下文，而不是另开结算。
- igarden-cart.js 与 igarden-cart-discounts.js 在主题层整理行项目和折扣回显，使优惠生效状态能与主加购按钮区分。
部署与验收
- cart-drawer.js、cart.js 与 cart-notification.js 在抽屉内同步数量、删除和反馈；quantity-popover.js 处理数量提示，避免和主按钮抢状态。
- 缺货、套装加购和折扣生效使用可区分的界面状态；季节文案调整不改动购物车折扣脚本。
最终效果实现后的变化
- 用户加购主机后，能在原页面补齐配件，并看到折扣是否已经作用到当前行项目。
- 运营更新季节促销时只需维护优惠与文案，不必重写加购和抽屉逻辑。
查看脚本与 Shopify API 依据
product-form.jsadditional-product.jscart-drawer.jscart.jscart-notification.jsigarden-cart.jsigarden-cart-discounts.jsquantity-popover.jsCart Ajax: addCart Ajax: changeCart Ajax: update运营交接
上线之后，运营团队可以继续维护
- 系列按泳池清洁与逆流训练拆开，清洁机器人与 Swim Jet 主机各自进入对应任务目录，而不是混在一张总货盘里。
- 功率、覆盖和安装条件放在商品字段；颜色和在售套装用变体；喷嘴、固定件、耗材用关联商品维护。
- 规格说明和季节促销走主题 schema settings，避免把泳池适配写进无法复用的营销模块。
- 结账预加载使用 locale=en-US，美国英语为默认交易语境。
- localization-form.js 提供店面地区切换，pickup-availability.js 查询本地取货。
- 插头、电压、泳池季节、配送窗口和保修按目的地维护；主机规格可跨市场共享，改地区文案时不改动 igarden-cart.js。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12