商城第七天

一、完成商品详情页

1、实现商品详情页展示

1、需要修改前台首页和前台分类列表页商品的链接地址，跳转到对应的商品详情页

其他商品的链接地址等同。

1. 在前台home的GoodsController建立一个detail的方法，输出模板内容

复制对应的模板内容：

效果：

商品基本数据和面包屑导航的展示

1. 在home-GoodsController-detail方法中取出对应的数据：

1. 模板中遍历
2. 面包屑导航

b、商品基本数据

效果：

实现商品详情页中的图片画廊的展示

1、由于图片的路径存储数据库是以json格式存储的，取出来的时候，需要进行json_decode反编码，变成一个图片的数组格式，这样方便在模板中进行遍历。

注：由于TP5上传文件是使用反斜杠\进行路径保存的，但是在画廊中加载不出来，我们需要把其替换成正斜杠/。

修改后台admin的goods模型文件：

之前代码用反斜杠炸开改为用正斜杠炸开:

在模板中找到对应图片预览区域进行遍历：

效果如下：

有关字符串的替换函数：

注意：字符串替换函数既可以替换字符串也可以替换数组中的每个元素

4、实现商品详情页属性的展示

分析

单选属性：

注意一点：

因为单选属性的值可能有多个，所以我们可以把根据属性的attr_id进行分组，把相同属性的attr_id的值归为同一组，方便在模板中进行循环遍历。

唯一属性：

唯一属性不需要分组，因为唯一属性的值只有一个。

通过sql语句取出当前商品的拥有的单选属性：

三张表的关系：

代码实现

取出当前商品的单选属性和唯一属性数据，并且唯一属性通过属性attr_id进行分组，这样方便在模板中进行遍历循环。

原生sql写法找出某个商品的单选属性数据

代码中实现：

a、Db::query($sql);

b、模型实现

模板中遍历单选属性：

效果：

模板中遍历唯一属性：

效果：

二、实现商品详情页的浏览历史

1、分析

基本思路：

①可以使用cookie技术来实现浏览商品历史的存储，cookie中存储商品的goods_id即可。

只所以只存储浏览商品的id，因为商品的价格后面可能随时会变化，且记录一般存储3-5个。

②最新访问的商品应该放置在浏览历史的第一个位置

③当浏览历史存储量到达最大值（如超过5），应把最早访问的商品id给移除。

④当访问相同商品的时候，只保留最后访问的商品，即数组需要删除重复的元素。

cookie怎么存储所访问商品的id: 我们把访问商品的id存进数组中，再把数组写入到cookie中，形式如：[1,4,6,2,8]。‘1,4,6,2,8’

需要利用到的几个数组函数

array_unshift ：在数组头部加入一个或多个元素

array_pop : 弹出数组的最后一个元素

array_unique：去除数组的重复元素，保留之前第一个。

有关cookie函数的相关操作：

代码实现

1. 当用户访问商品的时候，这时候，就应该把商品的goods_id存储到cookie中去

把上面的方式采用模型的方式来做：结果不行：用原生sql的方式去解决。

# order by( field(goods_id,’2,8,5′) ) 按照字段goods_id 在2,8,5出现的顺序进行排序。

1. 在Good模型中定义一个浏览历史的方法

1. 详情模板detail.html中进行遍历

效果：

三、商城购物车概述

1、生活中的购物车

• 购物车就像我们平常逛商场一样，主要是存放临时购买的商品。
• 需要买的商品就加入购物车，不要的就在放入货架（移除购物车），当购物完成之后就推着购物车到收银台去结算付款（支付宝支付）。

2、电商购物车商品存在哪

电商购物车商品存储常用的几种方案：

• cookie+mysql （京东商城）

这里需分两种情况：判断用户是否登录

未登录：把用户加入购物车的商品存储到cookie中（也称离线购物车），这对于没有注册京东用户的，一定程度上可以提升用户的购物体验。

