上回已经说到,商品被分为spu商品和sku商品 ,
---------------------------------------------------------------------------------------------------------------------------------
难点一 商品列表页的展示
由于spu商品没有价格,所有商品列表展示页,我们决定展示sku商品
public functionindex()
{$where =[];$where['status'] = '1';$where['stock'] = ['GT' , '0'];$list = Goodssku::order('create_time','desc')->where($where)->paginate(6);$this->assign('goods_sku_list',$list);return $this->fetch();
}
---------------------------------------------------------------------------------------------------------------------------------
难点二 商品详情页的展示
我们采用sku和spu的组合展示
即 : sku基于spu ,spu生成sku
比如用户点击商品列表的某个sku商品,
前台逻辑:
1,接收sku_id
2,由sku_id 得到 sku商品数组和spu商品数组
3,把spu的json(sku_attribute_list) 和spu的json(specs_list)分别转换成数组
4,遍历它们,得到一个新数组
array(2) {
["颜色"] => array(2) {
[0] => array(2) {
["string"] => string(8) "27英寸"["json"] => string(33) "{"\u989c\u8272":"27\u82f1\u5bf8"}"}
[1] => array(3) {
["is_active"] => string(1) "1"["string"] => string(10) "21.5英寸"["json"] => string(35) "{"\u989c\u8272":"21.5\u82f1\u5bf8"}"}
}
["版本"] => array(2) {
[0] => array(2) {
["string"] => string(35) " i5-8400 8G 1T 2G独显 WIFI 蓝牙"["json"] => string(66) "{"\u7248\u672c":" i5-8400 8G 1T 2G\u72ec\u663e WIFI \u84dd\u7259"}"}
[1] => array(3) {
["is_active"] => string(1) "1"["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"["json"] => string(50) "{"\u7248\u672c":"i5-8400 8G 1T WIFI \u84dd\u7259"}"}
}
}
这个数组将展示到前台为规格选项,其中
["is_active"] => string(1) "1"代表该项spu属性值是当前sku的属性值,在前台页面会被默认选中,代表当前的sku
["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"
代表前台展示的规格待选取项
["json"] => string(50) "{"\u7248\u672c":"i5-8400 8G 1T WIFI \u84dd\u7259"}"代表当前规格,对应的json字符串
展示为:
---------------------------------------------------------------------------------------------------------------------------------
难点二 实现用户,重选属性,生成新的sku
逻辑:用户点击了一个属性之后就判断:
是否每一项属性都有一个属性值是active的状态,如果不是 return
如果是,那么就代表可以生成新的sku商品,
此时,得到每个选中属性值的json,用ajax传送到后台,
后台把json串联成一个json字符串,再在goodsssku模型 里面找到匹配这个json字符串的sku_id
前台js接收到sku_id,跳转到指定sku页面,重新渲染
前台代码
{if $goodssku.small_img!=''}
{$goodssku.small_img}
{else/}
{$goods.img}
{/if}
"alt="...">