©2020-2024 ioDraw All rights reserved,
Privacy Policy
购物车对于大部分用户来说肯定都不陌生，每当双十一、双十二，我们都要把自己想要买的东西，提前加入购物车中，等到11月11号的凌晨抢时间抓紧下单。这对于用户来说，既可以管理自己想要购买的物品，又可以在购物车中进行选择。对于所有的购物用户来说都很方便、直观。
但是一些对于用户来说方便、简洁的功能，对于开发者来说会很复杂。为了给用户提供便捷的功能，其中大量复杂的业务逻辑都是开发者处理了。不过开发者在看到自己的成果之后，会很有成就感，也就不会在乎那些曾经的那些付出。
第一步，实现购物车的样式布局结构：
<body> <div class="header"> <div class="container clearfix"> <div
class="header-logo fl"> <a class="logo ir" href="" title="">购物车</a> </div> <div
class="header-title fl" id="J_miniHeaderTitle"> <h2 style="font-size:
30px;">我的购物车</h2> </div> <div class="topbar-info fr" id="J_userInfo"> <a
class="link" href="">登录</a><span class="sep">|</span><a class="link"
href="">注册</a> </div> </div> </div> <div id="car" class="car"> <div
class="head_row hid"> <div class="check left"> <i
onclick="checkAll()">√</i></div> <div class="img left"> 全选</div>
<div class="name left">商品名称</div> <div class="price left">单价</div> <div
class="number left">数量</div> <div class="subtotal left">小计</div> <div
class="ctrl left">操作</div> </div> </div> <div id="sum_area"> <div
id="pay">去结算</div> <div id="pay_amout">合计：<span id="price_num">0</span>元</div>
</div> <div id="box"> <h2 class="box_head"><span>买购物车中商品的人还买了</span></h2> <ul>
</ul> </div> </body>
上述示例代码完成了整个购物车页面的HTML结构，在HTML结构中，我们将样式相同的模块进行提取，通过使用js循环的方式，根据商品的数量进行循环生成商品列表。如果是在与后台的交互过程中，后台工程师也会将商品组合成一个list列表给我们前端工程师。
接下来，就需要给浏览器的页面添加样式效果，这里的样式就让大家自己去完成了。循环给页面赋值，最终生成商品列表的代码如下：
window.onload = function() { var aData = [{ "imgUrl": "img/03-car-01.png",
"proName": " 手环4 NFC版 ", "proPrice": "229", "proComm": "1" }, { "imgUrl":
"img/03-car-02.png", "proName": " AirDots真无线蓝牙耳机 ", "proPrice": "99",
"proComm": "9.7" }, { "imgUrl": "img/03-car-03.png", "proName": " 蓝牙温湿度计 ",
"proPrice": "65", "proComm": "1.3" }, { "imgUrl": "img/03-car-04.png",
"proName": " 小爱智能闹钟 ", "proPrice": "149", "proComm": "1.1" }, { "imgUrl":
"img/03-car-05.png", "proName": "电子温湿度计Pro ", "proPrice": "750", "proComm":
"0.3" }, { "imgUrl": "img/03-car-06.png", "proName": "手环3 NFC版 Pro ",
"proPrice": "199", "proComm": "3.3" }, { "imgUrl": "img/03-car-07.png",
"proName": " 手环3 / 4 通用腕带", "proPrice": "19.9", "proComm": "1.2" }, { "imgUrl":
"img/03-car-08.png", "proName": "温湿度传感器 ", "proPrice": "45", "proComm": "0.6"
}, { "imgUrl": "img/03-car-09.png", "proName": "电子温湿度计Pro 3个装 ", "proPrice":
"207", "proComm": "0.3" }, { "imgUrl": "img/03-car-10.png", "proName": "手环3 ",
"proPrice": "199", "proComm": "7.2" } ]; var oBox =
document.getElementById("box"); var oUl =
document.getElementsByTagName("ul")[0]; for (var i = 0; i < aData.length; i++)
{ var oLi = document.createElement("li"); var data = aData[i]; oLi.innerHTML +=
'<div class="pro_img"><img src="' + data["imgUrl"] + '" width="150"
height="150"></div>'; oLi.innerHTML += '<h3 class="pro_name"><a href="#">' +
data["proName"] + '</a></h3>'; oLi.innerHTML += '<p class="pro_price">' +
data["proPrice"] + '元</p>'; oLi.innerHTML += '<p class="pro_rank">' +
data["proComm"] + '万人好评</p>'; oLi.innerHTML += '<div
class="add_btn">加入购物车</div>'; oUl.appendChild(oLi); } }
实现的购物车静态页面效果如下：
最后，也是最复杂的部分，就是处理购物车的业务逻辑，我们要在商品上点击加入购物车，商品会自动展示在购物车模块中，加入多个商品，勾选商品前的选择复选框，可以进行核算商品的总价格，去结算。还可以删除已加入购物车的商品。
实现商品价格合计方法的代码:
//进行价格合计 function getAmount() { // console.log(ys); ns =
document.getElementsByClassName("i_acity"); console.log(ns); sum = 0; //选中框
document.getElementById("price_num").innerText = sum; for (y = 0; y <
ns.length; y++) { //小计 amount_info =
ns[y].parentElement.parentElement.lastElementChild.previousElementSibling; num
= parseInt(amount_info.innerText); sum += num;
document.getElementById("price_num").innerText = sum; } }
不管我们进行购物车中复选框的勾选功能，还是购物车的删除商品功能，还是进行商品的加减，都需要进行价格的核算。所以这个方法是很重要的。
最终实现的购物车的功能如下：