有好久没有写博客了,后面还是发现多写总结,才会有成长的快一些
好了,直接进入主题,话不多说,来看看购物车常用的功能,如图下。
图中的购物车,也是我们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标签
两者都得到以后,就直接可以计算了。是不是很简单。今天就到这里吧,下期说一下订单提交。