产品详情页开发思路
产品详情页
分为产品和和购物车2个对象
1、产品
- 首先分析产品的属性
产品属性有：产品名称、产品价格、团购价、购买数量、产品描述、产品图片等
- 其次绑定产品信息
（1）绑定基本信息（bindBasic）
$('#pname').html(this.name);
$('#price').html(this.price);
...
（2）绑定图片列表（bindImages）
找产品图片部分的html代码
拼接字符串
var str='';
将动态添加的部分改为变量形式 ，注意逗逗加加（'+变量+'）
拼接完后将字符串添加到对应的位置
2、购物车
- 购物车的属性
购物车产品个数、产品总价格、产品列表
- 购物车的方法
（1）结算 计算总价格
（2）获取产品总数
（3）绑定基本信息 个数+总价格
（4）绑定产品列表
找到代码，拼接字符串，添加到相应位置
3、index.js
- 创建产品实例
var product = new Product();
设置product的属性值，图片采用数组存储
绑定基本信息 product.bindBasic();
绑定图片 product.bindImages();
- 绑定事件
给加入购物车按钮添加点击事件
点击时，应该更新购物车，并重新绑定购物车，触发相应事件
- 创建购物车实例
设置购物车的属性值
再绑定购物车基本信息、购物车里面的产品列表
下面是详细代码：
1、product.js
1 /** 2 * Created by Administrator on 2018/2/4. 3 */ 4 5 function Product(){ 6 //名称 7 this.name=""; 8 //原价 9 this.price=0; 10 //团购价 11 this.groupPrice=0; 12 //数量 13 this.buySum=0; 14 //描述 15 this.description=""; 16 //图片 17 this.images=[{small:'',big:''},{small:'',big:''},{small:'',big:''}]; 18 } 19 20 Product.prototype={ 21 //绑定基本信息 22 bindBasic:function(){ 23 $('#pname').html(this.name); 24 $('#price').html(this.price); 25 $('#groupPrice').html(this.groupPrice); 26 $('#buyCount').html(this.buySum); 27 $('#description').html(this.description); 28 30 }, 31 //绑定图片列表 32 bindImages:function(){ 33 //拼接 34 var str=''; 35 for(var i=0;i<this.images.length;i++){ 36 str+='<li>'; 37 str+='<img class="etalage_thumb_image" src="'+this.images[i].small+'" class="img-responsive" />'; 38 str+='<img class="etalage_source_image" src="'+this.images[i].big+'" class="img-responsive" />'; 39 str+='</li>'; 40 41 } 42 43 $('.etalage').html(str); 44 45 $('#etalage').etalage({ 46 thumb_image_ 250, 47 thumb_image_height: 300 48 }); 49 50 } 51 }
2、cart.js
1 /** 2 * Created by Administrator on 2018/2/4. 3 */ 4 function Cart(){ 5 //购物车的产品个数 6 this.sum=0; 7 //总价格 8 this.allPrice=0; 9 //产品列表 10 this.products=[]; 11 } 12 13 Cart.prototype={ 14 //结算 计算总价格 15 accountClose:function(){ 16 var sum=0; 17 for(var i=0;i<this.products.length;i++){ 18 sum+=this.product[i].price; 19 } 20 return sum; 21 }, 22 23 //获取产品总数 24 getSum:function(){ 25 return this.products.length; 26 }, 27 28 //绑定基本信息 个数+总价格 29 bindBasic:function(){ 30 //个数 31 $('.cartsum').html(this.getSum()); 32 //总价格 33 $('.allPrice').html(this.accountClose()); 34 }, 35 36 //绑定列表 37 bindList:function(){ 38 var str=''; 39 for(var i=0;i<this.products.length;i++){ 40 str+='<div class="cart_box">'; 41 str+='<div class="message">'; 42 str+='<div class="alert-close"></div>'; 43 str+='<div class="list_img"><img src="'+this.products[i].images.small+'" class="img-responsive" alt=""/></div>'; 44 str+='<div class="cart_box">'; 45 } 46 47 $('.shopping_cart').html(str); 48 49 50 51 } 52 53 54 55 }
3、index.js
1 /** 2 * Created by Lenovo on 2016/1/3. 3 */ 4 5 6 /* 使用对象 搭积木*/ 7 8 /*绑定产品*/ 9 10 window.onload =function(){ 11 12 /*实例化一个对象：为什么只有一个实例：再次理解抽象和具体：类和实例的区别*/ 13 var product = new Product(); 14 product.name='HM休闲服登山包2018'; 15 product.description='今天心情好，很好，非常好，马上过年了，真的真的真的好开心！'; 16 product.price=194; 17 product.groupPrice=180; 18 product.buySum=20000; 19 /*数据结构：变量 数组（分成两种） json字典*/ 20 product.images=[ 21 {small:'../images/s11.jpg',big:'../images/s11.jpg'}, 22 {small:'../images/s12.jpg',big:'../images/s12.jpg'}, 23 {small:'../images/s13.jpg',big:'../images/s13.jpg'} 24 ]; 25 26 27 /*面向对象编程*/ 28 /*使用*/ 29 30 //现在：先宏观思考怎么做，然后再写细节 31 32 /*绑定基本信息*/ 33 product.bindBasic(); 34 35 /*绑定图片*/ 36 product.bindImages(); 37 38 39 //绑定事件 40 $('#btnaddcart').click(function(){ 41 //购物车新增一个产品 42 cart.products.push(product); 43 //更新购物车 - 重新绑定购物车 44 cart.bindBasic(); 45 cart.bindList(); 46 //滑动到最顶部 47 $(window).scrollTop(0); 48 }); 49 50 51 52 /*绑定购物车*/ 53 54 var cart = new Cart(); 55 cart.sum=10; 56 cart.allprice=8000; 57 58 //假设购物车中已经有三个产品 59 cart.products.push(product); 60 cart.products.push(product); 61 cart.products.push(product); 62 63 //绑定基本信息 64 cart.bindBasic(); 65 //绑定购物车里面的产品列表 66 cart.bindList(); 67 }
运行效果：
