核心实施拆解
从选型到加购：三条关键前端链路
A-Spadz 面向欧洲卖的是 CAVET 系列，不是一张铺开的电单车目录。店面要连续完成三件事：按骑行任务选主机，把车色和兼容配件配在同一辆车上，并在对的国家目录里看到门店、质保和结算语言。
项目背景
先明确客户怎么选，再决定前端承担什么
CAVET Air、CAVET 与 Air-Combo 通过价格、容量、续航和使用场景分层；用户先判断个人通勤或双人组合，再选择颜色并配套电池、车架包、前后货架等附件。
WESWOO 的重点是围绕少量核心车型建立完整生命周期：选型、颜色、组合、附件、门店、注册和质保贯通，避免品牌前端只强调造型而缺乏服务可信度。
01车型分流
先把通勤、续航和双人购买收成三款 CAVET
欧洲站用少数主机完成选型。首页按价格、电池和使用场景分开 CAVET Air、CAVET 与 Combo，用户进入产品页时已经站在明确的骑行任务上。
- 01在首页识别三款核心车型
- 02按个人通勤或双人组合进入对应产品页
- 03对照骑姿、动力与续航确认主机
- 04再进入颜色和配件
实现方法
- 目录主干只有 CAVET、CAVET2（CAVET Air）等独立产品；Combo 作为双人购买入口，而不是把所有差异写进同一个变体矩阵。
- 产品卡在窄屏也露出电池、扭矩、续航和传感器，让首页和系列页用同一组比较字段。
- 替换件单独成组，避免零件和车架包冲进主机层级，干扰车型判断。
部署与验收
- 车型名称和核心规格跨欧洲市场复用；场景说明放在产品模板的 section 与 block 里，可按车型单独更新。
- 列表页的快速加购只处理当前车型的默认可售状态，完整配置仍回到产品页。
最终效果实现后的变化
- 用户先完成“买哪一种骑行任务”，不会在配件和替换件里打转。
- 调整 Combo 或上新主机时，主要维护少量产品对象和场景模块。
查看脚本与 Shopify API 依据
quick-add.js02颜色配置
让车色同时驱动图片、价格和粘性购买栏
颜色是这台车上需要立刻买对的变体。切换车色后，媒体、价格、缺货状态和粘性栏必须指向同一辆车，随后再把电池、车架包或货架作为关联商品补上。
- 01在产品页选择车色
- 02同步媒体、规格与可售状态
- 03粘性栏回显当前颜色与价格
- 04提交正确变体后再补齐配件
实现方法
- product-info.js 保持车型与颜色状态一致，media-gallery.js 切换对应媒体，product-form.js 把同一变体交给购买表单。
- shine-trust-v4-sticky-cart.js 只回显当前颜色、价格和主操作，不再另算一套选项。
- shine-trust-v4-bought-together.js、shine-trust-v4-buyx-gety.js 与 Product Recommendations 把电池、包袋、货架和满赠做成独立状态，避免和单车加购混淆。
- cart-drawer.js 以 Ajax Cart 返回的购物车数据更新行项目，数量调整走 quantity-popover.js 与 Cart Ajax 的 change / update。
部署与验收
- 媒体、购买栏、规格和搭配区拆成可独立编辑的 section，但都读取当前变体。
- 主题编辑器重载后，画廊与粘性栏只重新挂接当前模块，避免重复绑定。
- 移动端轮播由 Swiper 8 承担；关闭画廊或弹层后，焦点回到颜色选择，粘性栏不遮挡规格与主操作。
最终效果实现后的变化
- 换色时用户看到的车、价格和将要加入购物车的对象保持一致。
- 单车购买、缺货和搭配优惠能分开识别，配件不会被当成另一台主机。
查看脚本与 Shopify API 依据
product-form.jsproduct-info.jsmedia-gallery.jsshine-trust-v4-sticky-cart.jsshine-trust-v4-bought-together.jsshine-trust-v4-buyx-gety.jsquantity-popover.jscart-drawer.jsCart Ajax: addCart Ajax: changeCart Ajax: updateProduct Recommendations APIswiper-bundle.min.jsShopify theme editor mode03欧洲交付
把地区、门店和质保留在购买路径里
同一款 CAVET 要卖进多个欧洲市场。切换国家或语言后，车型规格可以沿用，但配送、门店、质保和结算语境必须跟着目的地走，而不能把用户送回页脚另找服务入口。
- 01打开地区与语言选择
- 02沿用同一套车型规格
- 03在产品页确认门店、质保与结算语境
实现方法
- localization-form.js 与 floating-selector.js 负责地区切换；颜色变体和粘性栏读取当前目录，不内嵌国家字符串。
- pickup-availability.js 把本地取货可用性接到产品页，门店入口出现在购买路径中，而不是只留在页脚。
- 质保、评价和售后说明作为可编辑内容模块与动力规格分开，便于按国家改政策而不改变体结构。
部署与验收
- 核心规格跨市场复用；配送、门店、促销和售后在主题设置中按国家发布。
- 结账预加载使用 en-NL；Cookie、Klarna 与同意类提示保持可配置集成，不进入 product-form.js。
- 促销条、导航和产品内容模块可分别更新，市场政策不必等待整页改版。
最终效果实现后的变化
- 用户换到对应欧洲站点后，仍在配置同一款 CAVET，但交付和售后语言跟着目的地。
- 运营更新某国门店或质保时，不必改动颜色变体或加购提交。
查看脚本与 Shopify API 依据
localization-form.jsfloating-selector.jspickup-availability.jsproduct-form.js运营交接
上线之后，运营团队可以继续维护
- 主机按 CAVET、CAVET Air 等产品对象维护，颜色作为可购买变体。
- 电池、车架包和货架以关联商品挂到对应车型，不进入主机变体。
- 替换件单独分组；Combo 入口与单车产品分开维护，避免优惠和库存互相覆盖。
- 市场口径为欧洲多语言与 EUR；地区选择器切换目录，结账预加载为 en-NL。
- 扭矩、续航等核心规格跨站点复用；配送、门店、促销和质保按国家作为可编辑内容发布。
- 支付与隐私提示保持店面集成配置，不写入商品表单。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12