核心实施拆解
从选型到加购:三条关键前端链路
TIMEMORE 把电动磨豆机、手摇磨豆机、咖啡秤、手冲壶和冲煮配件卖给既看刀盘、也看冲煮方式的人。要把专业参数变成可下单的选择,关键是让系列归属、可比较规格、变体库存和配套器具落在同一套 Shopify 商品模型里,而不是做成彼此脱节的长图说明。
项目背景
先明确客户怎么选,再决定前端承担什么
用户从 Grinder、Scale、Kettle、Brewer 或冲煮方式进入,在 Sculptor 064/078、Chestnut、Basic、Fish 等系列间比较刀盘、研磨档位、转速、容量和颜色。测评、预售、套装和批发入口完成购买。
Shopify 前端、咖啡器具分类、技术型商品页、型号变体与配件导购。
01冲煮入口
从手冲或意式走进对的磨豆机系列
用户先确定冲煮方式或器具族,再进入 Sculptor、Chestnut 等系列,而不是在全部 SKU 里辨认相近型号。
- 01从磨豆机、秤、壶或冲煮方式进入
- 02进入电动、手摇或 Best Seller 系列
- 03用搜索落到具体型号
- 04打开对应商品而不是一串无关 SKU
实现方法
- 公开目录按电动磨豆机、手摇磨豆机、秤、手冲壶和冲煮配件分族,购买任务先定冲煮方式,再进入系列。
- Sculptor 与 078SSP 这类型号保持系列到 SKU 的层级,比较时不会把不同代际摊成互不相关的单品。
- 搜索输入 Sculptor、Chestnut 或冲煮方式时,Predictive Search API 返回系列与商品建议,先帮用户进入正确产品范围。
部署与验收
- Best Seller 与品类分流由系列模板承担,上新时主要维护系列归属,而不是重做全部入口。
- 检索扩展只辅助发现,库存与可售仍以 Shopify 变体为准,不能靠搜索结果代替可售版本。
- 交互集中在 theme.js;首页或系列模块在主题编辑器中重排后,需要重新初始化监听。
最终效果实现后的变化
- 入门用户可以按冲煮方式走进器具族,资深用户也能直接进入 Sculptor 或 Chestnut 系列。
- 新型号沿用系列到 SKU 的结构后,就能进入现有分流和搜索,而不必另做一套目录。
查看脚本与 Shopify API 依据
Predictive Search APIinstant-core.min.jstheme.js02参数阅读
让刀盘特写和规格表跟着颜色、版本一起变
专业器具页要用能读的参数和会随变体更新的摄影,把刀盘、转速、档位和电压从装饰图变成当前可售配置的一部分。
- 01阅读刀盘与研磨范围
- 02对照转速、档位和容量
- 03切换颜色或版本
- 04确认电压与插头
- 05媒体、价格和可售状态一起更新
实现方法
- 商品卡为磨豆机、秤和壶使用不同画幅,黑白工业摄影和刀盘特写服务选型,而不是把 RPM 做成装饰海报。
- 颜色、刀盘组合或版本作为 Shopify 变体;切换时同步颜色图与结构图,选中、预售和不可售状态落在对应控件上,并保留键盘焦点。
- RPM、研磨档位、材质和壶容量作为可比较规格字段放进表格,移动端横向滚动而不是缩小到不可读。
- 视频与静帧共用固定画幅,避免切换媒体时把规格区和购买区顶乱。
部署与验收
- 固定购买区让开随变体变化的电压和插头提示,避免主按钮盖住真正决定能否发货的信息。
- 选项选择器只扩展控件表现,变体库存仍由 Shopify 商品对象管理。
- 媒体滑动由 swiper-min-js.js 处理;主题编辑器重排商品模块后,theme.js 重新挂接监听,避免重复绑定。
最终效果实现后的变化
- 用户能在同一屏里看清当前刀盘、颜色、电压和可售状态,而不是把参数和购买对象当成两件事。
- 系列摄影和规格字段可以随 Sculptor 或 Chestnut 上新替换,不必重做整页阅读结构。
查看脚本与 Shopify API 依据
theme.jsswiper-min-js.jsselectors.js03整套冲煮
磨豆机选定后,把秤、壶和配件接进同一条购买路径
主机确认之后,配套秤、壶、冲煮配件、预售说明和批发入口要能继续买下去,而不是停在一篇写满配件名的描述里。
- 01确认主机型号与可售版本
- 02看到配套秤、壶和冲煮配件
- 03识别现货、预售或批发入口
- 04把正确商品提交进购物车
实现方法
- 完整冲煮方案用关联商品组织,秤、壶和配件保持独立 SKU,而不是把整套器具写进单条描述。
- 加购、改数量和更新通过 Cart Ajax 的 add、change、update 从 theme.js 与 vendor-scripts-v11.js 捆绑层发出,行项目与页面展示的型号保持一致。
- 预售交期、配送和售后作为可运营编辑模块;批发入口与零售购买分开,避免两套受众共用同一段购买文案。
部署与验收
- 购物车以服务器返回结果回写数量和行项目,避免只在页面局部改数字。
- 系列上新时更新关联商品、预售说明和批发入口即可,不必改主题捆绑脚本里的政策句子。
最终效果实现后的变化
- 选定磨豆机后,用户可以沿同一路径配齐秤和壶,而不是离开商品页去猜兼容关系。
- 预售与现货在购买位置即可区分,批发客户也不必挤进零售加购流程。
查看脚本与 Shopify API 依据
Cart Ajax: addCart Ajax: changeCart Ajax: updatetheme.jsvendor-scripts-v11.js运营交接
上线之后,运营团队可以继续维护
- 目录按电动磨豆机、手摇磨豆机、秤、手冲壶和冲煮配件分族,Sculptor、Chestnut、Basic、Fish 保持系列到具体型号。
- 颜色、刀盘组合和版本进入 Shopify 变体;RPM、研磨档位、材质和壶容量作为可比较规格字段。
- 完整冲煮方案用关联商品组织;电压与插头按美国站可售数据维护,不写在与变体无关的统一说明里。
- 美国英语店面以 USD 结算,结账预加载为 en-US。
- 电动磨豆机的电压、插头和可售版本按目的地维护,并与变体可售状态绑定。
- 配送、预售交期和售后入口作为可编辑模块;规格表和冲煮方式文案可复用,价格与配件兼容性按美国站库存校对。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12