딜상품상세 레이어 연동

src/main/webapp/WEB-INF/views/web/goods/GoodsDealDetailFormWeb.html

@@ -286,6 +286,7 @@
 	
 	// 옵션1 조회
 	var fnOption1 = function(flag, goodsCd, currPrice, selfGoodsYn){
+		debugger;
 		let data = {goodsCd : goodsCd
 					};
 		let jsonData = JSON.stringify(data);
@@ -309,13 +310,17 @@
 					let tag1 = "";
 					let tag2 = "";
 					if (idx == 0){
-						$objUp = $('.pd_detail .opt_select .select_custom.deal_opt1');
-						//$objUp = $('.form_field .select_custom.deal_opt1');
-						$objUp.html('');
-						$objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
-						$objDown.html('');
+						if (flag == "layer"){
+							$objUp = $('.pd_descrp_pop .opt_select .select_custom.deal_opt1');
+							$objUp.html('');
+						}else{
+							$objUp = $('.pd_detail .opt_select .select_custom.deal_opt1');
+							$objUp.html('');
+							$objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
+							$objDown.html('');
+							
+						}
 						$('.form_field .select_custom.deal_opt1').attr('disabled', false);
-						
 						//------
 						tag1 += '<div class="combo">\n';
 						tag1 += '<div class="select">선택</div>\n';
@@ -325,8 +330,12 @@
 					}
 					let soldoutYn = ""; 
 					if (item.stockQty <= 0) soldoutYn = "true";
-					tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Up\')">\n';
-					tagDown = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Down\')">\n';
+					if (flag == "layer"){
+						tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'layer\')">\n';
+					}else{
+						tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Up\')">\n';
+						tagDown = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Down\')">\n';	
+					}
 					tag2 += '<div>'+ item.optCd1+'</div>\n';
 					if (item.addPrice > 0){
 						tag2 += '<div>'+ item.addPrice.addComma() +'원</div>\n';	
@@ -347,27 +356,33 @@
 					//------	
 				}
 				
+				if (flag == "layer"){
+					$objUp.append(tagUpS);
+					var pop_desc_option02 = new sCombo('.pd_descrp_pop .opt_select .select_custom.deal_opt1');
+				}else{
+					$objUp.append(tagUpS);
+					$objDown.append(tagDownS);
+					var detail_deal_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
+					var desc_option02 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
+				}
 				
-				$objUp.append(tagUpS);
-				$objDown.append(tagDownS);
-				var detail_deal_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
-				var desc_option02 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
-				//var pop_desc_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
 			}
 			
-			// 상품 선태값 적용
-			let $obj = null;
-			let $taget = null;
-			// 하단 우측 상품선택영역  Up/ Down
-			if (flag  == "Up"){
-				$obj = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select'); 
-				$taget = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
-			}else{
-				$taget = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select');
-				$obj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
+			if (flag != "layer"){
+				// 상품 선태값 적용
+				let $obj = null;
+				let $taget = null;
+				// 하단 우측 상품선택영역  Up/ Down
+				if (flag  == "Up"){
+					$obj = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select'); 
+					$taget = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
+				}else{
+					$taget = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select');
+					$obj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
+				}
+				let goodsDealInfo = $obj.html();
+				$taget.html(goodsDealInfo);
 			}
-			let goodsDealInfo = $obj.html();
-			$taget.html(goodsDealInfo);
 			
 		});
 		
@@ -375,6 +390,7 @@
 	
 	// 옵션2 조회
 	var fnOption2 = function(obj, flag){
+		debugger;
 		let $obj = $(obj);
 		let $target = $obj.find('input[name="opt1"]');
 		let goodsCd = $target.val();
@@ -389,9 +405,9 @@
 					};
 		let jsonData = JSON.stringify(data);
 		
