原生js实现购物车逻辑和功能
更新时间：2021年09月22日 10:48:55 作者：不忘初心ing
这篇文章主要为大家详细介绍了原生js实现购物车逻辑和功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现购物车逻辑和功能的具体代码，供大家参考，具体内容如下
1、购物车的主体内容布局尽量用表格的布局模式
2、判断用户是否登录
代码如下，可以根据自己头部的布局来具体修改
// 判断用户是否登录
var username = getCookie("username");
//如果登录成功就执行这段代码
if(username){
var vip = $(`<a href='javascript:;'>欢迎<b>${username}</b>来到天猫超市</a>`)
var loginout = $(`<a href='javascript:;' class="loginout">退出</a>`)
$(".hLeft").empty()
$(".hLeft").append(vip)
$(".hLeft").append(loginout)
$(".hLeft>a").css({
"color":"#666",
"lineHeight":"32px",
"marginLeft":"10px"
})
$(".hLeft>a>b").css({
"color":"red",
"fontWeight":"800",
})
$(".loginout").click(function(){
removeCookie("username")
$(".hLeft").empty()
$(".hLeft").html(` <a href="home.html" >天猫首页</a>
<a href="javascript:;" >喵，欢迎来到天猫</a>
<a href="login.html" >请登录</a>
<a href="register-test.html" >免费注册</a>`)
})
}else{
alert("请先登录");
location.assign("./login.html");
}
3、判断从详情页是否有数据传过来
在这里我数据是保存到本地存储里面的，你可以根据自己存储的地方来获取数据
代码如下：
// 接收详情页传过来的数据
// 先判断本地存储中有没有商品
var data = localStorage.getItem("cart");
if(!data){
$(".page-con").empty();
var str = "";
str +=`<h2>购物车空空如也！！！</h2>
<p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
`
$(".page-con").html(str);
$(".page-con").css({width:"900px",margin:"40px auto 0"});
$(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
$(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
$(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}else{
// 再判断是否有当前用户的购物车是数据
// 将数据转成数组类型
data = JSON.parse(data);
// 查看数据是否存在
for(var j=0;j<data.length;j++){}
var res = data.some(v=>{
return v.username == username;
})
if(!res){
$(".page-con").empty();
var str = "";
str +=`<h2>购物车空空如也！！！</h2>
<p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
`
$(".page-con").html(str);
$(".page-con").css({width:"900px",margin:"40px auto 0"});
$(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
$(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
$(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}else{
// 有数据 且有自己的数据
// 先把自己的数据找出来
var arr = data.filter(v=>v.username == username);
// 遍历获取的数据
// 在数组中没有想要的商品数据，需要从数据库中获取一下 通过id在数据库中查找数据
var ids = arr.map(v=>v.goodsid);
ids = ids.join(",")
4，查询有详情页传送过来的数据时 ，我们可以通过传过来的id到数据库中查找我们想要的数据
发送ajax到数据库中查找商品的信息
$.ajax({
url:"./server/cart.php",
dataType:"json",
data:{ids:ids},
type:"get",
success:res=>{
var str = '';
for(var i=0;i<res.length;i++){
// 根据res[i] 每一条商品，从arr中找出number数量
var number = arr.find(v=>v.goodsid==res[i].id).number;
str +=`
<div class="pageMtop">
<input type="checkbox" name="onetop"><i></i><span>店铺：${res[i].name}</span><em></em>
</div>
<div class="pageMcontent">
<h3><img src="images/cat10.png">8.6 0点开享,每满300减30</h3>
<ul>
<li>
<input type="checkbox" name="one">
</li>
<li>
<a href="#" >
<img src="${res[i].imgpath}">
</a>
</li>
<li>
<p>
<a href="#" >${res[i].introduce}</a>
</p>
<img src="images/cat03.png" alt="">
<a href="javascript:;" ><img src="images/cat04.png" alt=""></a>
</li>
<li>
<p>尺码：M</p>
<p>主要颜色：6685白色+6691雾霾蓝（M码预售8月8号发出</p>
<a href="#" >修改</a>
</li>
<li>
<span>${res[i].price}</span>
</li>
<li class="data-name" data-id = "${res[i].id}">
<input type="button" class="reduce" value="-">
<input class="numberone" type="number" name="number" data-stock="${res[i].stock}" value="${number}">
<input type="button" class="add" value="+">
</li>
<li class="subtotal">
${res[i].price*number}
</li>
<li>
<p>移入文件夹</p>
<p class="btn">删除</p>
<p>宝贝</p>
</li>
</ul>
</div>
`
}
$(".page-middle").html(str)
//在这里添加全选功能
// 在这里写的话 代码嵌套太深 - 将功能写在外面，然后在这边调用函数
//调用全选的功能
selectAll()
//调用单选功能
selectone()
// 计算总价和总数量
priceAndNumberAll()
// 数量加减
addAndReduce()
// 点击删除键
removebtn()
}
})
}
在这里商品列的布局和内容渲染我们需要动态加载，然后添加到放主体内容的大盒子里
5、实现购物车页面的功能
因功能代码比较多，都放在ajax中会显得冗余，我们把每个功能封装成函数，在ajax完成后的回调函数中直接调用
6、全选功能
代码如下：
// 全选功能
function selectAll(){
// 给上下两个全选都绑定事件
$("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
// 设置单选的状态
$("[name='one']").prop("checked",$(this).prop("checked"))
$("[name='onetop']").prop("checked",$(this).prop("checked"))
// 给两个复选框添加全选
$("[name='topAll']").prop("checked",$(this).prop("checked"))
$("[name='footAll']").prop("checked",$(this).prop("checked"))
priceAndNumberAll()
}
}
7、单选功能
代码如下：
// 单选功能
function selectone(){
$("[name='one']").click(function(){
// 判断是否所有的都选中
//$("[name='one']")是一个伪数组，不能调用数组方法 先把它转成数组
$("[name='onetop']").prop("checked",$(this).prop("checked"))
var arr = Array.prototype.slice.call($("[name='one']"))
// 调用every方法 如果有一个没选中就返回false
var res = arr.every(v=>$(v).prop("checked"));
if(res){
$("[name='topAll']").prop("checked","checked");
$("[name='onetop']").prop("checked","checked");
$("[name='footAll']").prop("checked","checked");
}else{
$("[name='topAll']").prop("checked",false);
$("[name='footAll']").prop("checked",false)
}
priceAndNumberAll()
})
}
8、计算数量的总计和价格的总价
代码如下：
// 计算总价和总数量
function priceAndNumberAll(){
// 根据选中的框来计算
// 选择被选中的那个数量number
var allNumInput = $("[name='one']:checked").parent().siblings(".data-name").find("[name='number']")
var allNum = 0;
allNumInput.each(function(k,v){
allNum += v.value-0;
})
$(".allnumber").text(allNum);
var allPriceEle = $("[name=one]:checked").parent().siblings(".subtotal")
var allPrice = 0;
allPriceEle.each(function(k,v){
allPrice += allPriceEle.text()-0;
})
$(".allprice").text(allPrice);
}
9、点击加减按钮让数量和金额进行加减
代码如下：
// 点击加减让数量进行加减
function addAndReduce(){
// 点击加的按钮
$(".add").click(function(){
// 先获取input框里面的数值
var num = $(this).prev().val()-0;
// 每点击一次就让input里面的值++
num ++
// 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了
if(num>=$(this).prev().attr("data-stock")-0){
num=$(this).prev().attr("data-stock")-0
$(this).prop("disabled",true);
$(this).addClass("bgadd");
$(this).prev().prev().prop("disabled",false);
}else{
$(this).prop("disabled",false);
$(this).prev().prev().removeClass("bgreduce");
}
$(this).prev().val(num)
// 计算小计里面的价格
// 找到放单价的那个标签和值
var price = $(this).parent().prev().find("span").text()-0;
// 重新计算小计
var subtotal = price*num;
// 计算好小计之后放到存放那个td中
$(this).parent().next().text(subtotal);
// 重新设置本地存储
// 获取本地存储的数据
var data = localStorage.getItem("cart");
// 转换成数组
data = JSON.parse(data);
// 遍历数组 查找数组中满足条件的数据
var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));
obj.number = num;
localStorage.setItem("cart",JSON.stringify(data))
priceAndNumberAll()
})
$(".reduce").click(function(){
// 先获取input框里面的数值
var num = $(this).next().val()-0;
// 每点击一次就让input里面的值++
num --
// 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了
if(num<1){
num=1;
$(this).prop("disabled",true);
$(this).addClass("bgreduce");
$(this).next().next().prop("disabled",false)
}else{
$(this).prop("disabled",false);
$(this).next().next().removeClass("bgadd");
}
$(this).next().val(num)
var price = $(this).parent().prev().find("span").text()-0;
// 重新计算小计
var subtotal = price*num;
// 计算好小计之后放到存放那个td中
$(this).parent().next().text(subtotal);
// 将数据重新存储到本地存储
var data = localStorage.getItem("cart");
data = JSON.parse(data);
// 查找满足添加的数据
var obj = data.find(v=>{
return v.username==username&&v.goodsid==$(this).parent().attr("data-id");
})
obj.number = num;
localStorage.setItem("cart",JSON.stringify(data));
priceAndNumberAll()
})
}
10、点击删除按钮功能
代码如下：
// 点击删除的函数
function removebtn(){
// 点击事件
$(".btn").click(function(){
// 提示是否要删除
if(!confirm("你确定要删除吗")){
return false;
}
// 将本地存储的这条数据删除
var data = localStorage.getItem("cart");
data = JSON.parse(data);
var index = data.findIndex(function(v){
v.username==username&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")
});
data.splice(index,1);
localStorage.setItem("cart",JSON.stringify(data))
var tr = $(this).parent().parent();
tr.remove()
if(!data.filter(v=>v.username==username).length){
// 如果数据没了就不显示表格
$(".page-middle").empty();
// 让页面显示自定义的内容
var str = "";
str += `<h2>购物车空空如也！！！</h2>
<p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
`
$(".page-middle").html(str);
$(".page-middle").css({width:"1200px",margin:"40px auto 0"});
$(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
package.json与package-lock.json的区别及详细解释
不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.json,package-lock.json,应该很多人平时都不会去关注这两个文件有啥关系吧,这篇文章主要给大家介绍了关于package.json与package-lock.json的区别及详细解释,需要的朋友可以参考下2022-08-08![JS写的数字拼图小游戏代码[学习参考]](//img.jbzj.com/images/xgimg/bcimg1.png)
昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。 可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。2008-10-10
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,下面这篇文章主要给大家介绍了关于使用Turn.js实现翻书效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
javascript轻松控制表格列样式的脚本代码通过遍历table表格元素并动态设置其class属性,实现表格样式动态控制的功能,需要的朋友可以参考一下2007-12-12
这篇文章主要为大家详细介绍了JavaScript之WebSocket技术,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
打开某个页面时，弹出提示框“Internet Explorer无法打开Internet 站，经过一番奋战，利用排除法解决了问题，共发现2种情况2014-04-04
本文主要介绍了javaScript操作字符串的一些常用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要为大家详细介绍了微信小程序如何获取手机验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
主页面A 怎么向 iframe B 传递数据呢？iframe B 怎么向 主页面A 传递数据，下面有不错的实现思路，感兴趣的朋友可以了解下2013-12-12
在这篇文章中，我将Svelte 还是 React作了对比，不能以个人意见代表谁好谁坏。以及我发现使用这两个框架的一些区别，感兴趣的小伙伴可以参考阅读2023-04-04
![JS写的数字拼图小游戏代码[学习参考]](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论