您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

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

51自学网 2022-05-02 21:30:39
  javascript

本文实例为大家分享了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"})        }    })}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


vue通过子组件修改父组件prop的多种实现方式
关于JS中的全等和不全等、等于和不等于问题
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1