原生js實現京東淘寶購物車的做法

有好久沒有寫博客了，後面還是發現多寫總結，纔會有成長的快一些

好了，直接進入主題，話不多說，來看看購物車常用的功能，如圖下。

圖中的購物車，也是我們PC端常用到的一種，它主要包含了，“商品列表”

商品列中有包括了以下功能：

無疑就是這些很熟悉的業務了。下面來看看這些功能是怎麼實現的。

選中多個商品、

計算商品總價、計算商品數量

商品數量加減操作、

刪除商品

提交訂單

首先肯定是先把商品加入購物車，調用你自己寫的加入購物車的方法以後，購物車有數據了，我們在接着查詢出來。

如下：是我的加入購物車的方法與查詢購物車，其中的changeNum()是我的失去焦點加入購物車的方法。每個人方法

各有不同，但是都大同小異，我只想思路順便講一下實現代碼過程。


<!--右邊導航欄 購物車 -->

<div class="ordershopCat" id="ordershopCat" style="border: 0px solid black;">
	<div style="width: 100%;height: 40px;background-color: #f2bb7e;font-size: 16px;">
		<!-- <div style="float: left;color:#FFF"><input type="checkbox" name="allcheckbox" οnclick="allcheckBox()">全選</div> -->
		<div style="text-align:center;"><span style="color: #FFF;text-align:center;">購物車</span></div>
	</div>
	
		<div style="overflow-x:hidden;height: 70%;" id="shopcart_a">
			<table id="listCatShop" border="0" style="background-color: #fdfcf1;width: 100%;">
			
			</table>
		</div>
	
	<div class="tbar-checkout" style="height: 40px;padding: 5px 110px 5px 5px;position: relative;">
		<div class="jtc-number" style="color: #FFF;font: 12px/180% Arial, Verdana, 宋體;">
			共選中<strong class="J-count" style="font-family: verdana;color: #ddc392;" id="strongNum">0</strong>件商品
			<!-- <strong class="J-count" style="font-family: verdana;color: #fff;" id="strongNum" οnclick="deleteAllOrder()"> 刪除選中的商品</strong> -->
		</div>
		<div class="jtc-sum" style="color: #FFF;font: 12px/180% Arial, Verdana, 宋體;">
			共計：<strong class="J-total" style="font-family: verdana;color: #ddc392;" id="strongPrice">¥0.0</strong><br>
			<strong class="J-total" style="color: #ddc392;display: none;font-size: 8px" id="strongPrice">¥0.0</strong>
		</div>
		
	</div>
		<a class="jtc-btn J-btn" style="width:100%;display: block;text-align: center;color: rgb(255, 255, 255);
		font: 16px/35px 微軟雅黑;background: #f2bb7d;" id="jiesuan2" target="_blank" οnclick="orderSubmit()">提交訂單</a>
		<a class="jtc-btn J-btn" style="width:100%;display: block;text-align: center;color: rgb(255, 255, 255);
		font: 16px/35px 微軟雅黑;background: #ffd6aa;" id="jiesuan2" target="_blank" οnclick="Return()">返回</a>
</div>
<form id="rigthCatOrder" action="${APP_PATH}/jewelry/orderSubmitList.do" method="post">
	<input type="hidden" name="checkPids" value="">
	<input type="hidden" name="type" value="regularMembers">
</form>
<div id="rightnav">
	<div class="online_kf">在線客服</div>
	<c:if test="${currentUser.sys_role == 2}">
		<div class="shop_car" οnclick="shopCat()">購物車</div>
	</c:if>
	
	<c:if test="${currentUser.sys_role ne 2}">
		<div class="shop_car" οnclick="shopCat2()">購物車</div>
	</c:if>
	
	<div class="my_order" οnclick="my_order()">我的訂單</div>
	<div class="return_top">返回頂部</div>
</div>

function changeNum(pid){
	var numCat = $("#numCat"+pid).val();
	if(numCat=="" || numCat==null || numCat==undefined){
		alert("**數量不能爲空！");
		return;
	}
	mustOrderBy(pid,numCat);//加購物車
}

