原生js實現購物車邏輯和功能
阿新 • • 發佈:2021-09-23
本文例項為大家分享了實現購物車邏輯和功能的具體程式碼,供大家參考,具體內容如下
1、購物車的主體內容佈局儘量用表格的佈局模式
2、判斷使用者是否登入
程式碼如下,可以根據自己頭部的佈局來具體修改
// 判斷使用者是否登入 var username = getCookie("username"); //如果登入成功就執行這段程式碼 if(username){ var vip = $(`<a href=':;'>歡迎${username}來到天貓超市</a>`) var loginout = $(`<a href='script:;' class="loginout">退出</a>`) $(".hLeft").empty() $(".hLeft").append(vip) $(".hLeft").append(loginout) $(".hLeft>a").({ "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"}) $http://www.cppcns.com(".page-con p").css({fontSize:"20px",lhttp://www.cppcns.comineHeight:"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",lineHeight:"80px"}) $(".page-con p").css({fontSize:"20px",lineHeight:"26px"}); $(".page-con a").css({width:"100px",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.",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="原生js實現購物車邏輯和功能"> <a href="javascript:;" ><img src="images/cat04.png" alt="原生js實現購物車邏輯和功能"></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='http://www.cppcns.comone']").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"}) } }) }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。