Complete code of shopping cart function for developing shopping cart with JavaScript
This section shows the complete code of the shopping cart function of JavaScript development shopping cart.
By referencing the 4 JS files we created, all functions of the shopping cart are fully implemented on the page.
We created the list.php file for product display, the cookie.js file operates cookies, the
index.js file operates the list page, and the server .js operates local data module.
The cart.php file displays the shopping cart page, and the cart.js file operates the shopping cart.
Complete product list page list.php code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表頁(yè)面</title>
<!--商品列表樣式表-->
<style>
h2{
text-align: center;
}
a{
text-decoration: none;
}
.mycar{
border: 1px solid #d4d4d4;
width: 160px;
background-color: #d4d4d4;
font-family: 微軟雅黑,宋體;
}
dl{
float: left;
border: 1px solid #d4d4d4;
margin-left: 10px;
margin-top: 20px;
}
.m1{
margin-left: 35%;
font-family: 微軟雅黑,宋體;
font-size: 16px;
font-weight: bolder;
display: block;
}
.m2{
font-size: 10px;
color: #0000FF;
margin-top: 3%;
margin-left: 33%;
display:block;
line-height: 14px;
}
.m3{
color: red;
font-weight: bolder;
font-size: 18px;
display: block;
line-height: 14px;
text-align: left;
}
.m4{
background-color: crimson;
font-weight: bolder;
color: white;
display: block;
line-height: 14px;
margin-left: 30%;
}
@media only screen and (min-width: 410px){
dl{
margin: 20px 8px;
}
}
@media only screen and (min-width: 350px) and (max-width: 410px){
dl{
margin: 20px 8px;
}
}
}
@media only screen and (max-width: 350px){
dl{
margin: 20px 8px;
}
}
</style>
<!--cookie操作的js庫(kù)-->
<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container" >
<h2>商品展示列表</h2>
<div class="mycar">
<a href="cart.php">我的購(gòu)物車</a><i style="margin-left: 10px; color: red; font-weight: bolder;" id="ccount">0</i>
</div>
<div class="list">
<dl pid="1001">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg"/>
</dt>
<dd class="m1">智能手表</dd>
<dd class="m2">純機(jī)械，超酷表帶</dd>
<dd class="m3">￥<span>3567</span></dd>
<dd>
<button class="m4">加入購(gòu)物車</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
</dt>
<dd class="m1">智能手機(jī)</dd>
<dd class="m2">大屏幕，超高配置</dd>
<dd class="m3">￥<span>2999</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
<dl pid="1003">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58298020ad204771.jpg" />
</dt>
<dd class="m1">平板電腦</dd>
<dd class="m2">新上市，值得擁有</dd>
<dd class="m3">￥<span>1899</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
<dl pid="1004">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/582980398200b667.jpg" />
</dt>
<dd class="m1">超極本</dd>
<dd class="m2">夠輕薄，夠流暢</dd>
<dd class="m3">￥<span>4999</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
</div>
</div>
<!--
描述：數(shù)據(jù)訪問(wèn)層，操作本地?cái)?shù)據(jù)的模塊
-->
<script type="text/javascript" src="server.js"></script>
<!--
描述：本頁(yè)面的js操作
-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>Complete shopping cart cart.php function implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購(gòu)物車</title>
<!--購(gòu)物車樣式表-->
<style>
h2{
text-align: center;
}
table{
margin: auto;
width: 90%;
border-color: inherit;
}
th{
color: white;
font-weight: bold;
font-family: 微軟雅黑,宋體;
}
img{
height: 60%;
display: block;
margin: auto;
}
input{
text-align: center;
font-weight: bold;
}
button{
font-weight: bold;
font-size: 13px;
}
</style>
<!--操作cookie的js文件-->
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<div class="container">
<h2>購(gòu)物車</h2>
<h3><a href="list.php">返回商品列表頁(yè)面</a></h3>
<table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
<thead>
<tr style="background-color: #87adbf;">
<th>
<input type="checkbox" id="allCheck" class="ck" />全選
</th>
<th>圖片</th>
<th>描述</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!--
<tr>
<td><input type="checkbox" class="ck" /></td>
<td>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
</td>
<td>純機(jī)械，超酷表帶</td>
<td>
<button class="down">-</button><input type="text" value="1" readonly="readonly" /><button class="up">+</button>
</td>
<td>￥<span>3567</span></td>
<td>￥<span>3567</span></td>
<td><button class="del" >刪除</button></td>
</tr>
-->
</tbody>
</table>
<div class="box" id="box"></div>
<h2 id="h2" class="">總價(jià)格：￥<span id="totalPrice">0</span></h2>
</div>
<script src="server.js" type="text/javascript" charset="utf-8"></script>
<!--操作購(gòu)物車頁(yè)面的cart.js-->
<script src="cart.js"></script>
</body>
</html>In this way, we can implement the basic shopping cart function through JavaScript code. Everyone can make various attempts through learning.
This code is only for learning and communication among friends.
