Shokz UK

实现方法

• 产品导航、首页模块和 Running、Everyday、Work 等场景页拆成独立 Online Store 2.0 section，系列入口指向 collection 或旗舰产品，不把配色做成独立 collection。
• theme.js 与 global.js 分别承接桌面 mega-nav 和移动端折叠，产品线、技术说明与支持入口分层，避免一层菜单同时承担选购和教育。
• Compare Products 只作为型号对照入口，不替代系列分流；翻新品走独立 collection，与在售主机分开。

部署与验收

• 公告条、UTMB 联名和 OpenDots 新品入口做成可单独替换的 section，改活动时不必重写导航骨架。
• 移动端把产品线和技术说明收入折叠层，保留触控热区和从系列到型号的焦点顺序。

实现方法

• custom_script-product-template-new.js 承接产品模板交互，把当前选项解析到商品表单；颜色、Mini/Standard 头围和联名款都作为 variant，不另建商品。
• product-benefit-variant.js 在变体变化时切换利益点文案，使开放耳道、重量、防水和续航说明跟随当前 SKU，而不是写死在首屏。
• 加购通过 Cart Ajax: add 提交当前 variant；长页中的购买条复用原商品表单的价格与按钮，避免出现第二套选项计算。
• cart-also-like.js 配合 Product Recommendations API，在加购后刷新充电线等配件，配件不进入主机选项矩阵。

部署与验收

• 产品页按 Overview、Features、Specs、Reviews、Support 拆成可滚动 section，顶部锚点导航保留当前型号名称和购买入口。
• 桌面端并列媒体与购买栏；移动端折叠规格表和尺寸指南，不挡住加购按钮。
• 长页购买条从原商品表单复制价格与加购按钮；编辑器重载产品模板时重新同步这两处，避免出现两套选项。

实现方法

• animation.gsap.js、TweenMax.min.js 与 ScrollMagic.js 把双单元驱动、开放耳道和稳固佩戴按滚动位置编排，触发条件绑定功能 section，而不是页面级时间轴。
• swiper.min.js 与 swiper8.min.js 承担公告条、运动员引用和产品媒体轮播；lottie.min-5.12.2.js 只用于结构示意，不覆盖变体控件。
• theme.js 与 global.js 统一 Tab、视频播放/暂停和锚点导航状态，使 Features、Specs 与购买入口使用同一套当前位置。

部署与验收

• 媒体通过 lazysizes.min.js 延迟加载；视频和 Lottie 在减少运动偏好下可暂停，避免遮挡加购或颜色选择。
• 桌面端用深色功能面板拉开阅读节奏；移动端缩短滚动段落并横向阅读轮播，功能动画失败时仍保留标题、规格和购买栏。
• 轮播与滚动模块随所属 section 初始化，编辑器替换某一功能块时不必重跑整页动画。