登录：当结算付款时，这时候提示用户登录，把离线购物车中的商品转存在在线购物车（购物数据表）中。

• mysql（淘宝）

用户没登录是不允许加入购物车的。

而淘宝购物车的做法是没有登录是不允许加入购物车的！

我们以淘宝的方式来实现购物车，

购物车存哪些数据，该怎么存

把商品加入到购物车，需要用到三个参数。商品id、商品单选属性id、购买的数量。

由于不同的商品其属性也不一样，所以需要加属性具体区分是哪一个商品。

如iphone6s黑色和iphone6s银色

产品+属性 = 商品

这里我们采用数组的形式来存储购物车商品数据：存储方式如下：

键名：商品$goods_id使用减号（-）拼接商品的属性id,$goods_attr_ids

键值：商品的数量

array(

//键=>值

“$goods_id-$goods_attr_ids” => $number,

“10-12,25” => 5 //商品的goods_id为10，商品属性id为12,25，购买数量为5

);

购物车表sh_cart结构如下：（也称在线购物车），把其中的user_id改为member_id.

字段说明：

cart_id:主键

goods_id:商品的id,和商品表goods_id字段关联

goods_attr_ids:商品的单选属性id,和商品属性表的goods_attr_id字段关联

goods_number:商品的购买数量

member_id:和会员表的member_id关联

购物车表sh_cart和其他几个表之间的关系：

4、购物车类的实现

一般对购物车的商品操作就是增加、减少购买数量，删除商品，清空购物车等操作。

对购物车的操作其实就是对数组的操作，我们可以把这个几个方法封装在一个购物车类中。

购物车类名：

类中有以下几个方法：

• initCartData初始化购物车数据（即获取当前用户购物车中的数据，构造函数中调用）
• addCart 添加商品购物车
• clearCart清空购物车
• getCart获取购物车所有商品
• delCart删除购物车指定商品
• changeCartNum修改购物车商品数量

…..

引入购物车类够商城项目中

在应用目录的extend中,定义一个购物车类Cart,并定义其所在的命名空间：

在控制器中的某个方法中实例化上面的购物车类：

结果：

给购物车类添加以下几个方法：

• initCartData初始化购物车数据（即获取当前用户购物车中的所有数据，构造函数中调用）
• addCart 添加商品购物车
• clearCart清空购物车
• getCart获取购物车所有商品
• delCart删除购物车指定商品
• changeCartNum修改购物车商品数量

上面几个方法定义好之后，最好测试一下是否可行，可向购物车表sh_cart中模拟一些假数据。

四、ajax添加商品到购物车的实现

加入购物车分析

加入到购物车的商品需要以下几个三个字段：

商品id、商品单选属性id、商品数量

加入购物车的基本流程如下：

2、代码

代码如下：

1、给商品详情页中的添加购物车的按钮，绑定一个单击事件，并阻止默认行为，获取商品的goods_id，数量goods_number,选择的单选属性goods_attr_ids.

获取到三个参数：

1. 发送ajax请求，把商品添加到购物车

1. 在home模块CartController控制器中建立一个ajaxAddCart的方法，实现商品添加到购物车

同时完善购物车方法addCart:

模型的新方法：

setInc(字段名,[,数量]) :设置某个字段递增。数量不写默认自增1

setDec(字段名,[,数量]) ：设置某个字段递减。数量不写默认递减1

1. 根据ajax返回的json值，给用户对应提示

上面代码需要引入layer弹出层插件。

注：其中状态码code不等于200的时候，跳转地址后面加了一个参数return_url，记录当前访问商品的goods_id,当用户加入商品到购物车，提示用户未登录时候，用户再次登录成功，可以返回到之前的购物商品页面，这可提升用户的购物体验。

在登录方法login中，判断用户是否携带参数return_url，携带则跳转到之前访问的商品页。

效果如下：

五、完成购物车商品列表展示

1、分析

2、代码