-		gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
+		gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {debugger;
 			
-			if (result.dataList != null && result.dataList.length > 0) {
+			if (result.dataList != null && result.dataList.length > 0) {debugger;
 				let tagUpS = "";
 				let tagDownS = "";
 				let tagUp = "";
@@ -402,12 +418,17 @@
 					let tag1 = "";
 					let tag2 = "";
 					if (idx == 0){
-						//$objUp = $('#goodsDealOptUp2');
-						$objUp = $('.pd_detail .form_field .select_custom.deal_opt2');
-						$objUp.html('');
-						$objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
-						$objDown.html('');
-						$('.form_field .select_custom.deal_opt2').attr('disabled', false);
+						if (flag == "layer"){
+							$objUp = $('.pd_descrp_pop .opt_select .select_custom.deal_opt2');
+							$objUp.html('');
+						}else{
+							$objUp = $('.pd_detail .opt_select .select_custom.deal_opt2');
+							$objUp.html('');
+							$objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
+							$objDown.html('');
+							
+						}
+						$('.form_field .select_custom.deal_opt2').attr('disabled', false);	
 						//------
 						tag1 += '<div class="combo">\n';
 						tag1 += '<div class="select">선택</div>\n';
@@ -417,8 +438,12 @@
 					}
 					let soldoutYn = ""; 
 					if ("Y" == item.soldoutYn || item.stockQty <= 0)soldoutYn = "true";
-					tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Up\' )">\n';
-					tagDown = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Down\' )">\n';
+					if (flag == "layer"){
+						tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'layer\' )">\n';
+					}else{
+						tagUp = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Up\' )">\n';
+						tagDown = '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Down\' )">\n';	
+					}
 					tag2 += '<div>'+ item.optCd2+'</div>\n';
 					if (item.addPrice > 0){
 						tag2 += '<div>'+ item.addPrice.addComma() +'원</div>\n';	
@@ -439,29 +464,35 @@
 					//------	
 				}
 				
-				
-				$objUp.append(tagUpS);
-				$objDown.append(tagDownS);
-				var detail_deal_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
-				var desc_option03 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
-				//var pop_desc_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
-				
+				if (flag == "layer"){
+					$objUp.append(tagUpS);
+					var pop_desc_option02 = new sCombo('.pd_descrp_pop .opt_select .select_custom.deal_opt2');
+				}else{
+					$objUp.append(tagUpS);
+					$objDown.append(tagDownS);
+					var detail_deal_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
+					var desc_option03 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
+
+				}
 			}
 			
-			// 옵션 1 선태값 적용
-			let $obj2 = null;
-			let $taget2 = null;
-			// 하단 우측 상품선택영역  Up/ Down
-			if (flag  == "Up"){
-				$obj2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select'); 
-				$taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
-			}else{
-				$obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
-				$taget2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select');
+			if (flag != "layer"){
+				// 옵션 1 선태값 적용
+				let $obj2 = null;
+				let $taget2 = null;
+				// 하단 우측 상품선택영역  Up/ Down
+				if (flag  == "Up"){
+					$obj2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select'); 
+					$taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
+				}else{
+					$obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
+					$taget2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select');
+				}
+				
+				let goodsDealInfo = $obj2.html();
+				$taget2.html(goodsDealInfo);	
 			}
 			
-			let goodsDealInfo = $obj2.html();
-			$taget2.html(goodsDealInfo);
 			
 		});	
 	}
@@ -516,7 +547,9 @@
 			
 			//상품정보
 			let $selObj = null;
-			if (flag  == "Up"){
+			if (flag  == "layer"){
+				$selObj = $('.pd_descrp_pop .form_field .select_custom.deal_opt_item');
+			}else if (flag  == "Up"){
 				$selObj = $('.pd_detail .opt_select .select_custom.deal_opt_item');
 			}else{
 				$selObj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item');
@@ -547,30 +580,40 @@
 			
 			let $objUp = null;
 			let $objDown = null;
-			// 하단 우측 상품선택영역  Up/ Down
-			$objUp = $('.pd_detail .opt_result'); 
-			$objDown = $('.pd_desc_wrap .opt_result');
+			// 하단 우측 상품선택영역  Up/ Down/ layer
+			if (flag  == "layer"){
+				$objLayer = $('.pd_descrp_pop .opt_result'); 
+				$objUp = $('.pd_detail .opt_result'); 
+				$objDown = $('.pd_desc_wrap .opt_result');
+				$objLayer.append(tag);
+			}else{
+				$objUp = $('.pd_detail .opt_result'); 
+				$objDown = $('.pd_desc_wrap .opt_result');
+			}
 			
 			$objUp.append(tag);
 			$objDown.append(tag);
 			
-			// 옵션 2 선태값 적용
-			let $obj2 = null;
-			let $taget2 = null;
-			// 하단 우측 상품선택영역  Up/ Down
-			if (flag  == "Up"){
-				$obj2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select'); 
-				$taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
-			}else{
-				$obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
-				$taget2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select');
+			if (flag  != "layer"){
+				// 옵션 2 선태값 적용
+				let $obj2 = null;
+				let $taget2 = null;
+				// 하단 우측 상품선택영역  Up/ Down
+				if (flag  == "Up"){
+					$obj2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select'); 
+					$taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
+				}else{
+					$obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
+					$taget2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select');
+					
+				}
+				
+				let goodsDealInfo = $obj2.html();
+				$taget2.html(goodsDealInfo);
+				
 				
 			}
-			
-			let goodsDealInfo = $obj2.html();
-			$taget2.html(goodsDealInfo);
-			
-			fnSetTotalPrice();
+			fnSetTotalPrice();	
 			
 		}, "text");
 	}
@@ -949,7 +992,6 @@
 <!-- 광고 스크립트 -->
 <!-- <th:block th:replace="~{web/common/advertisements/GoodsDetailScriptsWeb :: scripts}"></th:block> -->
 <!-- //광고 스크립트 -->
-
 </th:block>
 
 </body>

src/main/webapp/WEB-INF/views/web/goods/GoodsIncludeFormWeb.html

@@ -152,7 +152,7 @@
 															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 														</p>
 													</a>
-													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
+													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}"  th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
 												</div>
 											</div>
 										</li> 
