商城第七天
一、完成商品详情页
1、实现商品详情页展示
1、需要修改前台首页和前台分类列表页商品的链接地址,跳转到对应的商品详情页
其他商品的链接地址等同。
- 在前台home的GoodsController建立一个detail的方法,输出模板内容
复制对应的模板内容:
效果:
商品基本数据和面包屑导航的展示
- 在home-GoodsController-detail方法中取出对应的数据:
- 模板中遍历
- 面包屑导航
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函数的相关操作:
代码实现
- 当用户访问商品的时候,这时候,就应该把商品的goods_id存储到cookie中去
把上面的方式采用模型的方式来做:结果不行:用原生sql的方式去解决。
# order by( field(goods_id,’2,8,5′) ) 按照字段goods_id 在2,8,5出现的顺序进行排序。
- 在Good模型中定义一个浏览历史的方法
- 详情模板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.
获取到三个参数:
- 发送ajax请求,把商品添加到购物车
- 在home模块CartController控制器中建立一个ajaxAddCart的方法,实现商品添加到购物车
同时完善购物车方法addCart:
模型的新方法:
setInc(字段名,[,数量]) :设置某个字段递增。数量不写默认自增1
setDec(字段名,[,数量]) :设置某个字段递减。数量不写默认递减1
- 根据ajax返回的json值,给用户对应提示
上面代码需要引入layer弹出层插件。
注:其中状态码code不等于200的时候,跳转地址后面加了一个参数return_url,记录当前访问商品的goods_id,当用户加入商品到购物车,提示用户未登录时候,用户再次登录成功,可以返回到之前的购物商品页面,这可提升用户的购物体验。
在登录方法login中,判断用户是否携带参数return_url,携带则跳转到之前访问的商品页。
效果如下:
五、完成购物车商品列表展示
1、分析
2、代码