商品规格选择页面
最近在做电商项目，一直觉得商品规格选择是最困难的部分，但是这次换了个思路：
如果该商品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>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 电商商品规格选择逻辑
- 下一篇： 电商开发之商品属性分类
