核心实施拆解
从选型到加购：三条关键前端链路
ADO 英国站卖的是折叠、城市、碳纤维和载货电助力车。用户要先确认这辆车能不能带上楼、适不适合自己的通勤，再看英镑价格、配送和保修是否清楚。下面按用途进入、产品页上的折叠证明、以及车架与配件如何分开成交来写。
项目背景
先明确客户怎么选，再决定前端承担什么
用户从通勤、折叠携带、轻量碳纤维或载货场景进入，再比较 Air 系列等车型的重量、续航、传感与尺寸。颜色、配件组合、媒体评测、配送和保修完成最终选择。
英国 Shopify 前端、车型分类、技术型商品页、配件与本地化购买路径。
01场景选车
用携带和通勤给车型分层，而不是让用户猜全球型号
英国用户先确认自己要折叠进门、城市通勤还是轻量出行，再进入 Air 等具体车型，避免在相近名称之间来回猜测。
- 01从折叠、城市或轻量通勤用途进入系列
- 02按重量、折叠体积、电机和续航缩小候选
- 03打开具体车型，确认颜色与可售配置
实现方法
- 系列承接用途浏览，商品对象承载车型，颜色作为可购买变体；挡泥板、货架等配件不写进同一 SKU。
- 重量、折叠体积、电机、电池、续航和骑手适配作为可比较字段，写在系列与产品内容里，而不是埋进型号代码。
- Predictive Search 在输入阶段返回商品和系列建议，把「折叠」「Air 20」这类词直接送进正确范围。
部署与验收
- 可售车型与系列由英国站独立维护，不把未公开的全球站同步当作更新来源。
- 搜索保留加载与无结果状态；主题编辑器更新 section 后，搜索模块需要重新挂接。
最终效果实现后的变化
- 用户按储存和通勤缩小候选，再比较折叠尺寸与重量，而不是先解码型号代码。
- 新车型归入既有用途系列并补齐比较字段后，即可进入同一条浏览路径。
查看脚本与 Shopify API 依据
predictive-search.jsPredictive Search API02折叠证明
让折叠尺寸、车架结构和颜色选择在决策屏里同时可读
产品页用侧视整车、折叠步骤和局部结构证明可携带；切换颜色后，正在看的媒体和将要购买的配置仍是同一辆车。
- 01首屏同时给出整车比例与折叠体积
- 02用折叠步骤和结构细节解释车型差异
- 03切换颜色时同步主图与购买摘要
- 04放大查看细节后回到颜色选择
实现方法
- 主题侧 wes-main-product.js 与 product.js 协同主商品模块，颜色变体驱动媒体和购买信息，各区块不再各自判断当前车型。
- PhotoSwipe 承担媒体放大；关闭后焦点回到变体控制，避免看完细节却找不到刚才选的颜色。
- Swiper 与 slideshow.js 把车身、折叠步骤和局部结构分开轮播，步骤图不必和骑行大图抢同一条阅读节奏。
部署与验收
- 店面同时存在主题商品脚本与 Pagefly 的 pagefly-product.js、pagefly-product-media.js；Shopify section 更新后，主商品模块、轮播和放大层都要重新绑定。
- 折叠步骤、规格和保修放在产品模板、section、block 与主题设置里维护，不写进脚本。
- 移动端用区块标题分开结构、规格与保修，避免连续堆叠骑行图把折叠尺寸挤出首屏。
最终效果实现后的变化
- 折叠体积在主图比例和规格区都能读到，颜色选择与当前媒体保持一致。
- 评测内容可以留在折页以下，但不打断首屏对携带性的判断。
查看脚本与 Shopify API 依据
wes-main-product.jsproduct.jsphotoswipe.min.jsphotoswipe-ui-default.min.jsswiper-bundle.min.jsslideshow.jspagefly-product.jspagefly-product-media.jsShopify section eventsShopify theme editor modeVariant behavior03配件成交
车架、配件套装和英国售后分开履约，而不是绑成一个库存
颜色在车型变体里完成；挡泥板、货架、包和锁具作为关联商品。英镑价格、配送和保修靠近购买区，加购走 Ajax Cart。
- 01确认车型颜色与可售状态
- 02按兼容关系选择挡泥板、货架、包或锁具
- 03在购买区同时看到英镑价格、配送与保修
- 04提交车架与配件并回写购物车
实现方法
- 车架 SKU 与货架等配件 SKU 分开库存，配件以关联商品存在，避免一套库存同时锁死整车和附件。
- product-form.js 提交加购，Cart Ajax 的 add、change、update 处理购物车变更，结果留在当前页。
- 配送、退换与保修说明放在购买簇附近；功率、速度和折叠尺寸按英国骑行语境维护。
部署与验收
- pickup-availability.js 提供自提提示；政策文案可在主题设置中更新，不必改商品表单逻辑。
- 结账预加载 en-GB，公开市场口径保持英国英语与 GBP，货币和政策留在英国目录与文案中。
- 主题编辑器重载 section 后重新绑定商品表单；脚本异常时仍可走原生商品表单。
最终效果实现后的变化
- 用户可以分开确认车架颜色和配件库存，总价与英国配送、保修出现在同一购买视线里。
- 加购后购物车反映具体车型和配件行项目，不必离开产品页去确认是否成功。
查看脚本与 Shopify API 依据
product-form.jsCart Ajax: addCart Ajax: changeCart Ajax: updatepickup-availability.jsProduct form behavior运营交接
上线之后，运营团队可以继续维护
- 目录按折叠、城市与轻量通勤用途分层，Air 20 Ultra 2026、Air 20 Pro 等车型归入对应系列。
- 颜色进入变体；挡泥板、货架、包和锁具按兼容关系作为关联商品，与车架分开库存。
- 重量、折叠体积、电机、电池、续航与骑手适配作为共享比较字段，供系列和产品页共同使用。
- 市场口径为英国英语与 GBP，结账预加载 en-GB。
- 配送、退换、保修和自提说明在英国站独立维护，并靠近购买区更新。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12