【技术种草】介绍一款开源电商网站的购物车添加功能的实现

2021-12-09 219

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【技术种草】介绍一款开源电商网站的购物车添加功能的实现

目前电商领域有两款比较出名的开源电商网站解决方案，分别是基于 Angular 开发框架，代号为 Spartacus 的开源项目，以及基于 Vue 的 Vue Storefront. 作为 Spartacus 开源项目的开发成员之一，今天我想通过本文，给大家介绍一下我们平时购物时最常使用到的功能之一，添加产品到购物车的技术实现。

即使没有多少 Angular 开发经验的前端程序员，阅读本文之后，也能对 Spartacus 电商网站添加商品到购物车的功能实现，有一个最基础的了解。

我们将 Github 上 Spartacus 代码仓库的代码克隆到本地并运行后，通过 https://localhost:4299 可以访问电商页面的 UI：

可以看到此时右上角红色的购物车图标显示的数字为0，意思是当前用户 Jerry Wang，还没有添加任意的商品到购物车里。

我们随便在店铺上选择一台电子设备，进入商品明细页面，点击 Add To Cart，将其添加到购物车：可以在上图产品明细页面的 url 里，找到其产品编号为 1377492.

点击了 Add To Cart 后，在 Chrome 开发者工具 network 标签页里观察到一个 HTTP POST 请求：上图展示的该 POST 请求的负载里，包含 ID 为 1377492 的产品信息。这个 HTTP POST 请求调用购物车更新的 Restful API , 将客户选中的产品添加到购物车里。

该请求响应字段的 statusCode 为 success，如下图所示，说明 API 调用成功。

添加成功的购物车界面一览：

店铺管理员可以登录电商后台管理页面，根据购物车编号 2357 查到我刚刚添加了商品的购物车：下面介绍 Add To Cart 按钮的前端实现细节。

使用 Chrome 开发者工具，很快就能找到这个按钮所在的 Angular Component 的 selector：cx-add-to-cart 进而找到该 Component 的实现：从上图代码第 21 行可以看出，Add To Cart 按钮本身的显示条件，是这个产品必须有库存。当客户输入的购买个数小于等于 0，或者大于最大库存数时，该按钮会被禁用。

点击该 button 之后，执行什么逻辑呢？第 23 行该 button 元素的类型 type 字段的值为 submit，而这个 button 标签，包裹在一个 form 标签内。

我们到该 Component 对应的模板文件头部查看，发现了 submit 事件的处理函数为 addToCart：

在 addToCart 内部，添加商品到购物车的执行逻辑，投递到了该 Component 注入的服务类，ActiveCartService 的 addEntry 方法。

最终，我们使用 NgRx 状态管理框架，将添加购物车这个动作，抽象成一个名为 CartActions.CartAddEntry 的 Action 类，并通过 NgRx Store 的 dispatch 方法投递。

根据 NgRx 的架构图，这些投递出的 Action，最终会被 Effects 接收，后者会调用 Restful API 同后台服务器通信。

然而，这个 CartEntryAdapter 本身和其 add 方法，前面都加上了 abstract 关键字，那么具体的实现到底在哪里呢？

在对应的 NgModule 定义里能找到答案：OccCartEntryAdapter 实现了这个 abstract class. 最终，我们在 OccCartEntryAdapter 的实现代码里，发现这个类，从配置信息里读取并生成后台对应的购物车更新的 API endpoint，然后使用注入的 HttpClient 的 post 方法(下图第35行代码)，根据生成的 endpoint 调用这个 API，最终完成购物车更新操作。