MySQL-THINKPHP 商城系统二 商品模块的展示
2024-09-06 21:22:20
上回已经说到，商品被分为spu商品和sku商品 ，
---------------------------------------------------------------------------------------------------------------------------------
难点一 商品列表页的展示
由于spu商品没有价格，所有商品列表展示页，我们决定展示sku商品
public function index()
{
$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页面，重新渲染
前台代码
</style>
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<div class="row">
<img class="detail_img" style="width: 100%;" src="__STATIC__/uploads/
{if $goodssku.small_img!=''}
{$goodssku.small_img}
{else/}
{$goods.img}
{/if}
" alt="...">
</div>
<div class="row" style="color: gray; margin-left: 10px;margin-top: 10px;">
<a onclick="save({$goodssku.id},this)" href="#"><span class="glyphicon glyphicon-star"></span><span id="save"> 收藏商品</span></a>
</div>
</div> <div class="col-md-7">
<div class="title"> <h4>{$goods.name}</h4>
<span style="color:red"> {$goodssku.keyword}</span> </div>
<br>
<div class="price" style="background-color: #FFF8DC;">特惠价:<span style="color: red; font-weight: 3px; font-size: 22px;"> {$goodssku.price}¥</span>
<span style="float: right;">累计评价<br>0</span>
</div>
<br>
{foreach name="sku_data" item="vo"}
<div><span style="color: gray;" class="key_class tonek"> 选择{$key}：</span>
{volist name="vo" id="attr"}
<li><button onclick="main(this)" class="btn btn-default
{if isset($attr.is_active) && ($attr.is_active == '1')}
active
{/if}
" type="button" >{$attr.string} </button><input type="hidden" value='{$attr.json}'></li>
{/volist} </div>
{/foreach} <div class="stock" style="color:gray;margin-top: 20px;"> 数量 <input type="number" id="sku_num" style="width: 40px;" min="1" max="{$goodssku.stock}" value="1"> 件 库存：{$goodssku.stock}件</div> <button onclick="add_cart({$goodssku.id})" style="margin-top: 20px; width: 150px;" type="button" class="btn btn-danger btn-lg"
{if $goodssku.stock<1}
disabled
{/if} > {if $goodssku.stock<}
无货
{else/}
加入购物车
{/if}
</button>
</div>
</div> <div class="row">
<div class="col-md-12">
<hr>
<div > </div>
</div>
</div>
</div> <script>
function main(obj){
//如果每个都有一个button被选择了就。。。
$(obj).parent().siblings().each(function(){
$(this).children('button').removeClass('active');
}); $(obj).addClass('active'); //每一个菜单都有一个选中
var jsonData = new Array();
$(".key_class").each(function(){
var length = $(this).siblings('li').children('button.active').length;
if(length==1){
var json = $(this).siblings('li').children('button.active').next().val();
jsonData.push(json);
} }); if({:count($sku_data)} == jsonData.length){
console.log(jsonData);
} $.post("{:url('goods/getSkuId')}",{jsonData:jsonData},function(data){
if(data.ok == '1'){
//跳转到指定sku页面
$url = "{:url('goods/detail')}?sku="+data.sku_id;
window.location.href=$url;
/*alert($url);*/
}else{ }
}); }
后台代码
//得到sku
public function getSkuId(){
$data = $_POST['jsonData'];
$json = '{';
foreach ($data as $key => $value) {
$x = substr($value,1,strlen($value)-2); $json .= $x; if((count($data) - $key) != 1){
$json.= ',';
}
}
$json .= '}'; $goodssku = Goodssku::get(['specs_list'=>$json]);
if($goodssku){
return ['ok'=>'1','sku_id'=>$goodssku['id']];
}
}
最新文章
- CodeForces - 274B Zero Tree
- PHP规范PSR2
- linux下如何打包压缩？解包解压？.tar文件.gz文件
- LESS介绍及其与Sass的差异
- apache配置文件 httpd-vhosts.conf 和 htaccess
- 深入理解python之self
- 预热buffer pool
- [设计模式] 7 适配器模式 adapter
- linux time命令参数--执行命令并计时
- XSS【跨站脚本攻击】
- AsyncTask的新认识
- 相机标定：kalibr标定工具箱使用总结
- Java学习笔记--异常描述
- Linux驱动之USB总线驱动程序框架简析
- 用webpack2.0构建vue2.0超详细精简版
- 字符串数据结构模板/题单（后缀数组，后缀自动机，LCP，后缀平衡树，回文自动机）
- ABP框架系列之四十五：(Quartz-Integration-Quartz-集成)
- MVVM设计模式和在WPF中的实现（四） 事件绑定
- art.template 循环里面分组。
- openvpn-客户端配置文件