核心实施拆解
从选型到加购：三条关键前端链路
授权模型卖的是可对照的成品，不是一张太空海报。店面要让涂装特写、可售商品和跨境说明落在同一条路径上：先看清 Avalanche 与 Standard 的差别，再把看清的那一件加入购物车，并在付款前读到包装与交付规则。
项目背景
先明确客户怎么选，再决定前端承担什么
玩家先按 IP、飞船或制造商浏览，再比较比例、涂装、装配状态与套装数量。官方授权说明、细节照片、生产批次、预售时间、包装和全球配送政策共同支撑高客单下单。
Shopify 前端、授权产品分类、商品变体与套装、预售和全球购买路径。
01涂装核验
用同一取景让 Avalanche 和 Standard 对得上
收藏者要在缩略图、主图和放大层里认出同一艘舰的不同涂装，而不是被氛围图带着走。
- 01进入舰体产品页
- 02浏览多角度静物与涂装特写
- 03放大查看边缘与涂层
- 04对照授权标识与规格
实现方法
- 产品画廊以模型本体为主：多角度静物、比例参照和涂装特写，IP 氛围不替代成品档案。
- media-gallery.js 切换视角，magnify.js 承担放大；Avalanche 与 Standard 保持同一裁切和焦点，缩略图、主图和放大层能够互相对照。
- 授权与限量标识克制放置，保证可读，同时不遮挡舰体轮廓。
部署与验收
- 移动端画廊提供明确的放大与关闭目标，避免误触后无法回到浏览。
- Swiper 只承担系列或内容轮播，与产品核验画廊分开，避免首页滑动逻辑干扰细节查看。
- 主题编辑器更新媒体区块后重新挂载画廊，不把整页一次性初始化当成唯一生命周期。
最终效果实现后的变化
- 收藏者可以按同一观察方式比较两套涂装，确认成品后再进入购买。
- 品牌氛围仍在，但不再盖过可核验的模型档案。
查看脚本与 Shopify API 依据
media-gallery.jsmagnify.jsproduct-modal.jsSwiperShopify theme editor mode02成品成交
让可售的是涂装成品，而不是舰体故事
Scorpius 的不同涂装作为可盘点的商品落地；页面展示、库存状态和加购对象必须指向同一件成品。
- 01确认当前涂装成品
- 02核对价格、库存与购买状态
- 03通过商品表单提交该对象
- 04抽屉回显对应行项目
实现方法
- 公开可售结构放在 Shopify 产品与变体上：涂装是购买对象，授权、比例、材质和包装留在内容层。
- product-info.js 同步当前展示状态，product-form.js 提交同一件商品；数量控件区分可售、不可售和提交中，避免高客单被误触发出。
- 加购走 Cart Ajax，cart-drawer.js 与 cart.js 以服务器返回的购物车更新行项目，收藏者能看见加入的是哪一版涂装。
部署与验收
- 保留原生商品表单，作为脚本或接口异常时仍可完成购买的路径。
- 主题编辑器重载产品信息或购买区块后只重新绑定当前模块，避免重复提交。
- 交期、包装和限量/预售说明作为可编辑内容靠近购买区，不写进主题脚本。
最终效果实现后的变化
- 页面上的涂装与加入购物车的对象保持一致。
- 新涂装上架主要维护商品数据与媒体，不必改产品模板。
查看脚本与 Shopify API 依据
product-form.jsproduct-info.jsquantity-popover.jscart-drawer.jscart.jsCart Ajax: addCart Ajax: changeCart Ajax: update03跨境选购
从舰名找到成品，并在加购前看清目的地规则
全球玩家很少按首页顺序逛完；搜索、相关涂装和配送说明要接到同一件可售模型上。
- 01用舰名或 IP 进入正确系列
- 02在产品页确认涂装并加购
- 03查看相关成品与购物车
- 04选择目的地并阅读交付说明
实现方法
- predictive-search.js 对接 Predictive Search API，输入阶段返回商品与系列建议，让舰名直接进入正确范围。
- 产品页按当前商品上下文调用 Product Recommendations API，把同一舰体的其他涂装或相关模型接到当下选择。
- localization-form.js 提供地区与语言入口；关税、交期、包装说明作为运营内容靠近购买区。
部署与验收
- 列表页的 quick-add.js 走同一套 Ajax Cart，避免列表和产品页各维护一份购物车。
- 推荐区异步加载，失败时不挡住画廊、价格和购买表单。
- 授权舰名全球一致，可售涂装与交付说明按目的地维护，核心加购路径不按国家复制。
最终效果实现后的变化
- 从搜索到抽屉，收藏者始终对着同一件涂装成品。
- 目的地规则可在内容层更新，不必重做购买流程。
查看脚本与 Shopify API 依据
predictive-search.jsPredictive Search APIProduct Recommendations APIquick-add.jslocalization-form.jsfloating-selector.jscart-drawer.jsCart Ajax: add运营交接
上线之后，运营团队可以继续维护
- 目录以《星际公民》授权飞船为轴，首页与系列按 IP、舰体组织，而不是散装模型货架。
- Avalanche、Standard 等涂装成品作为可售商品维护；授权、比例、材质与包装放在内容层，避免把库存属性只写进简介。
- 调整可售涂装时改商品对象即可，不必重做产品模板。
- 公开市场为全球英语、默认 USD，checkout 预加载 en-US，授权舰名保持全球一致。
- 地区与语言入口由本地化组件提供；关税、交期、包装与退货说明作为可编辑内容靠近购买区。
- 可售涂装和目的地交付规则按市场维护，加购与抽屉流程不按国家各做一套。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12