function mustOrderBy(pid,num) {
	var uid = 1;
	$.ajax({
		type : "POST",
		url : "${APP_PATH}/jewelry/productCartNew.do?type=orderChange&uid="
				+ uid + "&pid=" + pid + "&num="+num,
		dataType : "json",
		async : true,
		success : function(data) {
			if(data.success){
				//alert(data.msg);
				$("#listCatShop").html("");//清空數據重新加載
				shopCat();//查詢購物車
			}
		}
	});
}


<script type="text/javascript">
	function homeclick(){
			location.href="${APP_PATH}/jewelry/index.do";
	} 
	function loginCheck() {
		 location.href="${APP_PATH}/jewelry/login.do";
	}
	function zhuceOCheck(){
		location.href="${APP_PATH}/jewelry/register.do";
	}
	function shopCat2(){
		location.href = "${APP_PATH}/jewelry/proshopCat.do";
	}
	function my_order(){
		location.href ="${APP_PATH}/jewelryUser/myOrder.do";
	}
    function shopCat(){
    	$(".ordershopCat").show(1000);
    	$.ajax({
    		type:"post",
    		url:"${APP_PATH}/jewelry/rigthshopCat.do",
    		dataType:"json",
    		data:{},
    		success:function(data){
    			var html="";
    			$.each(data.proMust, function(index, itme) {
    				/* var product_name=itme.product_name;
    				product_name=product_name.slice(0,6); */
    				html+="<tr style='border-bottom: 1px solid #efe6dc;display:block;margin-bottom: 2px;'>";
    				html+= "<td class='td_one'><input type='checkbox' price='"+itme.unit_price+"' id='box"+itme.pid+"' name='boxPid' value='"+itme.pid+"' οnclick='cartCheckBox(this, "+itme.pid+")'/></td>";
    				html+= "<td class='td_two'><div id='imgDiv'><img class='product_img' width='60px' height='60px' alt='加載中...' src='"+itme.thumbnail+"'></div></td>";
    				html+= "<td class='td_three'><div class='pro_name'>"+itme.product_name+"</div><div class='pro_price'><span class='money_span'>￥"+itme.unit_price+"</span><img class='imgdelete' src='${RES_PATH}/jewelry/images/product/bin.png' οnclick='cartDelete("+itme.cartid+")'></div></td>";
    				html+= "<td class='td_four'><div style='border: 1px solid #fff;width:100%;heigth:100%;'><a class='decr' id='increase"+itme.pid+"' οnclick='reduceSum("+itme.pid+")'>-</a>";
    				html+= "<input class='text_input' name='num"+itme.pid+"' type='text' id='num"+itme.pid+"' value='"+itme.quantity+"'>";
    				html+= "<a class='incr' id='reduceSum"+itme.pid+"' οnclick='plusSum("+itme.pid+")'>+</a></div></td></tr>";
    			});
    			$("#listCatShop").append(html);
    		}
    	});
	}
    function Return(){
    	$(".ordershopCat").hide(1000);
    }
    function cartCheckBox(obj,pid){
    	//計算數量與價格
    	var countPrice = 0.0;
    	var countNum=0;
    	var num =$("#num"+pid).val();
		$(obj).attr("num", num);
	 	$("[name=boxPid]:checked").each(function(i, e){
			var price = $(e).attr("price");
			var quantity = $(e).attr("num");
			countPrice = countPrice + (price * quantity);
	 		countNum= countNum + 1;
		});
		$("#strongNum").html(countNum);
    	$("#strongPrice").html(countPrice);
    }
	
  //加數量
	function plusSum(pid) {
		var num = $("#num" + pid).val();
		if (num != null && num != "") {
			num = parseInt(num);
			$("#num" + pid).val(num + 1);
		} else {
			num = 1;
			$("#num" + pid).val(num + 1);
		}
		
		$.ajax({
			type:"post",
			url:"${APP_PATH}/jewelry/plusSum.do",
			data:{"sum":num+1,"pid":pid},
			dataType:"json",
			success:function(data){
				if(data){
					return;
				}
			}
		});
	}

	//減數量
	function reduceSum(pid) {
		var num = $("#num" + pid).val();
		if (num != "" && num != null) {
			num = parseInt(num);
			if(num>1){
				$("#num" + pid).val(num - 1);
			}else{
				num=1;
				$("#num" + pid).val(num);
			}
		} else {
			num = 1;
			$("#num" + pid).val(mun - 1);
		}
		if(num!=0){
			$.ajax({
				type:"post",
				url:"${APP_PATH}/jewelry/plusSum.do",
				data:{"sum":num-1,"pid":pid},
				dataType:"json",
				success:function(data){
					if(data){
						return;
					}
				}
			});
		}
	}
    
	function orderSubmit() {
		var checkPids = "";
		$("[name=boxPid]:checked").each(function(i, e){
			var pid = $(e).val();
			var quantity = $(e).attr("num");
			checkPids+= pid + ":" + quantity + ",";
		});
		if(checkPids == ""){
			alert("您還未選擇商品！");
			return;
		}
		$("[name=checkPids]").val(checkPids);
		$("#rigthCatOrder").submit();	
	}
    
	var all_oid="";
	var deleteType=0;
	//全選
	function allcheckBox(){
		deleteType=1;
		//判斷選擇沒有
		var allchecke = $('input[name="allcheckbox"]:checked');
		if(allchecke.length==0){
			var checkList =document.getElementsByName("boxPid");
			for(var i = 0; i<checkList.length; i++) {
				checkList[i].checked = false;
			}
			all_oid="";
		}else{
			//全選
			var checkList =document.getElementsByName("boxPid");
			for(var i = 0; i<checkList.length; i++) {
				checkList[i].checked = true;
				all_oid+=$(checkList[i]).val()+",";
			}
		}
	}
	function cartDelete(cartid){
		//判斷是全選刪除還是選中刪除
		if(deleteType!=1){
			//得到選中的值
			var proNmCheck = $('input[name="boxPid"]:checked');
			for (var j= 0; j < proNmCheck.length;j++) {
				all_oid += $(proNmCheck[j]).val()+",";
			}
		}
		$.ajax({
			type:"post",
			url:"${APP_PATH}/jewelry/delteAllOrder.do?all_order="+cartid,
			dataType:"json",
			success:function(data){
				if(data.success){
					$("#listCatShop").html("");//清空數據重新加載
					shopCat();//查詢購物車
				}
			}
		});
	}	
    
