E-commerce development series - how to add to shopping cart if I am not logged in?

The series of articles on development tips is my record and summary of the design and development of the past platform system and stepping on the pit, to provide reference and help for developers who are new to platform system development.

01 What is a shopping cart?

Shopping cart is a necessary function of shopping platform (online mall), like JD.com, Taobao, Dangdang all have such a function, how is the shopping cart realized? Partners may not know, in order to let the small partners who are new to the mall development understand how to do this, let’s discuss this scenario from the perspective of program development, including:

Mixed storage of shopping carts;
How do users add to the shopping cart without logging in to the mall?
How to merge after login.

Before discussing the function of adding to the shopping cart, first understand the data structure (table) of the shopping cart. If you have purchased products on Jingdong Taobao, the shopping cart is essential (PS: If you don't know, open the Jingdong APP and see), no Knowing friends may be overwhelmed (bewildered) by the amount of product/merchant information presented.

So what information should the shopping cart object (table) contain? Commodities, merchants, prices, promotions, coupons, etc.? Of course not (why not, it takes a long article to make it clear, let's talk about the results for the time being).

(Picture: The shopping cart of JD.com APP)

02 The structure of the shopping cart

Let's first take a look at the structure of the shopping cart used by the previous e-commerce project (some details are ignored here, only key attributes are listed):

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

This is the structure of the shopping cart designed by the development mall at that time. It may be different from the actual situation of each company where the small partner is located, with more or less fields, but the basic information is the same, inseparable from who (who), What (what product and quantity), when (what time) these elements.

03 Not logged in to add to cart?

Maybe some friends will say that if the user is not logged in, it is not enough to guide the user to log in. Why make it so complicated, in fact, it involves the problem of user experience. When clicking add to shopping cart, the user is guided to jump to login, the user fills in the account information and then logs in, then jumps back to the current front, and then clicks the operation of adding to the shopping cart. There are 2 more steps in this operation, which will give the user a kind of compulsion. I feel that the experience is relatively poor, so is there a better way to deal with it?

If you have bought something on a big platform such as Jingdong Gobaodangdang, and pay attention to the operation, you will find that you can click to add to the shopping cart without logging in, and it is also in the shopping cart list. How is that done? ?

04 cookie temporary shopping cart

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