13-pyg-09加入购物车

三、加入购物车

1、商品详情页面-提交表单

点击“加入购物车”，需要发送请求并携带参数

①页面加一个隐藏的form表单，用于点击“加入购物车”后发送请求

②给 购买数量 input输入框加id属性，给“加入购物车”加id属性,

给“加入购物车” 禁用href，用于在js中进行DOM操作

③给“加入购物车”绑定点击事件，获取购买数量等参数，放到表单中并提交表单

2、控制器方法，处理表单

创建Cart控制器，继承Base控制器

基本思路：Cart控制器addcart方法，接收数据，调用封装的方法（下一步才封装），添加购物车数据。

添加成功后，查询商品信息用于页面展示, 见 4.加入成功页面展示

3、封装一个方法，添加购物车数据

思路：

①已登录，则添加数据到数据表；未登录，则添加数据到cookie中。

②以前添加过相同的购买记录，则累加购买数量，否则添加新纪录

已登录：添加到数据表

创建Cart模型：

在home模块下 创建logic目录，在logic目录下 创建CartLogic类文件，封装静态的addCart方法

注意：判断登录，需要根据自己情况，使用登录时设置的登录标识

已登录：添加到数据表

未登录，添加到cookie

注意：下图中的else 是 未登录的else

4、加入成功页面显示

Cart控制器addcart方法，查询商品信息

Goods模型中封装方法

整合模板，修改view/cart/addcart.html,展示商品信息 （模板文件原名称 success-cart.html）

5、测试

可以分别在未登录和已登录两种状态下进行“加入购物车”的测试。

已登录：添加购物车数据后，查看数据表即可

未登录：添加购物车数据后，查看cookie，可通过代码取出cookie数据并打印

用代码方式清除cookie购物数据 ： cookie(‘cart’, null);

四、购物车列表显示

1、购物记录信息展示

①（整合模板）访问地址：Cart控制器index方法，cart.html => index.html页面

②封装方法，获取购物车数据

已登录，查询数据表，得到二维数组格式

未登录，查询cookie，得到二维数组格式

③在Cart控制器index方法中，查询购物车列表的数据，包含商品基本信息

④在view/cart/index.html中，遍历展示数据

2、全选效果

① 全选 状态 影响每一行checkbox的状态。

给全选绑定onchange事件

获取到全选的选中状态（checked属性值）

给每一行的checkbox 设置checked属性值，保持和全选的状态一致

②每一行checkbox状态 影响全选的状态

给每一行的checkbox绑定onchange事件

获取所有行数（所有的单个的checkbox）

获取选中的行数（每一行选中的checkbox数量）

判断所有的行数和选中的行数是否相等

根据判断结果，设置全选的checked属性

3、计算已选商品数量和金额

application/home/view/cart/index.html

思路：

给每一行的checkbox绑定onchange事件中

给全选checkbox绑定onchange事件中

计算的过程：可以封装为一个函数，需要时调用即可

获取到所有选中行的checkbox

循环，取到每一个选中的行的checkbox

根据这个checkbox获取到当前行的数量（input的value值），小计金额（标签的innerHTML）

对数量和小计金额分别进行累加，得到总数量和金额

将计算的总数量和金额，显示到页面上（修改span的innerHTML值，修改i标签的innerHTML）

封装的函数change_total

全选和每一行的checkbox的change事件中，调用change_total函数

页面刷新时，直接调用一次change_total()

4、加减号修改购买数量-页面效果

五、登录时迁移cookie购物数据到数据表

思路：从cookie中取出所有的购物车数据，逐条添加到数据表。

封装cookieToDb方法，用于登录时将cookie中的购物车数据迁移到数据表。

在Login控制器dologin方法中，登录成功并设置登录标识后，进行购物车数据的迁移。

在Login控制器qqcallback方法中

六、修改购物车商品数量

1、前端页面发送ajax请求

需求：

可以通过点击每一行的+ -号，或者直接在input输入框中，修改购买数量。

购买数量的修改，最终需要在保存的购物车数据中修改，并不是只改页面展示。

分析：

需要发送ajax请求，由于参数一致(id, number)，成功后的处理都一样，

可以在js中封装一个change_num函数，用于发送ajax请求修改购买数量

实现：

修改view/cart/index.html

在每一行的ul标签添加自定义的属性cart_id，存储id值

封装函数changenum

ajax成功后的处理

在js中，给+号和-号分别绑定点击事件，重新计算新的数量，调用change_num函数发送ajax

给input输入框绑定change事件，当输入框的值发生变化（失去焦点之后）则触发。

2、控制器中处理ajax请求

修改Cart控制器，增加一个changenum方法，用于ajax请求。

3、封装方法修改购买数量

思路：已登录，修改数据表；未登录，修改cookie

4、页面优化（数量错误时，恢复原状）

如果购买数量格式不对，提示之后，将页面上的数量恢复原状。

需要：在每一行的ul标签 增加一个number属性，记录原始的数量

每次发送ajax修改数量后，需要更新number属性的值。

input输入框的change事件中修改如下

5、修改数量后，重新计算小计金额

七、删除购物车记录

1、前端页面发送ajax请求

给页面上”删除”绑定点击事件，发送ajax请求删除数据

禁用a标签的href属性

绑定事件，发送ajax请求

ajax成功后的处理

2、控制器中处理ajax请求

在Cart控制器增加delcart方法，用于ajax请求

3、封装方法删除购物记录

思路：已登录，删除数据表记录；未登录，删除cookie中的记录。

八、修改选中状态

点击checkbox 修改对应记录的选中状态

每一个行的选中

全选选中

控制器方法中

封装逻辑方法

总结：

1、加入购物车（提交隐藏表单、控制器方法、封装逻辑方法、成功页面展示、封装查询商品和sku数据方法）

2、购物车列表（封装查询数据的逻辑方法、查询对应的商品和sku、遍历展示数据、js选中效果、加减号效果）

3、登录迁移购物车数据（封装逻辑方法、登录后调用方法）

4、修改购买数量（绑定3个事件、发送ajax请求-封装、成功后的处理；控制器方法、封装逻辑方法）

5、删除购物记录（发送ajax请求、成功后的处理、控制器方法、封装逻辑方法）。

6、修改选中状态