您的位置：首页 > 其它

商品规格选择页面

2015-08-20 15:58 453 查看

最近在做电商项目，一直觉得商品规格选择是最困难的部分，但是这次换了个思路：

如果该商品sku存在，则购买按钮可按，如果sku不存在，则购买按钮不可按，原来的好多代码简化成一个统一的方式

<html>
<head>
<script type="text/javascript">
//页面初始化时的skuId
var skuId = '${goodsVO.goods.stockConfs[0].id}';
$(function(){
//默认初次加载第一个stockconf
<c:forEach items="${goodsVO.goods.stockConfs[0].goodsSpecificationVals}" var="val">
var id = '${val.id}';
$("#"+id).attr("class","selected");
</c:forEach>
});

//更改状态
function changeVal(id, parentId) {
changeStatus(id, parentId);
if(!matchSku()){
//不匹配则无法购买
alert("无法加入购物车");
}
}

//更改选中状态
function changeStatus(id, parentId) {
$("#" + parentId + " li").each(function(){
$(this).attr("class","");
});
$("#" + id).attr("class","selected");
}

//选中的规格和所有的库存配置进行比较
function matchSku(){
var arr1 = new Array();
//获取所有选中的规格框
$("li[class='selected']").each(function(index, element){
arr1.push(element.id);
});
<c:forEach items="${goodsVO.goods.stockConfs}" var="sku">
var arr2 = new Array();
<c:forEach items="${sku.goodsSpecificationVals}" var="val">
arr2.push('${val.id}');
</c:forEach>
if (arr1.sort().toString() == arr2.sort().toString()) {
skuId = '${sku.id}';
changeInfo(skuId);
return true;
}
</c:forEach>
return false;
}

//更改库存配置信息
function changeInfo(id){

}

//减少数量
function delItem() {
var buyNum = $("#buyNum").val();
if (buyNum <= 1){
return ;
}
$("#buyNum").val(buyNum - 1);
}

//增加数量
function addItem() {
var buyNum = $("#buyNum").val();
$("#buyNum").val(buyNum*1 + 1);
}

//加入购物车
function addCart() {
var url = "${path}/or/shopCart/addItems";
var buyNum = $("#buyNum").val();
var params = {"stockConfId" : skuId, "num" : buyNum};
$.post(url, params, function(data) {
if (data) {
alert("加入购物车成功");
}
}, "json");
}

//查看购物车
function viewCart(){
window.location="${path}/or/shopCart/list/";
}

//直接购买
function account() {
var url = "${path}/or/shopCart/account/"+skuId+"/"+$("#buyNum").val();
window.location = url;
}

</script>
</head>
<body>
<div>商品库存配置页面</div>
商品信息${goodsVO.goods.name}
sku信息：
<c:forEach items="${goodsVO.goods.stockConfs}" var="model">
市场价：${model.marketPrice}
<br/>
零售价：${model.retailPrice}
<br/>
批发价：${model.salePrice}
<br/>
规格：
<c:forEach items="${model.goodsSpecificationVals}" var="gsv">
名称：${gsv.name}
值：${gsv.value}
<br/>
</c:forEach>
</c:forEach>
<br/>
<br/>
所有的规格信息：
<c:forEach items="${goodsVO.specificationMap}" var="model">
${model.key}
${model.value[0].name}
<c:forEach items="${model.value}" var="val">
${val.value}
</c:forEach>
<br>
</c:forEach>
<div class="goodsBox">
<c:forEach items="${goodsVO.specificationMap}" var="model">
<dl class="insurance goodsAttr">
<dt>
<label>${model.value[0].name}：</label>
<ul id="parent${model.value[0].goodsSpecification.id}">
<c:forEach items="${model.value}" var="val">
<a href="javascript:void(0);" onclick="changeVal('${val.id}','parent${model.value[0].goodsSpecification.id}')"><li id="${val.id}"> ${val.value}</li></a>
</c:forEach>
</ul>
</dt>
</dl>
</c:forEach>
</div>
购买数量<a href="javascript:void(0);" onclick="delItem()">-</a>
<!--控制输入框，只能输入正整数，否则，默认填充1  -->
<input type="text" id="buyNum" value="1"/>
<a href="javascript:void(0);" onclick="addItem()">+</a>
<br/>
<a href="javascript:void(0);" onclick="addCart()">加入购物车</a>
<a href="javascript:void(0);" onclick="account()">立即购买</a>
<a href="javascript:void(0);" onclick="viewCart()">查看购物车</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航