原生js实现购物车逻辑和功能

这篇文章主要为大家详细介绍了原生js实现购物车逻辑和功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现购物车逻辑和功能的具体代码，供大家参考，具体内容如下

1、购物车的主体内容布局尽量用表格的布局模式

2、判断用户是否登录

代码如下，可以根据自己头部的布局来具体修改

 // 判断用户是否登录 var username = getCookie("username"); //如果登录成功就执行这段代码 if(username){ var vip = $(`欢迎${username}来到天猫超市`) var loginout = $(`退出`) $(".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(` 天猫首页喵，欢迎来到天猫请登录免费注册`) }) }else{ alert("请先登录"); location.assign("./login.html"); }

3、判断从详情页是否有数据传过来

在这里我数据是保存到本地存储里面的，你可以根据自己存储的地方来获取数据
代码如下：

 // 接收详情页传过来的数据 // 先判断本地存储中有没有商品 var data = localStorage.getItem("cart"); if(!data){ $(".page-con").empty(); var str = ""; str +=`购物车空空如也！！！
请快点移步到列表页选择商品把
进入列表页 ` $(".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{ return v.username == username; }) if(!res){ $(".page-con").empty(); var str = ""; str +=`
购物车空空如也！！！
请快点移步到列表页选择商品把
进入列表页 ` $(".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;iv.goodsid==res[i].id).number; str +=`  店铺：${res[i].name}
 8.6 0点开享,每满300减30
  
  
  ${res[i].introduce}
 尺码：M
主要颜色：6685白色+6691雾霾蓝（M码预售8月8号发出
修改
 ${res[i].price}
 
 ${res[i].price*number} 
 移入文件夹
删除
宝贝
 ` } $(".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 += `购物车空空如也！！！
请快点移步到列表页选择商品把
进入列表页 ` $(".page-middle").html(str); $(".page-middle").css({width:"1200px",margin:"40px auto 0"}); $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"}) } }) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。

以上就是原生js实现购物车逻辑和功能的详细内容，更多请关注0133技术站其它相关文章！