原生js實(shí)現(xiàn)購(gòu)物車邏輯和功能
更新時(shí)間：2021年09月22日 10:48:55 作者：不忘初心ing
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購(gòu)物車邏輯和功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)購(gòu)物車邏輯和功能的具體代碼，供大家參考，具體內(nèi)容如下
1、購(gòu)物車的主體內(nèi)容布局盡量用表格的布局模式
2、判斷用戶是否登錄
代碼如下，可以根據(jù)自己頭部的布局來(lái)具體修改
// 判斷用戶是否登錄
var username = getCookie("username");
//如果登錄成功就執(zhí)行這段代碼
if(username){
var vip = $(`<a href='javascript:;'>歡迎<b>${username}</b>來(lái)到天貓超市</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" >天貓首頁(yè)</a>
<a href="javascript:;" >喵，歡迎來(lái)到天貓</a>
<a href="login.html" >請(qǐng)登錄</a>
<a href="register-test.html" >免費(fèi)注冊(cè)</a>`)
})
}else{
alert("請(qǐng)先登錄");
location.assign("./login.html");
}
3、判斷從詳情頁(yè)是否有數(shù)據(jù)傳過(guò)來(lái)
在這里我數(shù)據(jù)是保存到本地存儲(chǔ)里面的，你可以根據(jù)自己存儲(chǔ)的地方來(lái)獲取數(shù)據(jù)
代碼如下：
// 接收詳情頁(yè)傳過(guò)來(lái)的數(shù)據(jù)
// 先判斷本地存儲(chǔ)中有沒(méi)有商品
var data = localStorage.getItem("cart");
if(!data){
$(".page-con").empty();
var str = "";
str +=`<h2>購(gòu)物車空空如也?。?！</h2>
<p>請(qǐng)快點(diǎn)移步到列表頁(yè)選擇商品把<p><a href="./list.html" >進(jìn)入列表頁(yè)</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)前用戶的購(gòu)物車是數(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>購(gòu)物車空空如也?。?！</h2>
<p>請(qǐng)快點(diǎn)移步到列表頁(yè)選擇商品把<p><a href="./list.html" >進(jìn)入列表頁(yè)</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ù)找出來(lái)
var arr = data.filter(v=>v.username == username);
// 遍歷獲取的數(shù)據(jù)
// 在數(shù)組中沒(méi)有想要的商品數(shù)據(jù)，需要從數(shù)據(jù)庫(kù)中獲取一下 通過(guò)id在數(shù)據(jù)庫(kù)中查找數(shù)據(jù)
var ids = arr.map(v=>v.goodsid);
ids = ids.join(",")
4，查詢有詳情頁(yè)傳送過(guò)來(lái)的數(shù)據(jù)時(shí) ，我們可以通過(guò)傳過(guò)來(lái)的id到數(shù)據(jù)庫(kù)中查找我們想要的數(shù)據(jù)
發(fā)送ajax到數(shù)據(jù)庫(kù)中查找商品的信息
$.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)開(kāi)享,每滿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)
//在這里添加全選功能
// 在這里寫(xiě)的話 代碼嵌套太深 - 將功能寫(xiě)在外面，然后在這邊調(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)購(gòu)物車頁(yè)面的功能
因功能代碼比較多，都放在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è)沒(méi)選中就返回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ù)選中的框來(lái)計(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ù)是不能無(wú)線加的 要進(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ù)是不能無(wú)線加的 要進(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ù)沒(méi)了就不顯示表格
$(".page-middle").empty();
// 讓頁(yè)面顯示自定義的內(nèi)容
var str = "";
str += `<h2>購(gòu)物車空空如也?。?！</h2>
<p>請(qǐng)快點(diǎn)移步到列表頁(yè)選擇商品把<p><a href="./list.html" >進(jìn)入列表頁(yè)</a>
`
$(".page-middle").html(str);
$(".page-middle").css({width:"1200px",margin:"40px auto 0"});
$(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
}
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車實(shí)例代碼
- js購(gòu)物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車功能
- Javascript實(shí)現(xiàn)購(gòu)物車功能的詳細(xì)代碼
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車有圖有代碼
- Jsp+Servlet實(shí)現(xiàn)購(gòu)物車功能
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門(mén)篇)
- 原生js模擬淘寶購(gòu)物車項(xiàng)目實(shí)戰(zhàn)
- js實(shí)現(xiàn)仿購(gòu)物車加減效果
相關(guān)文章
這篇文章主要為大家介紹了postMessage及webSocket跨域方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
javaScript window.event.keyCode 集合與測(cè)試方法
javaScript window.event.keyCode 集合，對(duì)于事件的代碼獲取可以用腳本監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)。2010-05-05
關(guān)于定制FileField中的上傳文件名稱問(wèn)題
本文通過(guò)實(shí)例代碼給大家介紹了定制FileField中的上傳文件名稱問(wèn)題，感興趣的朋友參考下吧2017-08-08
5個(gè)數(shù)組Array方法: indexOf、filter、forEach、map、reduce使用實(shí)例
這篇文章主要介紹了5個(gè)數(shù)組Array方法: indexOf、filter、forEach、map、reduce使用實(shí)例,需要的朋友可以參考下2015-01-01
js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析
這篇文章主要是對(duì)js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
webpack5的loader配置小白學(xué)習(xí)篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門(mén)的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
跳轉(zhuǎn)頁(yè)面的方法有很多，在本文整理了一些比較常用，并有示例代碼，感興趣的朋友可以參考下2013-10-10
html+javascript實(shí)現(xiàn)可拖動(dòng)可提交的彈出層對(duì)話框效果
本文為大家介紹下使用html+javascript實(shí)現(xiàn)可拖動(dòng)彈出層、對(duì)話框、可提交，具體代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
js使用Canvas將多張圖片合并成一張的實(shí)現(xiàn)代碼
這篇文章主要介紹了js使用Canvas將多張圖片合并成一張的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)生成二維碼名片的功能，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以動(dòng)手嘗試一下2022-06-06