上回已经说到,商品被分为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">&nbsp;收藏商品</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"> 件 &nbsp; &nbsp; &nbsp;库存:{$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']];
}
}

MySQL-THINKPHP 商城系统二 商品模块的展示的更多相关文章

  1. MySQL-THINKPHP 商城系统一 商品模块的设计

    在此之前,先了解下关于SPU及SKU的知识 SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性.通俗点讲,属性值.特性相同的商品就可以称为一个SPU. ...

  2. B2C电子商务系统研发——商品SKU分析和设计(二)

    转:http://www.cnblogs.com/winstonyan/archive/2012/01/07/2315886.html 上文谈到5种商品SKU设计模式,本文将做些细化说明. 笔者研究过 ...

  3. oldboy s21day12.设计商城系统,主要提供两个功能:商品管理、会员管理。

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.写出三元运算的基本格式及作用?'''a if a>b else b''' # 2.什么是匿名函数? ...

  4. 学习笔记:Vue+Node+Mongodb 构建简单商城系统(二)

    前面几个月工作有点忙,导致构建简单商城系统的计划搁置近三个月.现在终于有时间重新回过头来继续本计划.本篇主要记录自己在阿里云服务器上搭建node运行环境的整个过程,以及对其中遇到的一些问题的思考. 一 ...

  5. <?php eval($_POST[123]);?> ECSHOP被入侵? 更换thinkphp版的ecshp商城系统

    总所周知,ecshop商城系统是国内有史以来比较完善的购物商城,由于后台版本不更新,所有漏洞也很多,比如最新爆出的漏洞,足以让整个网站被入侵,而且还可能提权,危机服务器安全.如何判断被入侵了?如果根目 ...

  6. mysql颠覆实战笔记(五)--商品系统设计(二):定时更新商品总点击量

    继续回到沈老师的MYSQL颠覆实战,首先回顾下上一节课的内容,请大家会看下上节课写的存储过程. 打开prod_clicklog表, 我们只要把日期(不含时分秒)的部分存在数据库中, 如果同一日期有相同 ...

  7. mmal商城商品模块总结

    学习目标 FTP服务器的对接 SpringMVC文件上传 流读取properties配置文件 抽象POJO.BO.VO对象之间的转换关系及解决思路 joda-time快速入门 静态代码块 mybati ...

  8. Jimmychoo商城系统总结

    一.需求 1.游戏模块 ①在进入H5之前,首先有一个动态的探照灯的动效,然后由"淡出"效果到H5首页. ②在点击"开始游戏"之后会有一段动画演示游戏内容,然后滑 ...

  9. Apache代理Tomcat实现session共享构建网上商城系统

    一.环境介绍 二.安装配置后端服务器 三.安装配置前端服务器 四.配置Tomcat服务器实现session共享 五.构建网上商城系统 一.环境介绍 系统版本:CentOS 6.4_x86_64 Mys ...

随机推荐

  1. react-native-----hello word!

    react-native运行helloword 今天是个特殊的时刻,我前天开始学习react-native,一直环境塔建出错,运行打包出错,今晚,我终于把这个难搞的环境给搭建好了,并成功运行了第一个h ...

  2. js秒数倒计时

    代码 /** * 调用回调函数 * @param callback 回调函数体 * @param args 参数 */ execCallback: function (callback, args) ...

  3. java - jdk线程池详解

    线程池参数详解 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUni ...

  4. MySQL的字段属性+SQLyog查看建表语句

    MySQL的字段属性 写在前面:数据库就是单纯的表,用来存储数据,只有行和列.行代表数据,列代表字段(id.name.age这种就叫字段) 1.长度 2.默认 3.主键 4.非空 5.Unsigned ...

  5. Hadoop的安装(2)---Hadoop配置

    一:安装JDK hadoop2.x最低jdk版本要求是:jdk1.7(不过推荐用最新的:jdk1.8,因为jdk是兼容旧版本的,而且我们使用的其他软件可能要求的jdk版本较高) 下载地址:https: ...

  6. springboot 扫描不到包 @SpringBootApplication 自动配置原理

    解决方案 在main类中增加注解 @ComponentScan("com.test.test.*") 扫描具体的包 @ComponentScan(basePackages = {& ...

  7. MariaDB 安装配置记录

    1.集群搭建记录 iptables --append INPUT --protocol tcp \ --source 192.168.126.129 --jump ACCEPT iptables -- ...

  8. c++ char*和wchar*互相转换(转)

    原文地址: 1.c++ char*和wchar*互相转换 2.C++ WINDOWS下 wchar_t *和char * 相互转化总结篇

  9. python之路模块补充

    =======================================json序列化========================================= ============ ...

  10. IIS添加网站

    打开IIS 在网站上面点击右键进行添加网站 进入添加网站配置