search

Home >Web Front-end >JS Tutorial >Use native JavaScript to implement shopping carts and shopping pages

Use native JavaScript to implement shopping carts and shopping pages

巴扎黑
巴扎黑Original
2017-08-22 17:08:423701browse

The following editor will bring you an article on how to use cookies for native JS shopping carts and shopping pages. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Go directly to the code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物页面</title>
<style>
ul{list-style:none;padding:0;margin:0;}
.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}
.goods li:hover{}
.goods .price{color:#f00;font-weight:bold;}
.goods .price::before{
content:"￥";
}
</style>
<script>
window.onload = function(){
var goods = document.getElementsByClassName(&#39;goods&#39;)[0];

// 用于保存购物车商品信息
var carList = [];

// 先获取当前cookie
var cookies = document.cookie.split(&#39;; &#39;);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(&#39;=&#39;);
if(arr[0] === &#39;carlist&#39;){
carList = JSON.parse(arr[1]);
}
}

// 事件委托
goods.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;

// 添加到购物车
if(target.tagName.toLowerCase() === &#39;button&#39;){

// 获取当前li
var currentLi = target.parentElement.parentElement;
var children = currentLi.children;
var currentGUID = currentLi.getAttribute(&#39;data-guid&#39;);

// 先创建一个对象保存当前商品信息
var goodsObj = {};
goodsObj.guid = currentGUID;
goodsObj.qty = 1;
goodsObj.name = children[1].innerHTML;
goodsObj.price = children[2].innerHTML;
goodsObj.imgUrl = children[0].src;

// 如果cookie为空，则直接添加
if(carList.length===0){
// 添加到carList
carList.push(goodsObj);
}else{
// 先判断cookie中有无相同的guid商品
for(var i=0;i<carList.length;i++){
// 如果商品已经存在cookie中，则数量+1
if(carList[i].guid === currentGUID){
carList[i].qty++;
break;
}
}

// 如果原cookie中没有当前商品
if(i===carList.length){
// 添加到carList
carList.push(goodsObj);
}

}	
// 存入cookie
// 把对象/数组转换诚json字符串：JSON.stringify()
document.cookie = &#39;carlist=&#39; + JSON.stringify(carList);
}

}
}
</script>
</head>
<body>
<ul class="goods">
<li data-guid="g01">
<img src="images/shirt_1.jpg">
<p>短袖衬衣</p>
<p class="price">98.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g02">
<img src="images/shirt_2.jpg">
<p>短袖衬衣2</p>
<p class="price">88.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g03">
<img src="images/shirt_3.jpg">
<p>短袖衬衣3</p>
<p class="price">9.98</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g04">
<img src="images/shirt_4.jpg">
<p>短袖衬衣4</p>
<p class="price">8.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
</ul>
<a href="04car.html" rel="external nofollow" >去结算</a>
</body>
</html>

//Shopping cart page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}
#carList img{display:block;width:100px;}
#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}
#carList li .btn-close:hover{color:#fff;}
.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}
#carList .price{color:#f00;}
.price::before{
content:&#39;￥&#39;;
font-size:11px;
}
#carList .price span{font-size:11px;}
</style>
<script>
window.onload = function(){
/*
读取cookie中的carlist
把json字符串转换成对象/数组：JSON.parse()
json字符串格式：
1.必须用双引号
2.不能右注释
*/
var oCarList = document.getElementById(&#39;carList&#39;);
var oSubPrice = oCarList.nextElementSibling;
var btnClear = document.getElementById(&#39;btnClear&#39;);

var carList;
var cookies = document.cookie.split(&#39;; &#39;);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(&#39;=&#39;);
if(arr[0] === &#39;carlist&#39;){
console.log(JSON.parse(arr[1]));
carList = JSON.parse(arr[1]);
}
}

var subPrice = 0;

if(carList){
var ul = document.createElement(&#39;ul&#39;);
for(var i=0;i<carList.length;i++){
var li = document.createElement(&#39;li&#39;);
// 给每个li添加data-guid属性
li.setAttribute(&#39;data-guid&#39;,carList[i].guid);

// 商品名
var title = document.createElement(&#39;h4&#39;);
title.innerHTML = carList[i].name;

// 商品价格
var price = document.createElement(&#39;p&#39;);
price.className = &#39;price&#39;;
price.innerHTML = carList[i].price + &#39;×&#39; + carList[i].qty;

// 商品图片
var img = document.createElement(&#39;img&#39;);
img.src = carList[i].imgUrl;

// 添加删除按钮
var btnClose = document.createElement(&#39;span&#39;);
btnClose.innerHTML = &#39;×&#39;;
btnClose.className = &#39;btn-close&#39;;

// 计算总价
subPrice += carList[i].price*carList[i].qty;

li.appendChild(title);
li.appendChild(price);
li.appendChild(img);
li.appendChild(btnClose);

ul.appendChild(li);
}

// 写入页面
oCarList.appendChild(ul);

// 写入总价
// toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）
oSubPrice.innerHTML = &#39;<span class="price">&#39; + subPrice.toFixed(2) + &#39;</span>&#39;;
}


// 删除商品
oCarList.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;

// 是否点击了删除按钮
if(target.className === &#39;btn-close&#39;){
var currentLi = target.parentElement;

// 获取当前guid
var currentGUID = currentLi.getAttribute(&#39;data-guid&#39;);

// 删除cookie中对应的商品
// 根据guid取对比
for(var i=0;i<carList.length;i++){
// 找出要删除的商品
if(carList[i].guid === currentGUID){
carList.splice(i,1);
break;
}
}

// 更新cookie
document.cookie = &#39;carlist=&#39; + JSON.stringify(carList);

// 删除li节点
currentLi.parentElement.removeChild(currentLi);
}
}

// 清空购物车
// 1、删除DOM节点
// 2、删除cookie
btnClear.onclick = function(){
oCarList.innerHTML = &#39;&#39;;
oSubPrice.innerHTML = &#39;&#39;;

// 利用设置有效期位过期事件来达到删除cookie的效果
var now = new Date();
now.setDate(now.getDate()-7);
document.cookie = &#39;carlist=xx;expires=&#39; + now;
}
}

</script>
</head>
<body>
<h1>购物车</h1>
<p id="carList">

</p>
<p class="subPrice"></p>
<a href="#" rel="external nofollow" id="btnClear">清空购物车</a>
</body>
</html>

The above is the detailed content of Use native JavaScript to implement shopping carts and shopping pages. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of webpack configuration fileNext article：Detailed explanation of webpack configuration file

Related articles

See more