带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（8）

带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（7）https://developer.aliyun.com/article/1338375?spm=a2c6h.13262185.profile.64.7e056e99MlrFxP

取巧的功能设计

凑单购物车部分

设计的背景

凑单是跨店优惠工具使用链路上的核心环节，用户对凑单有很高的诉求，但目前由于凑单页不支持实时凑单进度提示等问题，导致用户凑单体验较差，亟需优化凑单体验进而提升流量转化效率。但由于某些原因，我们不得不独立开发一套凑单购物车，同时加上凑单进度，其中商品数据源以及动态计算能力还是使用的淘宝购物车。

基本框架结构设计

凑单页购物车是需要展示满足某个跨店满减活动的商品（套购同理），我不能直接使用购物车的接口直接返回所有商品数据以及优惠明细。所以我这里将购物车的访问拆成了两个部分，第一步先通过购物车的data.query接口查询出该用户所有加购的商品（该商品数据只有id，数量，时间相关的信息）。在凑单页先进行一次活动商品过滤后，   再将剩余的商品调用购物车的动态计算接口，完成整个凑单购物车内所有数据的展示。流程如下：

分页排序设计

大促期间，购物车大部分加购的品都是满足跨店满减活动的，如果每次都所有的商品参与动态计算并一次返回，性能会非常的差，所以这里就需要做到分页，页面展示如果涉及到了分页，难度系数将成倍的上升。首先我们来看凑单购物车的排序需求：

1. 首次进入凑单页商品的顺序需要和购物车保持一致同一个店铺的需要放在一起，按加购时间倒序排 店铺间按最新加购的某个商品的加购时间倒序排
   
2. 如果是从某个店铺点进来的，该店铺需要在凑单页置顶，并主动勾选
   
3. 如果过程中发现有新加入的品，该品需要置顶（不用将该店铺的其他品置顶）
   
4. 如果过程中发现有失效的商品需要沉底（放到最后一页并沉底）
   
5. 如果过程中发现有失效的品转成生效，需移上来
   

难点分析

1. 排序并不是简单的按照时间维度排，增加的店铺维度，以及店铺置顶的能力
   
2. 我们没有自己的数据源，每次查出来都得重新排序
   
3. 第一次进入的排序和后续新加购的商品排序不同
   
4. 支持分页
   

技术方案

首先能想到的就是找个地方存一下排序好的顺序，第一选择肯定是使用redis，但根据评估如果按用户维度去存储商    品顺序，亿级的用户量 * 活动量需要耗费几百G的缓存容量，同时还需要维护该缓存的生命周期，相对还是比较麻烦。这种用户维度的缓存最好是通过客户端来进行缓存，我该如何利用前端来做该缓存，并让前端无感知呢？以下是我的接口设计：

其中sign对象服务端返回给前端，下一次请求需要将sign对象原封不动的传给服务端，sign中存储了分页信息，以及需要商品的排序，sign对象如下：

public class Sign {
/**
* 已加载到到权重
*/
private Integer weight;
/**
* 本次查询购物车商品最晚加购时间
*/
private Long endTime;
/**
* 上一次查询购物车所有排序好的商品
*/
private List<CartItemData> activityItemList;

带你读《2022技术人的百宝黑皮书》——谈一谈凑单页的那些优雅设计（9）https://developer.aliyun.com/article/1338373?groupCode=taobaotech