모바일 룩북 레이어 상품

src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html

@@ -723,7 +723,7 @@
 				</div>
 				<!-- //이상품과 함께 본 상품영역-->
 				<!-- STYLE24의 스타일링 추천 -->
-				<div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}">
+				<div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}" th:with="ithrCd=aa , contentsLoc=bb" >
 					<h3 class="tit">STYLE24의 스타일링 추천</h3>
 					<!-- 상품이미지pic -->
 					<div class="area_slider pic_img" >
@@ -738,7 +738,7 @@
 														th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
 											<div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
 												<div>
-													<button type="button"><span class="ico ico_picker"></span></button>
+													<button type="button" th:onclick="fnLookbookPicker(this,[[${lookbookGoods.goodsCd}]]);"><span class="ico ico_picker"></span></button>
 													<div class="pick_descr">
 														<a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
 													</div>
@@ -756,7 +756,7 @@
 					</div>
 					<!-- //상품이미지pic -->
 					<!-- 상품이미지pic 리스트 -->
-					<div class="area_slider pic_list"  th:with="ithrCd=aa , contentsLoc=bb ">
+					<div class="area_slider pic_list" >
 						<div class="box"  th:each="lookbook, status : ${lookbookList}">
 							<div class="swiper-container"  th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
 								<div class="swiper-wrapper">
@@ -1996,7 +1996,77 @@
 			cfnAddCart(params);	
 		} */
 	}
-	 
+	
+	
+	//룩북 피커 선택시 레이어 노출
+	var fnLookbookPicker = function(obj,goodsCd){
+		let $obj = $(obj);
+		var str = '<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">\n';
+		//let $target = $obj.parent().parent().parent().find('.item_prod');
+		let $target = $('.pic_list').find('.item_prod');
+		
+		let goodsImg = '';
+		let brandName = '';
+		let goodsName = '';
+		let currPrice = '';
+		let listPrice = '';
+		let dcRate = '';
+		let soldout = '';
+		
+		$target.each(function(){
+			if ($(this).attr('goodsCd') == goodsCd) {
+				
+				if ($(this).hasClass('unable')) soldout = 'sold_out';
+				
+				goodsImg = $(this).find('.itemPic').children('.pd_img').attr('src');
+				brandName = $(this).find('.itemBrand').text();
+				goodsName = $(this).find('.itemName').text();
+				currPrice = $(this).find('.itemPrice').text();
+				return false;
+			}
+		});
+		
+		if (gagajf.isNull(goodsName)){
+			return false;
+		}
+		
+		$("#reco_pop").remove();
+		
+		let tag = '';
+		tag += '	<div class="modal-dialog" role="document">\n';
+		tag += '		<div class="modal-content">\n';
+		tag += '			<div class="modal-header">\n';
+		tag += '				<h5 class="modal-title"><span class="sr_only">제품정보</span></h5>\n';
+		tag += '			</div>\n';
+		tag += '			<div class="modal-body">\n';
+		tag += '				<div class="itemsGrp rowtype">\n';
+		tag += '					<div class="item_prod '+ soldout+'"> <!-- 품절일때 sold_out 클래스 추가 요청 -->\n';
+		tag += '						<div class="item_state">\n';
+		tag += '							<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+goodsCd+'\',\'\',\'\')">\n';
+		tag += '								<div class="itemPic">\n';
+		tag += '									<img alt="BLACK-a" class=" vLHTC pd_img" src="'+goodsImg +'?RS=70"  onerror="this.src=\'/images/pc/thumb/bg_item_none.png\'">\n';
+		tag += '								</div>\n';
+		tag += '								<p class="itemBrand">'+brandName+'</p>\n';
+		tag += '								<div class="itemName">'+goodsName+'</div>\n';
+		tag += '								<p class="itemPrice">\n';
+		tag += '									'+currPrice+'\n';
+		tag += '								</p>\n';
+		tag += '							</a>\n';
+		tag += '						</div>\n';
+		tag += '					</div>\n';
+		tag += '				</div>\n';
+		tag += '			</div>\n';
+		tag += '		</div>\n';
+		tag += '	</div>\n';
+		tag += '	<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer(\'recoPop\')" class="close-modal">Close</a>\n';
+		
+		
+		if ($('#reco_pop').length == 0) {
+			$('body').append(str+tag+'</div>');
+			$('#reco_pop').modal("show");
+		}
+	}
+	
 	$(document).ready( function() {
 		
 		$('.timer_box').css('display', 'none');
@@ -2279,13 +2349,23 @@
 		// ep 쿠폰확인
 		fnEpCouponDown([[${afLinkCd}]], [[${params.goodsCd}]], 1);
 		
-		
 		$('.Purchase_pop .btPop_close').click(function(){
 			$('html, body').css({'overflow': 'visible', 'height': '100%'});
 			$('.container').removeClass('btPop_open');
 			autome.style.top  = 100 + "%";
 			return false;
 		}); 
+		
+		// 픽커모달
+		$(document).on('click','.item_picker',function(e){
+            //$("#reco_pop").modal("show");
+			$("body").addClass("recoPop");
+            return false;
+        });
+		$(document).on('click','#reco_pop .close-modal',function(e){
+			$("body").removeClass("recoPop");
+            return false;
+        });
 		 
 	});