核心实施拆解
从选型到加购：三条关键前端链路
高考虑的割草机器人，卖点不在首屏堆满 RTK 与全驱，而在于尽快回答“我家院子能不能用”。店面要把面积、地形、导航和安装预期写成同一条选型路径，再让长技术页在滚动中仍找得到当前型号。
项目背景
先明确客户怎么选，再决定前端承担什么
决策先由草坪面积和复杂度分流，再比较 X、i、H 与 Terranox 系列的导航、坡度、驱动方式和专业属性。安装方式、App、保修、配件、经销或专业咨询决定最后一公里。
Shopify 店面定制设计与前端开发；产品系列和技术内容模块；导航、购买路径与响应式适配。
01草坪适配
用面积和地形把用户送进正确系列
购买从“这片草坪适不适合”开始，而不是从参数表或价格开始。
- 01确认草坪面积与复杂度
- 02按导航能力和坡度进入系列
- 03对照系列能力选择主机
- 04打开对应产品页做现场验证
实现方法
- 页面按选型任务组织：适用面积、导航方式和地形能力先行，价格后置。
- 系列集合承担庭院场景导购；可售配置进入 variant，地图覆盖和安装服务不写成商品选项。
- 面积说明与技术卖点做成可复用模块，交给主题编辑器的 schema settings 维护。
部署与验收
- 桌面与移动端保持同一信息优先级：先完成适配判断，再展开型号细节。
- 季节性的草坪场景文案可以单独更新，不必改动主机商品表单。
最终效果实现后的变化
- 用户能先得到适不适合的答案，再进入具体型号。
- 新型号沿用面积、地形和导航字段，即可进入同一条导购路径。
02长页阅读
让滚动中的技术区块始终对得上当前型号
产品页必须讲清导航、安全、安装和维护，但不能让用户在长页里失去位置。
- 01进入主机产品页
- 02用页内锚点跟随阅读位置
- 03展开功能画廊、视频和规格组
- 04随时回到当前型号的购买区
实现方法
- navimow-product-navibar.js 维护产品内锚点，滚动时高亮正在阅读的技术区块。
- 桌面端固定型号锚点；移动端用 nw-tab-scroller.js 做横向标签，降低长页迷失。
- product-features-image-gallery.js 结合 Swiper 展示功能图示，navimow-video-url.js 解析视频源，product-collapsible-2607.js 折叠规格组。
部署与验收
- 产品页的 Shopify section events 会在 section 重载后恢复导航条和画廊绑定，避免主题编辑器里控件失效。
- 局部更新走 Section Rendering API，只重挂受影响模块的监听。
- 视频保留暂停和替代说明；弹层不得挡住主加购。
最终效果实现后的变化
- 用户在长技术页里能确认自己在看哪一段，也能回到当前型号的购买位置。
- 运营更新功能模块后，导航和画廊在编辑器重载后仍可继续使用。
查看脚本与 Shopify API 依据
navimow-product-navibar.jsnw-tab-scroller.jsproduct-features-image-gallery.jsswiper-bundle.min.jsnavimow-video-url.jsproduct-collapsible-2607.jsShopify section eventsSection Rendering API03购买收口
适配确认后，一次收齐主机、配件和可售地区
价格和加购只有在草坪适配、地区可售都清楚之后才有说服力；刀片、天线和安装件应作为兼容配件出现。
- 01确认当前地区可售
- 02选择主机配置并加入购物车
- 03看到兼容刀片、天线与安装件
实现方法
- 主机与配件以 product 和 variant 成交；刀片、天线和安装件作为兼容配件，而不是主机选项。
- theme.js 与 cart.js 协同处理全局交互，并通过 Ajax Cart 的 add、change、update、clear 回写购物车；product-x-get-y.js 处理满赠状态。
- 产品页按当前主机上下文调用 Product Recommendations API，补充相关配件。
- country-options.js 提供国家切换，默认交易语境为 en-US。
部署与验收
- 推荐区异步加载，接口失败时不阻塞价格和购买按钮。
- 认证、安装和货运限制按目的地维护；导航技术与主机规格保持共享。
- 站点头由 navimow-header.js 维护，地区切换不复制整条选型链路；弹层不得覆盖主加购。
最终效果实现后的变化
- 用户在确认适配和地区后，可以完成主机加购并看到匹配配件。
- 美国默认站连接到欧洲、英国、加拿大、澳大利亚等地区站时，核心选型模块不必按市场重做。
查看脚本与 Shopify API 依据
theme.jscart.jsCart Ajax: addCart Ajax: changeCart Ajax: updateCart Ajax: clearproduct-x-get-y.jsProduct Recommendations APIcountry-options.jsnavimow-header.jsnw-popups-group.js运营交接
上线之后，运营团队可以继续维护
- 公开目录以智能割草机器人主机为交易对象，产品页承载 i2 AWD、i2 LiDAR 等型号。
- 适用面积、导航方式、地形能力和配件包是选型主轴；刀片、天线和安装件作为兼容配件维护。
- 地图覆盖与安装服务写成运营内容，不进入商品选项；可售配置留在 variant。
- 结账预加载使用 locale=en-US，默认交易语境为美国英语，并连接欧洲、英国、加拿大、澳大利亚等地区站。
- country-options.js 提供国家切换；适用面积指导、认证、安装服务和货运限制按目的地维护。
- 导航技术与主机规格保持共享，季节性割草说明、售后网点和配件供给作为可编辑运营内容单独发布。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-20