@@ -397,9 +397,9 @@
 							</div>
 							<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 								<li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
-									<div class="item_prod">
+									<div class="item_prod"  th:classappend="${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'soldout':'' }">
 										<div class="item_state">
-											<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]])">
+											<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]], [[${goodsInfo.selfGoodsYn}]], [[${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'Y':'N' }]])">
 												<div class="itemPic">
 													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 												</div>
@@ -410,7 +410,7 @@
 													<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 												</p>
 											</a>
-											<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
+											<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}, selfGoodsYn=${goodsInfo.selfGoodsYn}"  />
 										</div>
 									</div>
 								</li> 
@@ -427,15 +427,11 @@
 				<div class="option_box">
 					<div class="opt_select">
 						<div class="form_field">
-							<div class="select_custom deal_opt1">
+							<div class="select_custom deal_opt1" disabled>
 								<div class="combo">
 									<div class="select">선택</div>
-									<ul class="list">
-										<li class="selected">선택</li> 
-										<li aria-disabled="true" data-soldout="true">
-											<div>상품옵션07</div>
-											<div>120,000원</div>
-										</li>
+									<ul class="list"  id="goodsDealOptLayer1">
+										<!--  옵션 1 -->
 									</ul>
 								</div>
 							</div>
@@ -444,13 +440,8 @@
 							<div class="select_custom deal_opt2" disabled>
 								<div class="combo">
 									<div class="select">선택</div>
-									<ul class="list">
-										<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
-										<li class="selected">선택</li> 
-										<li aria-disabled="true" data-soldout="true">
-											<div>상품옵션17</div>
-											<div>120,000원</div>
-										</li>
+									<ul class="list"  id="goodsDealOptLayer2">
+										<!--  옵션 2 -->
 									</ul>
 								</div>
 							</div>
@@ -494,7 +485,6 @@
 <script th:inline="javascript">
 /*<![CDATA[*/
 	
-	
 	// 구성 상품 상세 상품평
 	var fnGoodsDetailReview = function(params) {
 		gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
@@ -539,8 +529,14 @@
 		
 		// 탭별 선택시 기본 상품 설정
 		let selIdx = 0;
-		$selObj.find('.combo .list li').each(function() { 
+		let selfGoodsYn = '';
+		let currPrice = 0;
+		let soldoutYn = "N";
+		$selObj.find('.combo .list li').each(function() { debugger;
 			if ($(this).find('input[name=selectGoods]').val() == compsGoodsCd){
+				selfGoodsYn = $(this).find('input[name=selectGoods]').attr('selfGoodsYn');
+				currPrice = $(this).find('input[name=selectGoods]').attr('currPrice');
+				if ($(this).find('.item_prod').hasClass('soldout')) soldout = "Y";
 				return false;
 			}
 			selIdx ++;
@@ -549,7 +545,19 @@
 		$selObj.find('.combo .list li').eq(selIdx).trigger("click");
 		
 		// 상세노출
-		fnGoodsDealDesc(compsGoodsCd);
+		fnGoodsDealDesc(compsGoodsCd, currPrice, selfGoodsYn, soldout);
+/* 		debugger;
+		if (!soldout){
+			// 옵션1 처리
+			fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);	
+		}
+ */		
+		
+		let $obj = $('.pd_detail .opt_result'); 
+		let $taget = $('.full_pop_fix_r .opt_result');
+		$taget.html($obj.html());
+		
+		fnSetTotalPrice();
 		
 		$('body').addClass('lock');
 		$("#layer_goods_deal_detail").show(); 
@@ -558,11 +566,16 @@
 	
 	// 상세 레이어 창닫기
 	var fnCloseGoodsDealDetail = function(){
-		$('body').removeClass('lock');
-		$("#layer_goods_deal_detail").hide(); 
+		// 선택값 본창에 넘기기
+		let $obj = $('.full_pop_fix_r .opt_result');
+		let $taget = $('.pd_detail .opt_result');
+		$taget.html($obj.html());
 		
+		fnSetTotalPrice();
 		
-		// 선택값 본창에 넘기기
+		$('body').removeClass('lock');
+		$('#goodsDealDetail').html('');
+		$("#layer_goods_deal_detail").hide();
 	}
 	
 	// 구성 상품 상세 
@@ -570,15 +583,19 @@
 		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
 	}
 	
-	// 상품선택시
-	var fnGoodsDealDesc = function(goodsCd){
+	// 레이어에서 상품선택시
+	var fnGoodsDealDesc = function(goodsCd, currPrice, selfGoodsYn , soldout){
 		var params = new Object();
 		params.goodsCd = goodsCd;
+		params.adminYn = "Y";
 		fnGoodsDealDetail2(params);  // ajax html
+		if (soldout == "N"){
+			// 옵션1 처리
+			fnOption1("layer", goodsCd, currPrice, selfGoodsYn);
+		}
+		
 	}
 	
-	
-	
 	$(document).ready( function() {
 
 		/* var params = new Object();