Introduction:
We certainly are familiar with the merchandise cart this feature, every time we buy a product on a treasure East, fancy items which will join the shopping cart, the final settlement. The shopping cart function to facilitate consumer goods to manage, you can add items, remove items, select an item in the cart or several commodities, as consumers will finally Total operating with the changes.
First, the basic function
- Add items to the shopping cart
- Out of the shopping cart of goods
- Select a product, dynamically updated settlement price
- Increases and decreases in the number of goods
- Select, Inverse, dynamically updated settlement price
Second, the effect of FIG.
1. Home
Include a list, Add to Cart button to dynamically add items to the shopping cart
2. Add the cart
Click the button, achieve Add to Cart function, list items of goods into shopping cart
3. single or multiple select merchandise
Click on the left selection box, select the merchandise, and dynamically updates the total price
4. Select or deselect
Click on the left button above to achieve Select, Inverse function and dynamically update prices
5. Delete cart
Click the Delete button on the right side, the prompt box, click OK to delete the shopping cart of goods and dynamically update prices
Third, the realization of ideas
1, use html achieve
some of the key code is as follows, see the end of the complete code
<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>2, with a modified appearance css
3, designed dynamic effects with JavaScript (jq).
The first step: The first is to design html pages, I used a big div (id = box) will include all commodities, commodity list I used ul li achieved, then the use of cloning a way to display a list of all items, specific codes are as follows
<div id="box">
<h2 class="box_head"><span>买购物车中商品的人还买了</span></h2>
<ul>
</ul>
</div>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": " Redmi AirDots真无线蓝牙耳机 ",
"proPrice": "99.9",
"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");//商品列表所在的div
var oUl = document.getElementsByTagName("ul")[0];//商品列表所在的ul
//遍历所有商品
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);
}The second step: to add cart button to add events
var aBtn = getClass(oBox, "add_btn");//获取box下的所有添加购物车按钮
var number = 0;//初始化商品数量
for (var i = 0; i < aBtn.length; i++) {
number++;
aBtn[i].index = i;
aBtn[i].onclick = function() {
var oDiv = document.createElement("div");
var data = aData[this.index];
oDiv.className = "row hid";
oDiv.innerHTML += '<div class="check left"> <i class="i_check" id="i_check" onclick="i_check()" >√</i></div>';
oDiv.innerHTML += '<div class="img left"><img src="' + data["imgUrl"] + '" width="80" height="80"></div>';
oDiv.innerHTML += '<div class="name left"><span>' + data["proName"] + '</span></div>';
oDiv.innerHTML += '<div class="price left"><span>' + data["proPrice"] + '元</span></div>';
oDiv.innerHTML +=' <div class="item_count_i"><div class="num_count"><div class="count_d">-</div><div class="c_num">1</div><div class="count_i">+</div></div> </div>'
oDiv.innerHTML += '<div class="subtotal left"><span>' + data["proPrice"] + '元</span></div>'
oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
oCar.appendChild(oDiv);
}
}The third step: the number of goods to increase decrease button to add events
//获取所有的数量加号按钮
var i_btn = document.getElementsByClassName("count_i");
for (var k = 0; k < i_btn.length; k++) {
i_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取数量值
node = bt.parentNode.childNodes[1];
console.log(node);
num = node.innerText;
num = parseInt(num);
num++;
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
//获取所有的数量减号按钮
var d_btn = document.getElementsByClassName("count_d");
for (k = 0; k < i_btn.length; k++) {
d_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取c_num节点
node = bt.parentNode.childNodes[1];
num = node.innerText;
num = parseInt(num);
if (num > 1) {
num--;
}
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
Step four: Delete an item
//获取删除按钮，并添加事件
var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
delBtn.onclick = function() {
var result = confirm("确定删除吗?");
if (result) {
oCar.removeChild(oDiv);
number--;
getAmount();
}
}Step Five: Select
by class name to add and delete achieve checked and unchecked features
var index = false;
function checkAll() {
var choose = document.getElementById("car").getElementsByTagName("i");
// console.log(choose);
if (choose.length != 1) {
for (i = 1; i < choose.length; i++) {
if (!index) {
choose[0].classList.add("i_acity2")
choose[i].classList.add("i_acity");
} else {
choose[i].classList.remove("i_acity");
choose[0].classList.remove("i_acity2")
}
}
index = !index;
}
getAmount();
}Step Six: radio
select one or more items, first judge selected, and then through the class name to add and delete achieve checked and unchecked features
//获取选中框
var check = oDiv.firstChild.getElementsByTagName("i")[0];
check.onclick = function() {
// console.log(check.className);
if (check.className == "i_check i_acity") {
check.classList.remove("i_acity");
} else {
check.classList.add("i_acity");
}
getAmount();
}Step Seven: dynamically updated total price
//进行价格合计
function getAmount() {
//获取选中的选择框
ns = document.getElementsByClassName("i_acity");
//初始化总价
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;
}
}Fourth, to achieve complete code
Note: The image address modify their own
online demo Address : Click to enter the online demo
attach download, can be run directly : Click to download address
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/help-center.css" />
<title>我的购物车</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
list-style: none;
color: #666;
text-decoration: none;
font-size: 14px;
}
body {
background: #f5f5f5;
height: 100%;
}
.header{
font-size: 12px;
border-bottom: 2px solid #ff6700;
background: #fff;
color: #b0b0b0;
position: relative;
z-index: 20;
height: 100px;
}
.header .container {
position: relative;
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.header .container .header-logo {
width: 93px;
margin-top: 26px;
}
.logo {
width: 48px;
height: 48px;
position: relative;
display: block;
width: 55px;
height: 55px;
overflow: hidden;
background-color: #ff6700;
}
.header-title {
float: left;
margin-top: 26px;
font-size: 12px;
}
.topbar-info {
margin-top: 30px;
line-height: 40px;
}
.link {
padding: 0 5px;
color: #757575;
text-decoration: none;
}
.hid {
overflow: hidden;
}
.left {
float: left;
}
.box_head{
position: relative;
margin: 0;
height: 50px;
font-size: 30px;
font-weight: 400;
color: #757575;
border-top: 1px solid #e0e0e0;
}
.box_head span{
position: absolute;
top: -20px;
left: 372px;
height: 40px;
width: 482px;
line-height: 40px;
text-align: center;
display: block;
background-color: #f5f5f5;
font-size: 30px;
}
#box {
width:1240px;
margin: 20px auto;
}
#box ul {
margin-right: -14px;
overflow: hidden;
}
#box li {
width: 234px;
float: left;
margin-right: 14px;
padding: 24px 0 20px;
background: #FFF;
text-align: center;
position: relative;
cursor: pointer;
margin-bottom:14px;
}
.pro_img {
width: 150px;
height: 150px;
margin: 0 auto 18px;
}
.pro_name {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 400;
}
.pro_name a {
color: #333;
}
.pro_price {
color: #ff6700;
margin: 10px;
}
.pro_rank {
color: #757575;
margin: 10px;
}
#box li:hover .add_btn {
display: block;
}
#box li:hover .pro_rank {
opacity: 0;
}
#box li .add_btn:hover {
background-color: #f60;
color: white;
}
.add_btn {
height: 22px;
position: absolute;
width: 122px;
bottom: 28px;
left: 50%;
margin-left: -61px;
line-height: 22px;
display: none;
color: #F60;
font-size: 12px;
border: 1px solid #f60;
}
.car {
width: 1240px;
margin: 20px auto;
background: #FFF;
}
.car .check{
width: 50px;
}
.car .check i{
color: #fff;
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border: 1px solid #e0e0e0;
margin-left: 24px;
background-color: #fff;
font-size: 16px;
text-align: center;
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
font-family: "iconfont";
}
.i_acity {
border-color: #ff6700 !important;
background-color: #ff6700 !important;
}
.car .img {
width: 190px;
}
.car .img img {
display: block;
width: 80px;
height: 80px;
margin: 3px auto;
}
.car .name {
width: 300px;
}
.car .name span {
line-height: 1;
margin-top: 8px;
margin-bottom: 8px;
font-size: 18px;
font-weight: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.car .price {
width: 144px;
text-align: right;
padding-right: 84px;
}
.car .price span {
color: #ff6700;
font-size: 16px;
}
.car .number{
width: 150px;
}
.car .subtotal{
width: 130px;
}
.car .ctrl {
width: 105px;
padding-right:25px;
text-align: center;
}
.car .ctrl a {
font-size: 20px;
cursor: pointer;
display: block;
width: 26px;
height: 26px;
margin: 30px auto;
line-height: 26px;
}
.car .ctrl a:hover {
color: #FFF;
background: #ff6700;
border-radius: 50%;
}
.head_row {
height: 70px;
line-height: 70px;
}
.head_row, .row {
border-bottom: solid 1px #e0e0e0;
}
.row {
height: 86px;
line-height:86px;
padding: 15px 0;
margin: 0px;
}
#sum_area{
width:1240px;
height: 60px;
background: white;
margin: 20px auto;
}
#sum_area #pay{
width:250px;
height:60px;
text-align: center;
float: right;
line-height: 60px;
font-size: 19px;
background: #FF4B00;
color: white;
}
#sum_area #pay_amout{
width:250px;
height:60px;
text-align: center;
float: right;
line-height: 60px;
font-size: 16px;
color:#FF4B00 ;
}
#sum_area #pay_amout #price_num{
width:100px;
height: 60px;
font-size: 25px;
color:#FF4B00 ;
/* float: left;*/
}
.item_count_i{
height: 85px;
width:10%;
/*border: 1px solid black;*/
float: left;
margin-right: 25px;
}
.num_count{
width:150px;
height:40px;
border: 1.2px solid #E0E0E0;
float:right;
margin-top: 21px;
}
.count_i{
width:30%;
height:40px;
line-height: 40px;
float: left;
text-align: center;
font-size:21px;
color: #747474;
}
.count_i:hover{
width:30%;
height:40px;
line-height: 40px;
float: left;
text-align: center;
font-size:21px;
color: #747474;
background: #E0E0E0;
cursor: pointer;
}
.c_num{
width:40%;
height:40px;
line-height: 40px;
float: left;
text-align: center;
font-size:16px;
color: #747474;
}
.count_d{
width:30%;
height:40px;
line-height: 40px;
float: left;
text-align: center;
font-size:25px;
color: #747474;
}
.count_d:hover{
width:30%;
height:40px;
line-height: 40px;
float: left;
text-align: center;
font-size:25px;
color: #747474;
background: #E0E0E0;
cursor: pointer;
}
.i_acity2 {
border-color: #ff6700 !important;
background-color: #ff6700 !important;
}
</style>
</head>
<body>
<script>
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": " Redmi AirDots真无线蓝牙耳机 ",
"proPrice": "99.9",
"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 oCar = document.getElementById("car");
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);
}
var aBtn = getClass(oBox, "add_btn");//获取box下的所有添加购物车按钮
var number = 0;//初始化商品数量
for (var i = 0; i < aBtn.length; i++) {
number++;
aBtn[i].index = i;
aBtn[i].onclick = function() {
var oDiv = document.createElement("div");
var data = aData[this.index];
oDiv.className = "row hid";
oDiv.innerHTML += '<div class="check left"> <i class="i_check" id="i_check" onclick="i_check()" >√</i></div>';
oDiv.innerHTML += '<div class="img left"><img src="' + data["imgUrl"] + '" width="80" height="80"></div>';
oDiv.innerHTML += '<div class="name left"><span>' + data["proName"] + '</span></div>';
oDiv.innerHTML += '<div class="price left"><span>' + data["proPrice"] + '元</span></div>';
oDiv.innerHTML +=' <div class="item_count_i"><div class="num_count"><div class="count_d">-</div><div class="c_num">1</div><div class="count_i">+</div></div> </div>'
oDiv.innerHTML += '<div class="subtotal left"><span>' + data["proPrice"] + '元</span></div>'
oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
oCar.appendChild(oDiv);
var flag = true;
var check = oDiv.firstChild.getElementsByTagName("i")[0];
check.onclick = function() {
// console.log(check.className);
if (check.className == "i_check i_acity") {
check.classList.remove("i_acity");
} else {
check.classList.add("i_acity");
}
getAmount();
}
var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
delBtn.onclick = function() {
var result = confirm("确定删除吗?");
if (result) {
oCar.removeChild(oDiv);
number--;
getAmount();
}
}
var i_btn = document.getElementsByClassName("count_i");
for (var k = 0; k < i_btn.length; k++) {
i_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取数量值
node = bt.parentNode.childNodes[1];
console.log(node);
num = node.innerText;
num = parseInt(num);
num++;
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
//获取所有的数量减号按钮
var d_btn = document.getElementsByClassName("count_d");
for (k = 0; k < i_btn.length; k++) {
d_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取c_num节点
node = bt.parentNode.childNodes[1];
num = node.innerText;
num = parseInt(num);
if (num > 1) {
num--;
}
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
delBtn.onclick = function() {
var result = confirm("确定删除吗?");
if (result) {
oCar.removeChild(oDiv);
number--;
getAmount();
}
}
}
}
}
function getClass(oBox, tagname) {
var aTag = oBox.getElementsByTagName("*");
var aBox = [];
for (var i = 0; i < aTag.length; i++) {
if (aTag[i].className == tagname) {
aBox.push(aTag[i]);
}
}
return aBox;
}
var index = false;
function checkAll() {
var choose = document.getElementById("car").getElementsByTagName("i");
// console.log(choose);
if (choose.length != 1) {
for (i = 1; i < choose.length; i++) {
if (!index) {
choose[0].classList.add("i_acity2")
choose[i].classList.add("i_acity");
} else {
choose[i].classList.remove("i_acity");
choose[0].classList.remove("i_acity2")
}
}
index = !index;
}
getAmount();
}
//进行价格合计
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;
}
}
</script>
</head>
<body>
<div class="header">
<div class="container">
<div class="header-logo">
<a class="logo ir" href="" title="小米官网">小米官网</a>
</div>
<div class="header-title" id="J_miniHeaderTitle">
<h2 style="font-size: 30px;">我的购物车</h2>
</div>
<div class="topbar-info" id="J_userInfo">
<a class="link" href="http://www.weichufeng.cn/login.jsp">登录</a><span class="sep">|</span><a class="link" href="http://www.weichufeng.cn/regist.jsp">注册</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>
Thanks for reading, have any questions or comments welcome your