商品详情多规格联动筛选逻辑

摘要

bidfans 部分日系商品存在尺寸、颜色、版本多规格，规格切换后图片、价格、库存同步刷新。本文设计联动规格组件，选择规格自动切换对应素材与计价，无重复接口请求。

一、规格切换交互问题

早期规格切换每次重新请求后端接口，网络延迟导致图片、价格刷新卡顿；多规格商品图片全部分开请求，页面加载体积庞大；规格之间无联动互斥，部分无货规格仍可点击，用户选中后才提示缺货，操作无效。规格、图片、价格分散存储，前端每次切换需要拼接大量参数，代码冗余复杂，维护成本高。雅虎、煤炉规格字段不一致，两套页面分开写切换逻辑，重复开发工作量大。

二、前端预加载联动方案

商品详情页面首次请求时一次性拉取该商品全部规格数据、对应图片、单价、库存，存入前端内存对象，切换规格不再发起后端请求，毫秒级刷新展示。规格组件做互斥控制，无库存规格置灰不可点击；选择尺寸后自动过滤不匹配颜色版本，避免无效组合。图片采用缓存复用，不同规格共用的素材不会重复加载，仅切换专属细节图。封装通用规格组件，雅虎、煤炉详情页面直接复用，仅传入站点区分字段，无需两套交互逻辑。

三、数据结构标准化

后端统一输出规格数组，每条规格绑定唯一标识、库存、专属图片地址，前端无需区分日系站点解析数据。规格切换仅更新页面局部图片、价格模块，不重载整个页面 DOM，减少浏览器渲染开销。缓存当前选中规格，用户返回列表再次进入详情自动恢复上次选择，提升复购浏览体验。

四、弱网兼容兜底

首次拉取规格接口超时，页面展示默认基础规格，点击切换规格再发起轻量补充请求，不会完全空白。无图规格自动展示商品通用缩略图，避免规格切换后图片空白。

五、落地优化

bidfans复用通用规格组件后，详情页面切换卡顿反馈清零，多规格商品页面加载资源体积下降 50%，前端规格相关代码减少 70%，迭代效率大幅提升。

结语

预加载式多规格联动组件一次性拉取全量规格数据，实现无接口切换交互，适配多站点中古商品详情页面，兼顾弱网环境下的浏览流畅度。