Série de desenvolvimento de comércio eletrônico - como adicionar ao carrinho de compras se não estiver logado?

A série de artigos sobre dicas de desenvolvimento é meu registro e resumo do design e desenvolvimento do sistema de plataforma anterior e pisando no poço, para fornecer referência e ajuda para desenvolvedores que são novos no desenvolvimento de sistemas de plataforma.

01 O que é um carrinho de compras?

O carrinho de compras é uma função necessária da plataforma de compras (shopping on-line), como JD.com, Taobao, Dangdang, todos têm essa função, como o carrinho de compras é realizado? Os parceiros podem não saber, para permitir que os pequenos parceiros que são novos para o desenvolvimento do shopping entender como fazer isso, vamos discutir esse cenário sob a perspectiva do desenvolvimento do programa, incluindo:

Armazenamento misto de carrinhos de compras;
Como os usuários adicionam ao carrinho de compras sem fazer login no shopping?
Como mesclar após o login.

Antes de discutir a função de adicionar ao carrinho de compras, primeiro entenda a estrutura de dados (tabela) do carrinho de compras. Se você comprou produtos no Jingdong Taobao, o carrinho de compras é essencial (PS: Se você não conhece, abra o APP Jingdong e veja), nenhum amigo conhecedor pode ficar sobrecarregado (desnorteado) com a quantidade de informações do produto/comerciante apresentadas.

Então, quais informações o objeto do carrinho de compras (tabela) deve conter? Mercadorias, comerciantes, preços, promoções, cupons, etc.? Claro que não (por que não, é preciso um longo artigo para deixar claro, vamos falar sobre os resultados por enquanto).

(Foto: O carrinho de compras do APP JD.com)

02 A estrutura do carrinho de compras

Vamos primeiro dar uma olhada na estrutura do carrinho de compras usado pelo projeto de e-commerce anterior (alguns detalhes são ignorados aqui, apenas os principais atributos são listados):

id : 主键
member_id : 会员ID
product_id : SPU ID(商品ID)
sku_id : 商品规格ID
qty : 数量（加购的数量），正整数
join_price : 加入购物车时的价格（用于比对后来价格的变化，也可以不要）
created_time : 记录创建时间
revised_time : 记录修改时间
revisor : 修改人
复制代码

Essa é a estrutura do carrinho de compras desenhado pelo shopping na época, pode ser diferente da situação real de cada empresa onde o pequeno parceiro está localizado, com mais ou menos campos, mas as informações básicas são as mesmas, indissociáveis de quem (quem), o que (qual produto e quantidade), quando (que horas) esses elementos.

03 Não está logado para adicionar ao carrinho?

Talvez alguns amigos digam que se o usuário não estiver logado, não basta orientar o usuário a logar. Por que complicar tanto, na verdade, envolve o problema da experiência do usuário. Ao clicar em adicionar ao carrinho de compras, o usuário é orientado a pular para o login, o usuário preenche as informações da conta e depois faz o login, depois volta para a frente atual e clica na operação de adicionar ao carrinho de compras. Mais 2 passos nesta operação, o que dará ao usuário uma espécie de compulsão.Sinto que a experiência é relativamente ruim, então há uma maneira melhor de lidar com isso?

Se você comprou algo em uma grande plataforma, como Jingdong Gobaodangdang, e preste atenção na operação, você verá que pode clicar para adicionar ao carrinho de compras sem fazer login, e também está na lista do carrinho de compras. isso feito??

carrinho de compras temporário de 04 biscoitos

可能聪明的小伙伴已经想到了，可以使用浏览器本地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：技术老男孩，欢迎关注。