核心实施拆解
从选型到加购:三条关键前端链路
WYBOT 的成交顺序是池型、能力、证明、再下单。地上或地下泳池、面积和表面先筛掉不合适的机器,C1 与 C2 再用覆盖、续航、过滤和 App 控制对齐;产品页负责把轨迹、截污和回岸变成可核对的证据,滤芯与充电盖则离开主机变体,作为独立备件承接使用后的维护。
项目背景
先明确客户怎么选,再决定前端承担什么
购买从地上/地下泳池、面积与表面开始,再比较 C、S 等系列的覆盖模式、运行时长、清洁路径、过滤和自动回岸。真实清洁视频、评价、保修和备件可用性完成信任。
WESWOO 的项目策略应把系列差异写进数据和比较,而不是反复制作营销长图。用户以泳池条件进入,经过适配与验证后购买,备件与支持构成完整生命周期。
01池型分流
先用泳池条件筛型号,再把 C1 与 C2 放进同一组能力
无线泳池清洁机器人作为交易主机,池型进入集合分流,覆盖、续航、过滤和 App 写成可比较字段,避免相邻型号只靠价格区分。
- 01确认地上或地下泳池、面积与池面
- 02进入无线泳池机器人范围
- 03按覆盖、续航、过滤和 App 对齐 C1 与 C2
- 04带着已确认的池型进入对应产品页
实现方法
- 集合承担池型分流,目录只把无线泳池清洁机器人当作主机,不把所有清洁设备混在同一货架。
- 覆盖范围、运行时长、过滤精度和 App 控制写在产品对象上,C 系列比较读取同一组规格字段。
- 颜色留在变体,不进入规格对照;Predictive Search 在输入阶段返回商品与系列建议,先把用户送进正确范围。
部署与验收
- 池型、系列和核心规格先建成可复用字段,搜索与比较共同读取,避免为活动页手工复制对照表。
- 搜索保留加载、无结果和键盘操作状态;移动端把覆盖、续航、过滤收在同一套标记里,保证 C1 与 C2 在手机上仍可核对。
最终效果实现后的变化
- 用户先完成泳池适配,再在相邻型号之间做能力选择,而不是在价格标签之间猜测。
- 新型号沿用同一规格结构后即可进入集合、搜索和比较,不必重做一套营销长图。
查看脚本与 Shopify API 依据
Predictive Search API02清洁证明
让水下轨迹、截污和回岸先于装饰出现
产品页把清洁过程做成主视觉证据,规格卡、颜色选择和购买按钮保持可操作,媒体不能把交易挤出屏幕。
- 01先阅读覆盖模式与水下运动
- 02对照规格卡上的续航、过滤和 App
- 03选择在售颜色
- 04提交当前商品表单
实现方法
- 品牌蓝绿用来分开机身与水体,主视觉优先展示轨迹、截污和回岸,而不是装饰性渐变。
- 媒体序列由 Swiper 轮播承担;规格卡、模式图标和购买按钮具备选中、禁用与加载态,C1 与 C2 在卡片层即可扫描差异。
- 颜色变体驱动商品表单,加购走 Shopify Ajax Cart 的 add,页面上的配置与真正入车对象保持一致。
部署与验收
- lazysizes 处理图片懒加载,但不能推迟首屏关键规格;移动端避免连续自动播放视频。
- Section Rendering API 局部重绘后重新绑定轮播与表单,避免媒体区刷新后购买控件失效。
- 加购后的升级与赠品弹层来自应用扩展,必须让开主购买控件,不能盖住加购按钮。
最终效果实现后的变化
- 用户在同一张产品页完成“这台机器怎么清洁”和“我买哪个颜色”。
- C1 与 C2 共用同一套证据和控件语言,上新时主要替换媒体与规格,不必重写整页叙事。
查看脚本与 Shopify API 依据
swiper-bundle.min.jslazysizes.min.jsProduct form behaviorCart Ajax: addSection Rendering APIlb-upsell.js03主机与备件
主机按颜色成交,滤芯和充电盖走独立库存
把耗材从主机变体里拆出去,购物车数量变更和赠品规则都不改写加购契约,售后补件不必重新解释整机。
- 01主机以在售颜色完成加购
- 02购物车回写数量、行项目与赠品
- 03备件集合承接滤芯与充电盖复购
实现方法
- 在售颜色留在主机变体;滤芯、充电盖保持独立 SKU,库存和售后与主机分开维护。
- 商品表单提交后,购物车状态以 Ajax Cart 的 add、change、update 回写,改数量时不再重新选择型号。
- 升级与赠品由应用扩展在加购后处理,主题只稳住主机加购契约,不把促销规则写进主题内核。
部署与验收
- 规格、视频和购买栏按 section 拆开,运营调整 C1/C2 内容时不改加购请求。
- 可售颜色、赠品、插头和配送说明作为地区运营层编辑,不改 Ajax Cart 的请求结构。
- 结账预加载使用 locale=en-US;欧洲、加拿大与澳大利亚的季节、仓储、币种呈现和保修按站点维护,C 系列规格保持跨站共享。
最终效果实现后的变化
- 买主机和补耗材是两条清楚的路径,售后补件不必重新讲一遍整机型号。
- 季节赠品可以按市场开关,不影响 C 系列规格在各站点复用。
查看脚本与 Shopify API 依据
Product form behaviorCart Ajax: addCart Ajax: changeCart Ajax: updatelb-upsell.jsfreeGiftV2.min.js运营交接
上线之后,运营团队可以继续维护
- 目录以无线泳池清洁机器人为主机,集合按地上/地下泳池等条件分流。
- 覆盖、续航、过滤和 App 控制写在产品对象上;在售颜色进入变体。
- 滤芯与充电盖作为兼容备件使用独立 SKU,C1 与 C2 的比较读取同一组规格字段。
- 默认交易语境为 en-US;美国、欧洲、加拿大与澳大利亚分别维护季节窗口、插头、仓储、币种呈现和保修。
- C 系列规格可跨站点复用;可售颜色、赠品和配送说明按地区编辑,不改加购请求。
- 地区入口按站点配置,核心选型与购买流程不因市场切换再复制一套。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12