</script>

這裏重點說一下一個難點就是動態計算商品數量與價格，其它的都是很簡單的東西

function cartCheckBox(obj,pid){
   //計算數量與價格
   var countPrice = 0.0;
   var countNum=0;
   var num =$("#num"+pid).val();
       $(obj).attr("num", num);
      $("[name=boxPid]:checked").each(function(i, e){
           var price = $(e).attr("price");
           var quantity = $(e).attr("num");
           countPrice = countPrice + (price * quantity);
          countNum= countNum + 1;
       });
       $("#strongNum").html(countNum);
   $("#strongPrice").html(countPrice);
}

因爲我前端的商品列也是for循環出來的，所以很多操作都必須要進行循環遍歷，

這裏我將多選框遍歷了一遍， $("[name=boxPid]:checked").each(function(i, e){}判斷拿到我選中的商品，

在這之前，我做了一個操作，就是把商品價格和數量也寫在了input checked標籤上，去上圖的html可以找到

如下：
html+= "<td class='td_one'><input type='checkbox' price='"+itme.unit_price+"' id='box"+itme.pid+"' name='boxPid' value='"+itme.pid+"' οnclick='cartCheckBox(this, "+itme.pid+")'/></td>";
price被賦值了商品價格，這樣子就可以直接在遍歷多選框的時候直接拿到商品價格，特別方便。

num數量在我點擊之前就先查詢出num的值，直接使用 $(obj).attr("num", num); 賦值給input標籤

兩者都得到以後，就直接可以計算了。是不是很簡單。今天就到這裏吧，下期說一下訂單提交。

原生js實現京東淘寶購物車的做法

容器中nginx無法使用同一個網絡下的容器域名

Python: SunMoonTimeCalculator

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

nodejs學習07——API

避免DbContext同時在多個線程調用

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

spring boot(二):整合靜態資源訪問

spring boot(四):實現devtools熱部署

Java中如何使用Json進行格式轉換常用方法

如何在JAVA中創建線程池

springboot(五):springboot如何整合jpa

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結