商品规格选择页面

最新推荐文章于 2024-05-24 18:24:15 发布

温暖_洗衣粉

最新推荐文章于 2024-05-24 18:24:15 发布

阅读量4k

点赞数 3

分类专栏：工作项目

本文链接：https://blog.csdn.net/qq_19244423/article/details/47809023

版权

工作项目专栏收录该内容

57 篇文章 0 订阅

订阅专栏

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

如果该商品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);" οnclick="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);" οnclick="delItem()">-</a>
				<!--控制输入框，只能输入正整数，否则，默认填充1  -->
				<input type="text" id="buyNum" value="1"/>
			 <a href="javascript:void(0);" οnclick="addItem()">+</a>
		<br/>	 
		<a href="javascript:void(0);" οnclick="addCart()">加入购物车</a>		
		<a href="javascript:void(0);" οnclick="account()">立即购买</a>		
		<a href="javascript:void(0);" οnclick="viewCart()">查看购物车</a>		
	</body>
</html>

温暖_洗衣粉

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
商品规格选择页面

最近在做电商项目，一直觉得商品规格选择是最困难的部分，但是这次换了个思路：如果该商品sku存在，则购买按钮可按，如果sku不存在，则购买按钮不可按，原来的好多代码简化成一个统一的方式 //页面初始化时的skuId var skuId = '${goodsVO.goods.stockConfs[0].id}'; $(function(){ //默认初次加载第一个
复制链接

扫一扫