引言
在电子商务网站中，购物车功能是至关重要的一环。它允许用户浏览商品，选择他们想要购买的商品，并将它们添加到购物车中，然后在准备结账时一次性支付。本文将详细介绍如何实现购物车功能。
一、设计购物车的数据结构
首先，我们需要设计一个数据结构来存储购物车中的商品。这个数据结构通常包含以下几个部分：
- 商品ID：每个商品的唯一标识符。
- 商品数量：用户想要购买的商品数量。
- 商品价格：商品的单价。
- 商品总价：商品数量乘以商品价格。
二、购物车的功能需求分析
1.添加商品到购物车
当用户点击“添加到购物车”按钮时，我们需要将该商品添加到购物车的数据结构中。这通常涉及到更新购物车数据结构的相应部分。例如，如果用户已经将一个商品添加到购物车中，我们只需要增加商品的数量；如果用户首次添加该商品，我们需要创建一个新的条目。
2.从购物车中移除商品
当用户点击“从购物车中移除”按钮时，我们需要从购物车的数据结构中删除相应的商品。这通常涉及到查找并删除购物车数据结构中的相应条目。
3.更新购物车中的商品数量
当用户更改购物车中商品的数量时，我们需要更新购物车数据结构中的相应部分。这通常涉及到查找并更新商品数量。
4.计算购物车的总价
为了方便用户查看他们的购物车中总共有多少商品，我们需要实现一个函数来计算购物车的总价。这通常涉及到遍历购物车数据结构，并将每个商品的价格乘以其数量。
5.显示购物车的内容
最后，我们需要在用户的界面上显示购物车的内容。这通常涉及到遍历购物车数据结构，并显示每个商品的名称、数量和价格。
功能实现
效果图:
界面设计：
<body>
<!-- 导航 -->
<div class="navbar">
<li class="layui-nav-item"> <a href="#"></a><img src="../public/img/logo.png" alt="#" style="width: 56px; height: 56px;" ></li>
<li class="layui-nav-item">
<a href="../view/zx.html">智 信 首 页</a>
</li>
<li class="layui-nav-item">
<a href=""><i class="layui-icon layui-icon-form" style="font-size: 28px; color: orangered;"></i>我 的 订 单</a>
</li>
<li class="layui-nav-item">
<a href=""><i class="layui-icon layui-icon-star" style="font-size: 28px; color: orangered;"></i>我 的 收 藏</a>
</li>
<li class="layui-nav-item">
<a href=""><i class="layui-icon layui-icon-chat" style="font-size: 28px; color: orangered;"></i>智 信 会 员</a>
</li>
<li class="layui-nav-item">
<a href=""><i class="layui-icon layui-icon-service" style="font-size: 28px; color: orangered;"></i>客 服 中 心</a>
</li>
<li class="layui-nav-item">
<a href=""> <i class="layui-icon layui-icon-log" style="font-size: 28px; color: orangered;"></i>动 态 管 理</a>
</li>
<li class="layui-nav-item">
<a href=""><i class="layui-icon layui-icon-dialogue" style="font-size: 28px; color: orangered;"></i>私 信</a>
</li>
<li class="layui-nav-item">
<a href="../view/myzx.html"><i class="layui-icon layui-icon-user " style="font-size: 28px; color: orangered;"></i>我 的 智 信</a>
</li>
<li class="layui-nav-item">
<a href="#"><i class="layui-icon layui-icon-cart" style="font-size: 28px; color: orangered;"></i>购物车</a>
</li>
</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>功能模块实现：
<script>
window.onload = function() {
var aData = [{
"imgUrl": "../public/img/omo.png",
"proName": " OMO洗衣液 ",
"proPrice": "85.50",
"proComm": "152"
},
{
"imgUrl": "../public/img/java2.png",
"proName": " JAVA智能软件开发",
"proPrice": "24.80",
"proComm": "972"
},
{
"imgUrl": "../public/img/jr.dpg",
"proName": " 洁柔抽纸",
"proPrice": "9.9",
"proComm": "132"
},
{
"imgUrl": "../public/img/yl.jpg",
"proName": " 伊利纯牛奶 ",
"proPrice": "60.0",
"proComm": "114"
},
{
"imgUrl": "../public/img/hfs.webp",
"proName": "红富士",
"proPrice": "12.8",
"proComm": "243"
},
{
"imgUrl": "../public/img/java2.png",
"proName": " java项目开发实战入门（全彩版） ",
"proPrice": "35.2",
"proComm": "332"
},
{
"imgUrl": "../public/img/java.png",
"proName": " java设计模式与实践",
"proPrice": "99.0",
"proComm": "244"
},
{
"imgUrl": "../public/img/java.png",
"proName": " java设计模式与实践第三版 ",
"proPrice": "45.0",
"proComm": "621"
},
{
"imgUrl": "../public/img/java2.png",
"proName": " java设计模式与实践第四版 ",
"proPrice": "69.0",
"proComm": "334"
},
{
"imgUrl": "../public/img/java.png",
"proName": " java设计模式与实践<全套> ",
"proPrice": "99",
"proComm": "771"
}
];
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 = parseFloat(amount_info.innerText);
sum += num;
document.getElementById("price_num").innerText = sum;
}
}
</script>
扫一扫
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
