核心实施拆解
从选型到加购：三条关键前端链路
ATHENAIE 卖的不是孤立银件，而是基础手链、串饰和穆拉诺玻璃珠如何组成一份可送出的礼物。尺寸与金属色走变体，完整造型走关联商品；产品页再用旋转查看和微距灯箱把切面说清楚。礼赠文案可以按市场更换，购买对象保持稳定。
项目背景
先明确客户怎么选，再决定前端承担什么
用户可以从 Bracelet、Charms、Glass Beads、Pendant、Ring 或礼赠场景进入，先确定基础手链与尺寸，再按颜色、主题和寓意组合串饰。材质证明、礼盒、评价、全球配送与退换完成信任。
WESWOO 的重点是把单件珠宝变成可组合、可礼赠的商品体系：用兼容与寓意数据连接基础手链、串饰、完整造型和内容，提高选择效率而非堆叠更多 SKU。
01组合购买
把手链、串饰和玻璃珠拆成可搭配的购买对象
顾客先锁定基础手链和尺寸，再补上兼容的串饰或穆拉诺珠，而不是在一个膨胀的选项矩阵里寻找整套造型。
- 01从手链、串饰或玻璃珠集合进入
- 02用尺寸或金属色解析可售变体
- 03把当前商品当作搭配上下文
- 04补充相关串饰或完整造型
实现方法
- 尺寸与金属色由商品变体管理，main-product.js 承接商品表单和当前变体状态。
- 完整造型和礼盒作为关联或组合商品，不占用新的选项值。
- 产品页按当前手链或串饰上下文调用 Product Recommendations，给出可继续搭配的对象。
部署与验收
- 画廊、材质说明和购买栏拆成可独立编辑的 section，礼赠文案不必改动变体矩阵。
- 加购、改数量和更新都针对当前 variant，经 Ajax Cart 提交。
- 推荐区异步加载，接口失败时不挡住价格和主购买操作。
最终效果实现后的变化
- 顾客可以按“基础件 + 串饰”完成搭配，而不必把整套造型当成一个选项。
- 新品串饰沿用同一商品与变体结构即可进入搭配推荐，不必重做购买表单。
查看脚本与 Shopify API 依据
main-product.jsVariant behaviorProduct form behaviorProduct Recommendations APICart Ajax: addCart Ajax: changeCart Ajax: update02材质确认
用旋转查看和微距灯箱证明银件与玻璃
切面、玻璃纹理和夹扣结构必须被看清楚；礼盒和节日氛围只提供情绪，不能代替材质与尺寸判断。
- 01白底主图呈现单件
- 02旋转或放大确认结构与切面
- 03再阅读寓意或包装
实现方法
- 桌面端把 360 查看与购买栏并列；移动端先给出材质和尺寸，再打开灯箱，避免一上来只能靠捏合放大。
- js-cloudimage-360-view.min.js 提供串饰环视，photoswipe-init.js 初始化媒体灯箱。
- 颜色点选、尺寸和加购从高亮摄影中分离，并区分选中、缺货与加载状态。
部署与验收
- 主题编辑器或 Section Rendering 重载后，灯箱与旋转查看重新绑定，避免媒体还停在上一个尺寸。
- 放大和旋转控件保持可键盘到达；减少运动偏好时关闭入场动画，避免挡住主加购按钮。
- Swiper 只用于搭配或内容轮播，不替代商品主媒体。
最终效果实现后的变化
- 下单前可以看清银件、玻璃和夹扣，而不是只被礼赠氛围带着走。
- 切换尺寸或金属色后，查看控件仍对着当前可售件。
查看脚本与 Shopify API 依据
js-cloudimage-360-view.min.jsphotoswipe-init.jsMedia/model behavioranimation.jsswiper-bundle.min.jsSwiperSection Rendering APIShopify theme editor mode03礼赠进入
按节日、人物和寓意走进正确的串饰范围
礼赠用户很少从整本目录逐件翻。搜索、集合和相关推荐需要共用同一套品类语言，才能从“送给谁”走到可购买的那一颗珠。
- 01从节日、人物或关键词进入
- 02落到礼赠或珠宝品类集合
- 03按材质、颜色或主题缩小范围
- 04在商品页继续发现相关串饰
实现方法
- Predictive Search 在输入阶段返回商品与集合建议，先把人带进正确范围。
- 集合负责礼赠场景和珠宝品类分流，商品对象只管理可售 SKU。
- 商品页再用 Product Recommendations 给出相关串饰，而不是在搜索结果里堆完整造型。
部署与验收
- 搜索保留加载、无结果和键盘操作状态，避免输入阶段失明。
- 材质、尺寸和兼容字段跨市场共用；节日文案、配送与退换按目的地作为内容维护，不改加购请求。
最终效果实现后的变化
- 从礼赠意图到具体串饰的路径可以连续，寓意不必做成变体。
- 换季主要更新集合和文案，可售矩阵保持不动。
查看脚本与 Shopify API 依据
Predictive Search APIProduct Recommendations APIfloating-selector.js运营交接
上线之后，运营团队可以继续维护
- 公开目录按手链、串饰、穆拉诺玻璃珠和礼赠场景分流，基础件与可搭配件分开维护。
- 尺寸和金属色进入变体；完整造型与礼盒作为关联或组合商品，不写进新的选项值。
- 材质、兼容和工艺说明作为共享字段与内容对象；寓意和节日故事放在集合，换季不必新增 SKU。
- 默认结算语境为英语与美元；材质、尺寸和兼容数据跨市场共用，节日礼赠、配送承诺和退换按目的地维护。
- floating-selector.js 提供地区或语言入口，pickup-availability.js 输出本地取货提示，二者都不改写变体矩阵。
- 运营编辑落在礼赠文案、导航和取货说明，季节更换不必重做加购请求。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验；无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验：2026-08-12