原生js實(shí)現(xiàn)購物車邏輯和功能

更新時(shí)間：2021年09月22日 10:48:55 作者：不忘初心ing

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購物車邏輯和功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)購物車邏輯和功能的具體代碼，供大家參考，具體內(nèi)容如下

1、購物車的主體內(nèi)容布局盡量用表格的布局模式

2、判斷用戶是否登錄

代碼如下，可以根據(jù)自己頭部的布局來具體修改

// 判斷用戶是否登錄
var username = getCookie("username");
//如果登錄成功就執(zhí)行這段代碼
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" >免費(fèi)注冊</a>`)
    })
}else{
    alert("請先登錄");
    location.assign("./login.html");
}

3、判斷從詳情頁是否有數(shù)據(jù)傳過來

在這里我數(shù)據(jù)是保存到本地存儲(chǔ)里面的，你可以根據(jù)自己存儲(chǔ)的地方來獲取數(shù)據(jù)
代碼如下：

// 接收詳情頁傳過來的數(shù)據(jù)
// 先判斷本地存儲(chǔ)中有沒有商品
var data = localStorage.getItem("cart");
if(!data){
    $(".page-con").empty();
    var str = "";
    str +=`<h2>購物車空空如也?。。?lt;/h2>
    <p>請快點(diǎn)移步到列表頁選擇商品把<p><a href="./list.html" >進(jìn)入列表頁</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{
    // 再判斷是否有當(dāng)前用戶的購物車是數(shù)據(jù)
    // 將數(shù)據(jù)轉(zhuǎn)成數(shù)組類型
    data = JSON.parse(data);
    // 查看數(shù)據(jù)是否存在
    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>購物車空空如也?。。?lt;/h2>
        <p>請快點(diǎn)移步到列表頁選擇商品把<p><a href="./list.html" >進(jìn)入列表頁</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{
        // 有數(shù)據(jù) 且有自己的數(shù)據(jù)
        // 先把自己的數(shù)據(jù)找出來
        var arr = data.filter(v=>v.username == username);
        // 遍歷獲取的數(shù)據(jù) 
        // 在數(shù)組中沒有想要的商品數(shù)據(jù)，需要從數(shù)據(jù)庫中獲取一下 通過id在數(shù)據(jù)庫中查找數(shù)據(jù)
        var ids = arr.map(v=>v.goodsid);
        
        ids = ids.join(",")

4，查詢有詳情頁傳送過來的數(shù)據(jù)時(shí) ，我們可以通過傳過來的id到數(shù)據(jù)庫中查找我們想要的數(shù)據(jù)

發(fā)送ajax到數(shù)據(jù)庫中查找商品的信息

$.ajax({
            url:"./server/cart.php",
            dataType:"json",
            data:{ids:ids},
            type:"get",
            success:res=>{
                var str = '';
                for(var i=0;i<res.length;i++){
                    // 根據(jù)res[i] 每一條商品，從arr中找出number數(shù)量
                    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點(diǎn)開享,每滿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霧霾藍(lán)（M碼預(yù)售8月8號(hào)發(fā)出</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)
                 //在這里添加全選功能
                // 在這里寫的話 代碼嵌套太深 - 將功能寫在外面，然后在這邊調(diào)用函數(shù)
                //調(diào)用全選的功能
                selectAll()
                //調(diào)用單選功能
                selectone()
                // 計(jì)算總價(jià)和總數(shù)量
                priceAndNumberAll()
                // 數(shù)量加減
                addAndReduce()
                // 點(diǎn)擊刪除鍵
                removebtn()
            }
        })
    }

在這里商品列的布局和內(nèi)容渲染我們需要?jiǎng)討B(tài)加載，然后添加到放主體內(nèi)容的大盒子里

5、實(shí)現(xiàn)購物車頁面的功能

因功能代碼比較多，都放在ajax中會(huì)顯得冗余，我們把每個(gè)功能封裝成函數(shù)，在ajax完成后的回調(diào)函數(shù)中直接調(diào)用

6、全選功能

代碼如下：

// 全選功能
function selectAll(){
    // 給上下兩個(gè)全選都綁定事件
    $("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
        // 設(shè)置單選的狀態(tài)
        $("[name='one']").prop("checked",$(this).prop("checked"))
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        // 給兩個(gè)復(fù)選框添加全選
        $("[name='topAll']").prop("checked",$(this).prop("checked"))
        $("[name='footAll']").prop("checked",$(this).prop("checked"))
        priceAndNumberAll()
    }
}

7、單選功能

代碼如下：

// 單選功能
function selectone(){
    $("[name='one']").click(function(){
        // 判斷是否所有的都選中
        //$("[name='one']")是一個(gè)偽數(shù)組，不能調(diào)用數(shù)組方法 先把它轉(zhuǎn)成數(shù)組
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        var arr = Array.prototype.slice.call($("[name='one']"))
        // 調(diào)用every方法 如果有一個(gè)沒選中就返回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、計(jì)算數(shù)量的總計(jì)和價(jià)格的總價(jià)

代碼如下：

// 計(jì)算總價(jià)和總數(shù)量
function priceAndNumberAll(){
    // 根據(jù)選中的框來計(jì)算
    // 選擇被選中的那個(gè)數(shù)量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、點(diǎn)擊加減按鈕讓數(shù)量和金額進(jìn)行加減

代碼如下：

// 點(diǎn)擊加減讓數(shù)量進(jìn)行加減
function addAndReduce(){
    // 點(diǎn)擊加的按鈕 
    $(".add").click(function(){
        // 先獲取input框里面的數(shù)值
        var num = $(this).prev().val()-0;
        // 每點(diǎn)擊一次就讓input里面的值++
        num ++
        // 數(shù)據(jù)是不能無線加的 要進(jìn)行判斷 如果加到最大值 就不讓他加了
        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)
        // 計(jì)算小計(jì)里面的價(jià)格
        // 找到放單價(jià)的那個(gè)標(biāo)簽和值
        var price = $(this).parent().prev().find("span").text()-0;
        // 重新計(jì)算小計(jì)
        var subtotal = price*num;
        // 計(jì)算好小計(jì)之后放到存放那個(gè)td中
        $(this).parent().next().text(subtotal);
        // 重新設(shè)置本地存儲(chǔ)
        // 獲取本地存儲(chǔ)的數(shù)據(jù)
        var data = localStorage.getItem("cart");
        // 轉(zhuǎn)換成數(shù)組
        data = JSON.parse(data);
        // 遍歷數(shù)組 查找數(shù)組中滿足條件的數(shù)據(jù)
        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框里面的數(shù)值
        var num = $(this).next().val()-0;
        // 每點(diǎn)擊一次就讓input里面的值++
        num --
        // 數(shù)據(jù)是不能無線加的 要進(jìn)行判斷 如果加到最大值 就不讓他加了
        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;
        // 重新計(jì)算小計(jì)
        var subtotal = price*num;
        // 計(jì)算好小計(jì)之后放到存放那個(gè)td中
        $(this).parent().next().text(subtotal);
        // 將數(shù)據(jù)重新存儲(chǔ)到本地存儲(chǔ)
        var data =  localStorage.getItem("cart");
        data = JSON.parse(data);
        // 查找滿足添加的數(shù)據(jù)
        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、點(diǎn)擊刪除按鈕功能

代碼如下：

// 點(diǎn)擊刪除的函數(shù)
function removebtn(){
    // 點(diǎn)擊事件
    $(".btn").click(function(){
        // 提示是否要?jiǎng)h除
        if(!confirm("你確定要?jiǎng)h除嗎")){
            return false;
        }
        // 將本地存儲(chǔ)的這條數(shù)據(jù)刪除
        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){
            // 如果數(shù)據(jù)沒了就不顯示表格
            $(".page-middle").empty();
            // 讓頁面顯示自定義的內(nèi)容
            var str = "";
            str += `<h2>購物車空空如也！??！</h2>
        <p>請快點(diǎn)移步到列表頁選擇商品把<p><a href="./list.html" >進(jìn)入列表頁</a>
        `
        $(".page-middle").html(str);
        $(".page-middle").css({width:"1200px",margin:"40px auto 0"});
        $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
        }

    })
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: