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>商品列表页面</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库-->
<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">我的购物车</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">纯机械，超酷表带</dd>
<dd class="m3">￥<span>3567</span></dd>
<dd>
<button class="m4">加入购物车</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
</dt>
<dd class="m1">智能手机</dd>
<dd class="m2">大屏幕，超高配置</dd>
<dd class="m3">￥<span>2999</span></dd>
<dd>
<button class="m4">添加购物车</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">添加购物车</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">添加购物车</button>
</dd>
</dl>
</div>
</div>
<!--
描述：数据访问层，操作本地数据的模块
-->
<script type="text/javascript" src="server.js"></script>
<!--
描述：本页面的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>购物车</title>
<!--购物车样式表-->
<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>购物车</h2>
<h3><a href="list.php">返回商品列表页面</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>数量</th>
<th>单价</th>
<th>小计</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>纯机械，超酷表带</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="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
<script src="server.js" type="text/javascript" charset="utf-8"></script>
<!--操作购物车页面的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.
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
