La serie de artículos sobre consejos de desarrollo es mi registro y resumen del diseño y desarrollo del sistema de plataforma anterior y pisar el pozo, para brindar referencia y ayuda a los desarrolladores que son nuevos en el desarrollo de sistemas de plataforma.
01 ¿Qué es un carrito de compras?
El carrito de compras es una función necesaria de la plataforma de compras (centro comercial en línea), como JD.com, Taobao, Dangdang, todos tienen esa función, ¿cómo se realiza el carrito de compras? Es posible que los socios no lo sepan, para que los socios pequeños que son nuevos Para que el desarrollo del centro comercial entienda cómo hacer esto, analicemos este escenario desde la perspectiva del desarrollo del programa, que incluye:
-
Almacenamiento mixto de carros de la compra;
-
¿Cómo agregan los usuarios al carrito de compras sin iniciar sesión en el centro comercial?
-
Cómo fusionar después de iniciar sesión.
Antes de discutir la función de agregar al carrito de compras, primero comprenda la estructura de datos (tabla) del carrito de compras. Si ha comprado productos en Jingdong Taobao, el carrito de compras es esencial (PD: si no lo sabe, abra la aplicación Jingdong y ver), los amigos que no saben pueden sentirse abrumados (desconcertados) por la cantidad de información del producto/comerciante presentada.
Entonces, ¿qué información debe contener el objeto del carrito de compras (tabla)? ¿Productos básicos, comerciantes, precios, promociones, cupones, etc.? Por supuesto que no (por qué no, se necesita un artículo largo para dejarlo claro, hablemos de los resultados por el momento).
(Imagen: El carrito de compras de la aplicación JD.com)
02 La estructura del carrito de compras
Primero echemos un vistazo a la estructura del carrito de compras utilizado por el proyecto de comercio electrónico anterior (aquí se ignoran algunos detalles, solo se enumeran los atributos clave):
id : 主键
member_id : 会员ID
product_id : SPU ID(商品ID)
sku_id : 商品规格ID
qty : 数量（加购的数量），正整数
join_price : 加入购物车时的价格（用于比对后来价格的变化，也可以不要）
created_time : 记录创建时间
revised_time : 记录修改时间
revisor : 修改人
复制代码Esta es la estructura de la cesta de la compra diseñada por el centro comercial de desarrollo en ese momento, puede ser diferente a la situación real de cada empresa donde se encuentra el pequeño socio, con más o menos campos, pero la información básica es la misma, inseparable. de quién (quién), qué (qué producto y cantidad), cuándo (a qué hora) estos elementos.
03 ¿No has iniciado sesión para añadir al carrito?
Tal vez algunos amigos dirán que si el usuario no está logueado, no es suficiente guiar al usuario para que lo haga. ¿Por qué hacerlo tan complicado? De hecho, involucra el problema de la experiencia del usuario. Al hacer clic en agregar al carrito de compras, se guía al usuario para que salte al inicio de sesión, el usuario completa la información de la cuenta y luego inicia sesión, luego vuelve al frente actual y luego hace clic en la operación de agregar al carrito de compras. 2 pasos más en esta operación, lo que le dará al usuario una especie de compulsión. Siento que la experiencia es relativamente mala, entonces, ¿hay una mejor manera de lidiar con eso?
Si ha comprado algo en una plataforma importante como Jingdong Gobaodangdang y presta atención a la operación, encontrará que puede hacer clic para agregar al carrito de compras sin iniciar sesión, y también está en la lista del carrito de compras. eso hecho??
04 carrito de compras temporal de cookies
可能聪明的小伙伴已经想到了，可以使用浏览器本地cookie来存储，只要本地的cookie缓存未被清除，可以一直暂存着。没错，这个小伙伴答对了，使用cookie来存储用户未登录时加入购物车的数据是一种解决方案（想一想，cookie最大可以存储多少字符）。cookie的存储，其实就是一串字符串，需要定义一定的结构，比如：
采用','作为属性的分隔，采用';'作为不同sku的分隔。
比如有：sku : 0011, 数量：2
sku : 0012, 数量：3
结果为：0011,2;0012,3 这样子一长串。
复制代码那还有没有其他解决办法吗？
当然是有的，采用 cookie来存储，是属于“客户端存储”的临时购物车，也可以采用“服务端存储”的临时购物车。
05 LocalStorage临时购物车
由于在cookie中存储数据时，一般是通过字符串拼接的方式来存储，不太好进行增加与删除，一般场景下比较少用。可以用另外一种改进的方式来存储，使用浏览器的LocalStorage来存储，LocalStorage为标准的键值对（Key-Value,简称KV）数据类型，操作起来简单与方便。
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
复制代码关于localstorage相关资料及介绍，可以参考：
-
HTML5 LocalStorage 本地存储（www.cnblogs.com/xiaowei0705…
-
MDN - Window.localStorage （developer.mozilla.org/zh-CN/docs/…
06 后端临时购物车
前面介绍的这2种方式都是基于客户端来存储，可能对于某些业务场景来说，还是希望后端（服务端）能记录这些未登录的用户的加购数据，也可以跟这些加购的数据来进行商品的热度分析等。
采用服务端来存储加购数据，要怎么做呢？ 仔细想想也不复杂，无非就是按购物车的结构再临时存储一份数据，还是CRUD的操作（CURD是永远的神），服务端存储的话，可以使用数据库表来存储（如果用户量不大的话，没有高并发的问题），也可以采用redis来存储（适合高并发，或者购物车数据不重要的场景下）。
-
数据表来存储，可以按前面的数据结构来设计；
-
redis存储，有2种：
-
可以采用hash结构，key 是临时用户标识，value是购物车数据。
-
一种就是每个临时用户一个hash，里面的key就是skuId， value就是数量。
PS：这2种方式哪种更好，使用的小伙伴可以自己思考
至于未登录用户的标志（token），可以在访问商城时分配一个临时的（能全局唯一就可以, 可以服务端生成，也可以客户端生成），在加入购物车的时候提交到后台（当作用户ID），前后操作保持一致的token。
当然，临时加入购物车的数据不会太多（小伙伴可以想为什么？），用户不会一直无聊地在那里加入（除了测试/或者恶意外），要么不想购买就关闭程序，要么登录系统，进行购买操作。
07 购物车合并
用户登录系统后，就需要将前面临时存储的购物车数据，跟用户现有的购物车数据进行合并。如果是客户存储的，就要调用接口回传，后台接收到数据后，将数据持久化到登录用户的购物车中；如果是服务端临时存储的，也要调用接口将临时token回传，让服务端进行数据合并，重新给用户返回新的购物车列表数据。
一般按sku_id与现存的sku_id进行对比，如果正式购物车存在，则将临时购物车的加购数量，加到正式的sku_id的qty上。如果sku_id不存在正式的购物车上，则插入新的记录（sku_id, qty, user_id等）。
复制代码关于电商购物车的功能，临时购物车的实现，登录后购物车数据的合并，是不是清晰很多了呢，实际上数据存储没这么复杂，而复杂是在购物车列表数据的展示（涉及到多种数据的组装），这个后面可以来讲讲
文章来源于本人的公众号，ID：技术老男孩，欢迎关注。