Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Shopping Page </title>
<style>
ul{list-style:none;padding:0;margin:0;}
. Goods li{display:inline-block;border:1px solid #ddd;p adding:10px;margin:10px;}
. Goods li:hover{background-color: #efefef;}
. Goods. Price{color: #f00; font-weight:bold;}
. Goods. price::before{
Content: "￥";
}
</style>
<script>
Window.onload = function () {
var goods = Document.getelementsbyclassname (' goods ') [0];
For saving shopping cart product information
var Carlist = [];
Get the current cookie first
var cookies = Document.cookie.split ('; ‘);
for (Var i=0;i<cookies.length;i++) {
var arr = cookies[i].split (' = ');
if (arr[0] = = = ' Carlist ') {
Carlist = Json.parse (arr[1]);
}
}
Event delegate
Goods.onclick = function (e) {
E = e | | window.event;
var target = E.target | | E.srcelement;
Add to Cart
if (target.tagName.toLowerCase () = = = ' button ') {
Get current Li
var currentli = target.parentElement.parentElement;
var children = Currentli.children;
var currentguid = Currentli.getattribute (' Data-guid ');
First create an object to save the current product information
var goodsobj = {};
Goodsobj.guid = Currentguid;
Goodsobj.qty = 1;
Goodsobj.name = children[1].innerhtml;
Goodsobj.price = children[2].innerhtml;
Goodsobj.imgurl = CHILDREN[0].SRC;
If the cookie is empty, add it directly
if (carlist.length===0) {
Add to Carlist
Carlist.push (Goodsobj);
}else{
Determine if the cookie has the same GUID item first
for (Var i=0;i<carlist.length;i++) {
If the item already exists in the cookie, the quantity +1
if (Carlist[i].guid = = = Currentguid) {
carlist[i].qty++;
Break
}
}
If there is no current item in the original cookie
if (i===carlist.length) {
Add to Carlist
Carlist.push (Goodsobj);
}
}
Deposit Cookies
Convert object/Array to Eslite JSON string: json.stringify ()
Document.cookie = ' carlist= ' + json.stringify (Carlist);
}
}
}
</script>
<body>
<ul class= "Goods" >
<li data-guid= "G01" >
<p> Short Sleeve Shirts </p>
<p class= "Price" >98.88</p>
<div class= "Add2cart" >
<button> Add to Cart </button>
</div>
</li>
<li data-guid= "G02" >
<p> short-sleeved shirt 2</p>
<p class= "Price" >88.88</p>
<div class= "Add2cart" >
<button> Add to Cart </button>
</div>
</li>
<li data-guid= "G03" >
<p> short-sleeved shirt 3</p>
<p class= "Price" >9.98</p>
<div class= "Add2cart" >
<button> Add to Cart </button>
</div>
</li>
<li data-guid= "G04" >
<p> short-sleeved shirt 4</p>
<p class= "Price" >8.88</p>
<div class= "Add2cart" >
<button> Add to Cart </button>
</div>
</li>
</ul>
<a href= "04car.html" > Go settlement </a>
</body>
Shopping Cart Page 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
<! DOCTYPE html>
<meta charset= "UTF-8";
<title> Shopping Cart </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{background-color: #f00; color: #fff;}
. subprice{padding:5px 20px;color: #f00; font-weight:bold;text-align:right;}
#carList. Price{color: #f00;}
. price::before{
Content: ' ￥ ';
font-size:11px;
}
#carList. Price span{font-size:11px;}
</style>
<script>
window.onload = function () {
/*
Read Carlist in cookie
Convert JSON string to object/ Array: Json.parse ()
JSON string format:
1. Must be in double quotation marks
2. Cannot right comment
*/
var ocarlist = document.getElementById (' Carlist ');
var osubprice = ocarlist.nextelementsibling;
var btnclear = document.getElementById (' btnclear ');
Var Carlist;
var cookies = Document.cookie.split ('; ‘);
for (Var i=0;i<cookies.length;i++) {
var arr = cookies[i].split (' = ');
if (arr[0] = = = ' Carlist ') {
Console.log (Json.parse (arr[1));
Carlist = Json.parse (arr[1]);
}
}
var subprice = 0;
if (Carlist) {
var ul = document.createelement (' ul ');
for (Var i=0;i<carlist.length;i++) {
var li = document.createelement (' li ');
Add the Data-guid attribute to each Li
Li.setattribute (' Data-guid ', carlist[i].guid);
Product Name
var title = document.createelement (' h4 ');
title.innerhtml = Carlist[i].name;
Commodity price
var price = document.createelement (' P ');
Price.classname = ' price ';
price.innerhtml = Carlist[i].price + ' × ' + carlist[i].qty;
Product pictures
var img = document.createelement (' img ');
IMG.SRC = Carlist[i].imgurl;
Add Delete button
var btnclose = document.createelement (' span ');
btnclose.innerhtml = ' × ';
Btnclose.classname = ' btn-close ';
Calculate Total Price
Subprice + = Carlist[i].price*carlist[i].qty;
Li.appendchild (title);
Li.appendchild (price);
Li.appendchild (IMG);
Li.appendchild (btnclose);
Ul.appendchild (LI);
}
Write page
Ocarlist.appendchild (UL);
Write Total Price
ToFixed (n) gets the N-bit (auto-rounding, Number type method) after the decimal point
osubprice.innerhtml = ' <span class= ' price ' > ' + subprice.tofixed (2) + ' </span> ';
}
Delete Item
Ocarlist.onclick = function (e) {
E = e | | window.event;
var target = E.target | | E.srcelement;
Did you click the Delete button?
if (target.classname = = = ' Btn-close ') {
var currentli = target.parentelement;
Gets the current GUID
var currentguid = Currentli.getattribute (' Data-guid ');
Delete the corresponding item in the cookie
Compare by GUID
for (Var i=0;i<carlist.length;i++) {
Find the item you want to delete
if (Carlist[i].guid = = = Currentguid) {
Carlist.splice (i,1);
Break
}
}
Update cookies
Document.cookie = ' carlist= ' + json.stringify (Carlist);
Delete Li node
CurrentLi.parentElement.removeChild (Currentli);
}
}
Empty shopping Cart
1. Delete DOM nodes
2. Delete Cookies
Btnclear.onclick = function () {
ocarlist.innerhtml = ";
osubprice.innerhtml = ";
The effect of deleting cookies is achieved by setting expiration-date events
var now = new Date ();
Now.setdate (Now.getdate ()-7);
Document.cookie = ' carlist=xx;expires= ' + now;
}
}
</script>
<body>
<div id= "Carlist" >
</div>
<div class= "Subprice" ></div>
<a href= "#" id= "btnclear" > Empty cart </a>
</body>
Cookie usage on native JS shopping cart and shopping page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
