核心实施拆解
从选型到加购：三条关键前端链路
抽油烟机一旦宽度不对，后面的捕烟技术和外观都救不回来。ARSPURA 把橱柜开口做成可切换的商品变体，让 IQV 捕烟、安装条件和清洁说明沿着同一条产品页顺序出现，并在烟机配置锁定后再提供安装服务加购。
项目背景
先明确客户怎么选，再决定前端承担什么
用户先确认 30/36 英寸等尺寸和安装方式，再比较 P1、P2、F1 的捕烟结构、控制、传感和外观。尺寸图、安装视频、IQV 原理、清洁、评价和专业安装服务共同降低错误购买。
Shopify 商品页前端、技术内容模块、型号比较、安装说明和响应式购买体验。
01宽度配置
让 36 英寸直接改写图纸、规格和将要提交的商品
用户确认橱柜开口后，主图、尺寸图、规格和加购对象必须一起落到该宽度，而不是文案写 36 英寸、购物车却是另一套配置。
- 01从厨房开口确认宽度
- 02选择对应尺寸变体
- 03同步媒体、规格与可售状态
- 04把该变体提交进购物车
实现方法
- 宽度和表面处理进入商品变体，安装关键尺寸不以富文本作为唯一来源。
- product-info.js、media-gallery.js 与 product-form.js 响应同一次变体变化，主图、尺寸图和购买表单不再各算一套当前配置。
- P1 与 P2 比较读取同一组宽度、安装和捕烟字段，避免每个产品页各自维护口径。
部署与验收
- 尺寸图和规格放在产品模板的 section / block 中，运营可改安装说明而不改购买脚本。
- 主题编辑器更新媒体或购买区块后重新绑定表单与画廊，避免后台预览里切换宽度失效。
- 保留 Shopify 原生商品表单，脚本异常时仍能提交当前变体。
最终效果实现后的变化
- 切换宽度时，用户正在核对的图纸和即将购买的配置保持一致。
- 后续型号沿用宽度变体和同一字段结构，即可进入这条选型路径。
查看脚本与 Shopify API 依据
product-info.jsmedia-gallery.jsproduct-form.js02捕烟验证
烟气轨迹和尺寸图负责选型，厨房实景只证明它能嵌进去
实景照片用来证明烟机与橱柜的关系；真正让用户敢买的，是捕烟路径、结构剖面和在小屏上也能读清的尺寸图。
- 01用实景确认橱柜嵌入
- 02用烟气演示和剖面理解 IQV
- 03放大尺寸图核对安装条件
实现方法
- 媒体层级把烟气轨迹、剖面和尺寸图放在选型主路径，厨房实景只承担嵌入证明。
- 36 英寸作为决策信息同时出现在主图裁切、缩略图和规格区，而不是只在标题里出现一次。
- 媒体徽标、缺货和加购使用各自状态；移动端通过 product-modal.js 放大尺寸图，避免安装高度只存在于缩略图里。
部署与验收
- 安装图、规格和清洁说明作为可编辑内容挂在产品模板上，不写进购买逻辑。
- 主题编辑器刷新媒体区后重新挂载 media-gallery.js，保证尺寸图切换在编辑预览中仍然可用。
最终效果实现后的变化
- 用户可以在同一条阅读里看清能否安装、烟怎样被捕捉，再决定要不要下单。
- 技术内容变长时，宽度和安装信息仍留在可核对的位置。
查看脚本与 Shopify API 依据
media-gallery.jsproduct-media-badge.jsproduct-modal.jsSwiper 11swiper-min-js.js03安装加购
选好烟机后再加入安装，而不是把服务写进无法结算的描述
烟机变体确定后，安装和配件以独立商品进入购物车；覆盖范围、配送和保修出现在购买操作附近，和主机配置分开履约。
- 01锁定烟机型号与宽度
- 02按当前商品给出安装与配件
- 03将服务与主机一并加入购物车
- 04在购买区核对配送、保修与自提
实现方法
- 安装服务和配件作为关联商品维护，不和烟机变体绑成一段无法拆开的描述。
- 产品页按当前烟机上下文调用 Product Recommendations API，把安装和相关产品接到变体选定之后。
- cart-drawer.js 配合 Cart Ajax 的 add / change / update，让主机与安装在抽屉里以独立行项目显示和修改。
部署与验收
- 推荐区异步加载，接口失败时不挡住烟机价格和加购。
- 安装覆盖、配送窗口和电器规范作为可编辑内容放在购买区附近，而不是只放在通用 FAQ。
- pickup-availability.js 负责自提可用性展示；公开交易口径保持美国英语与 USD。
最终效果实现后的变化
- 购物车能分清烟机配置和安装服务，履约可以按行处理。
- 用户在提交前就能看到与这次购买相关的配送和保修说明。
查看脚本与 Shopify API 依据
Product Recommendations APIcart-drawer.jsCart Ajax: addCart Ajax: changeCart Ajax: updatepickup-availability.js运营交接
上线之后，运营团队可以继续维护
- 公开目录按厨房抽油烟机展开，系列与宽度是主轴；当前可见型号包括 ARSPURA 36 P1 IQV 与 36 P2 IQV。
- 宽度和表面处理放进变体；安装服务与配件用关联商品承载自己的库存和服务文案。
- 捕烟结构、风道、控制和清洁留在内容层，比较 P1 与 P2 时读取同一组字段，而不是各页各写一套。
- 公开市场为美国英语与美元，结账预加载使用 en-US，尺寸与安装条件按美制口径维护。
- 安装覆盖、配送说明和电器规范作为产品页可编辑内容，放在购买区附近更新，而不是写进表单脚本。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12