核心实施拆解
从选型到加购:三条关键前端链路
CYCROWN 面向美国骑手销售城市通勤与全地形电动自行车。Urban X、Nomad Pro 等车型分属不同路况,页面上又同时存在分期、配件和持续闪购。真正要稳住的不是把活动铺满首屏,而是让场景入口、可售车辆和促销层各管一段:先选对用途,再确认买的是哪一台车,最后才处理券和加购。
项目背景
先明确客户怎么选,再决定前端承担什么
用户按骑行场景和预算进入,再以功率、电池、传感器、速度、续航、车架与载重筛选 Urban X、Nomad Pro、Roma、CycHunter 等车型。Affirm、评价、视频和本地支持完成决策。
WESWOO 的重点应是用商品数据和场景筛选稳定强促销商城,让型号适配始终先于折扣;同时把配件、App 和支持连接到车辆生命周期。
01场景入口
通勤和胖胎不要从同一个门口进来
用户应按路况进入集合,而不是被首页倒计时直接送进当时最便宜的车型。
- 01从通勤或胖胎场景进入
- 02用测验或筛选收窄车型
- 03在集合页对照功率、续航和车架
- 04打开对应型号产品页
实现方法
- 首页用 category-tab-content.js 在通勤与胖胎分区之间切换,场景集合承接用途分流,而不是把全部车型摊成一张折扣表。
- ebike-quiz-simple.js 按骑行场景做车型适配,把用户送进合适的产品范围,而不是直接落到价格最低的 SKU。
- search.js 调用 Predictive Search API,在输入阶段返回车型与系列建议,与集合使用同一套用途词汇。
部署与验收
- 车型 Tab、测验文案和系列内容可以单独更新,不必改动 variant 矩阵或加购请求。
- 测验弹层避开主购买控件;搜索保留加载与无结果状态,避免把人丢进空列表。
- 骑行故事作为内容维护,不写进可售车辆的选项值。
最终效果实现后的变化
- 用户先确认通勤还是全地形,再面对具体价格和促销。
- 新型号进入既有场景集合和测验范围后,就能被首页分区与搜索找到。
查看脚本与 Shopify API 依据
category-tab-content.jsebike-quiz-simple.jssearch.jsPredictive Search API02购买对象
颜色和电池进变体,锁具头盔不要写进选项
产品页要让人看清即将加购的是哪一台车;配件只作为关联商品出现,不能改写 SKU。
- 01选择颜色或电池包
- 02同步画廊、价格和库存
- 03用规格与实骑内容确认这台车
- 04把锁具、头盔作为相关商品加入
实现方法
- 可售 SKU 只由 product 与 variant 管理,颜色或电池包驱动媒体、价格和商品表单,配件不进入主机选项。
- 画廊用 Swiper 组织实骑画面与车架、轮胎、电池特写,规格卡独立于促销条,避免彩色车身盖住关键适配信息。
- Product Recommendations API 按当前车辆上下文给出锁具、头盔等关联商品,骑行内容不进入变体矩阵。
部署与验收
- 画廊、规格和购买栏分开维护,主题编辑器重载 section 后重新绑定轮播、变体和表单。
- 桌面并列媒体与购买栏;移动端把长参数收入折叠面板,倒计时和优惠入口压在主购买控件之下。
- 产品卡在集合页露出功率、续航等关键指标,折扣不能代替型号说明。
最终效果实现后的变化
- 加购对象始终是选定的车辆 SKU,配件不会把变体矩阵撑乱。
- 用户能同时看清路况画面和功率、续航、尺寸,而不是只看见车身颜色或券层。
查看脚本与 Shopify API 依据
theme.jsswiper-bundle.min.jsProduct form behaviorVariant behaviorMedia/model behaviorProduct Recommendations API03加购与促销
闪购可以催单,但不能改写购物车里的车
优惠券、倒计时和分期都允许存在,前提是它们停在展示层,购物车始终认得当前车辆。
- 01确认当前车辆 variant
- 02通过 Ajax Cart 加入购物车
- 03用返回结果更新抽屉行项目
- 04在展示层处理优惠券和分期
实现方法
- cart.js 通过 Cart Ajax 的 add、change、update 提交,抽屉和行项目以接口返回的购物车数据为准。
- coupon-drawer.js 与 custom-countdown.js 自己维护优惠券和倒计时,促销层不写入商品表单字段。
- 分期说明出现在产品页和购物车抽屉的展示层,不作为主机选项值参与加购。
部署与验收
- 闪购文案、倒计时和券抽屉可单独发布,不必改加购请求。
- Section Rendering 或主题编辑器重载后,购物车、测验和轮播重新绑定,避免旧监听残留。
- 无脚本时仍可提交主题自带的商品表单,促销模块失败不阻断购买。
最终效果实现后的变化
- 用户加购后看到的是选定车型,折扣不会覆盖 SKU 身份。
- 运营更新闪购和优惠券时,不必改动变体矩阵和加购流程。
查看脚本与 Shopify API 依据
cart.jscoupon-drawer.jscustom-countdown.jsCart Ajax: addCart Ajax: changeCart Ajax: updateaffirm-product-handler.jsaffirm-cart-drawer-embed-handler.jsSection Rendering APIShopify section eventsShopify theme editor mode运营交接
上线之后,运营团队可以继续维护
- 集合按通勤与全地形(胖胎)用途分流,Urban X、Nomad Pro 等型号以独立 product 上架。
- 颜色或电池包进入 variant;锁具、头盔作为关联配件,不写入主机选项。
- 功率、续航、车架和 Class 作为可比较字段维护,骑行内容与可售 SKU 分开。
- 交易语境为美国英语与美元;Class、英里续航、本地服务和分期说明按美国站维护。
- 分期文案留在产品页和购物车抽屉的展示层,不进入车辆选项值。
- 车型 Tab、促销条、测验文案和政策模块可分别更新,闪购不必改加购流程。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12