style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/BrandLayoutWeb">
<!--
 *******************************************************************************
 * @source  : LookbookDetailFormWeb.html
 * @desc    : 룩북 상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.06   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container br">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" id="navHome">홈</a></li>
				<li class="bread_2depth" th:if="${lookbookInfo.lookbookGb==BL}" th:text="${lookbookInfo.brandNm}">TBJ</li>
				<li class="bread_3depth">룩북</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content br_lookbook_view cont_visual" th:if="${lookbookDetailList != null}"> <!-- 페이지특정 클래스 = br_lookbook_view -->
				<div class="cont_head">
					<h3 class="displayH t_c" th:text="${lookbookInfo.title}">2020 F/W COLLECTION</h3>
				</div>
				<div class="cont_body">
					<div class="area_slider">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<th:block th:each="item, stat : ${lookbookDetailList}">
									<div class="swiper-slide">
										<div class="bt_lb_item">
											<img class="vLHTC lb_img" th:src="${@environment.getProperty('domain.image')+item.sysFileNm+'?RS=460'}" alt="BLUE-a"/>
											<th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
												<div class="item_picker" th:style="${'left:'+goodsItem.xlim+'%; top:'+goodsItem.ylim+'%;'}">
													<button type="button" th:onclick="fnLookbookGoodsPopup([[${goodsItem.sysImgNm}]],[[${goodsItem.brandGroupNm}]],[[${goodsItem.goodsFullNm}]],[[${goodsItem.listPrice}]],[[${goodsItem.currPrice}]],[[${goodsItem.dcRate}]],[[${goodsItem.goodsCd}]],[[${goodsItem.stockQty}]],[[${goodsItem.soldoutYn}]])"><span class="ico ico_picker"></span></button>
												</div>
											</th:block>
										</div>
									</div>
								</th:block>
							</div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="content br_lookbook_view cont_txts" id="lbImgDesc" th:if="${lookbookDetailList != null}">
				<div class="cont_body">
					<th:block th:each="item, stat : ${lookbookDetailList}">
						<div class="text_cont">
							<input type="hidden" name="title" th:value="${item.imgDesc}">
						</div>
					</th:block>
				</div>
			</div>

			<div class="content br_lookbook_view cont_items" th:if="${lookbookDetailList != null}">
				<th:block th:each="item, stat : ${lookbookDetailList}">
				<div class="cont_head ioTit">
					<h3>룩북 속 상품<span class="number">(<th:block th:text="${#lists.size(item.lookbookGoodsList)}"></th:block>)</span></h3>
					<button class="btn btn_primary" th:onclick="fnAddCartLookBookGoods1(this,[[${stat.count}]]);"><span>모두 쇼핑백 담기</span></button>
				</div>
				</th:block>
				<div class="cont_body">
					<div class="area_slider">
						<!-- 겉 상품 -->
						<div class="items_outside">
							<th:block th:each="item, stat : ${lookbookDetailList}">
							<div class="itemsOut" th:id="${'itemsList'+stat.count}">
								<div class="swiper-container items_inside">
									<div class="swiper-wrapper">
										<th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
											<div class="swiper-slide">
												<div class="item_prod" th:attr="goodsCd=${goodsItem.goodsCd}, optCdInfo=${goodsItem.optCdInfo}, minOrdQty=${goodsItem.minOrdQty},  goodsType=${goodsItem.goodsType}">
													<div class="item_state" th:classappend="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}? 'soldout' : ''">
														<th:block th:each="optCd : ${#strings.arraySplit(goodsItem.optCdInfo,',')}">
															<input type="hidden" name="lookbookGoodsOptCd" th:value="${optCd}"/>
														</th:block>
<!--														<th:block th:if="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}">-->
<!--															<a href="javascript:void(0);" class="itemLink" >-->
<!--														</th:block>-->
<!--														<th:block th:unless="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}">-->
															<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsItem.goodsCd}]])">
<!--														</th:block>-->
															<div class="itemPic">
																<img alt="" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsItem.sysImgNm}">
															</div>
															<p class="itemBrand" th:text="${goodsItem.brandGroupNm}">BRAND NAME1</p>
															<div class="itemName" th:text="${goodsItem.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
															<p class="itemPrice">[[${#numbers.formatInteger(goodsItem.currPrice,0,'COMMA')} + 원]]
																<span class="itemPrice_original" th:if="${goodsItem.currPrice != goodsItem.listPrice}" th:text="${#numbers.formatInteger(goodsItem.listPrice,3,'COMMA')}">89,000</span>
																<span class="itemPercent" th:if="${goodsItem.currPrice != goodsItem.listPrice}" th:text="${(goodsItem.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsItem.listPrice - goodsItem.currPrice) / (goodsItem.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
															</p>
														</a>
													</div>
												</div>
											</div>
										</th:block>
										<!-- Add Scrollbar -->
										<div class="swiper-scrollbar"></div>
									</div>
								</div>
							</div>
							</th:block>
						</div>
						<!-- 겉 상품 종료 -->
					</div>
				</div>
			</div>
			<div class="content br_lookbook_view cont_others" th:if="${otherLookbookList}">
				<div class="cont_head">
					<h3 class="subH1 t_c mb40">다른 룩북 보기</h3>
					<button th:if="${lookbookInfo.lookbookGb=='BL'}" th:onclick="cfnGoToLookbookList([[${lookbookInfo.lookbookGb}]],[[${lookbookInfo.brandCd}]])"><span>전체보기</span></button>
					<button th:if="${lookbookInfo.lookbookGb=='L'}" th:onclick="cfnGoToLookbookList([[${lookbookInfo.lookbookGb}]])"><span>전체보기</span></button>
				</div>
				<div class="cont_body">
					<div class="area_slider">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<th:block th:if="${otherLookbookList}" th:each="oneData, status : ${otherLookbookList}">
									<div class="swiper-slide">
										<a th:href="|javascript:cfnGoToLookbookDetail('${lookbookInfo.lookbookGb}','${oneData.lookbookSq}','${oneData.brandCd}')|">
											<div class="thumb">
												<img th:src="${@environment.getProperty('domain.image')+oneData.sysFileNm}" alt="" style="height:307px;">
											</div>
											<div class="txt">
												<p class="title" th:text="${oneData.title}">2020 F/W COLLECTION 2020</p>
											</div>
										</a>
									</div>
								</th:block>
							</div>
						</div>
						<!-- Add Arrows -->
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 상단_LOOKBOOK_picker_상품_팝업 -->
	<div class="modal fade br_pop lookbook_item_pop" id="lookbookItemPop" tabindex="-1" role="dialog" aria-labelledby="lookbook_item_label" aria-hidden="true">
<!--		<div class="modal-dialog" role="document">-->
<!--			<div class="modal-content">-->
<!--				<div class="modal-header">-->
<!--					<h5 class="modal-title sr-only" id="lookbook_item_label">상품정보</h5>-->
<!--				</div>-->
<!--				<div class="modal-body">-->
<!--					<div class="itemsGrp">-->
<!--						<div class="item_prod">-->
<!--							<div class="item_state">-->
<!--								<div class="itemLink">-->
<!--									<div class="itemPic">-->
<!--										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/ev_list_img05.jpg">-->
<!--									</div>-->
<!--									<p class="itemBrand">BRAND NAME</p>-->
<!--									<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>-->
<!--									<span class="itemPrice_original">89,000</span>-->
<!--									<p class="itemPrice">80,100-->
<!--										<span class="itemPercent">10%</span>-->
<!--									</p>-->
<!--									<button type="button" class="btn btn_default"><span>자세히 보기</span></button>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
	</div>
	<!-- //상단_LOOKBOOK_picker_상품_팝업 -->

	<script th:inline="javascript">
/*<![CDATA[*/
	var lookbookGb = [[${lookbookInfo.lookbookGb}]];
	var brandCd = [[${lookbookInfo.brandCd}]];

	var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
	var fnLookbookGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7,obj8,obj9){
	// $("#lookbookItemPop").modal("show");
	// $("#lookbookItemPop").find(".pd_img").attr('src',goodsImgUrl+'/'+obj1);
	// $("#lookbookItemPop").find(".itemBrand").text(obj2);
	// $("#lookbookItemPop").find(".itemName").text(obj3);
	// $("#lookbookItemPop").find(".itemPrice_original").text(obj4);
	// $("#lookbookItemPop").find(".itemPrice").text(obj5);
	// $("#lookbookItemPop").find(".itemPercent").text(obj6+'%');
	// $("#lookbookItemPop").find(".btn_default").attr('onclick','cfnGoToPage(_PAGE_GOODS_DETAIL+"'+obj7+'");');
		$("#lookbookItemPop .modal-dialog").remove();
		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 sr-only" id="lookbook_item_label">상품정보</h5>\n';
		tag += '		</div>\n';
		tag += '		<div class="modal-body">\n';
		tag += '			<div class="itemsGrp">\n';
		tag += '				<div class="item_prod">\n';
		tag += '					<div class="item_state';
		if(obj8 < 1 || obj9 == 'Y'){
			tag += ' soldout';
		}
		tag += '">\n';
		tag += '						<div class="itemLink">\n';
		tag += '							<div class="itemPic">\n';
		tag += '								<img alt="BLACK-a" class=" vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260" onerror="this.src=\'/images/pc/thumb/bg_item_none.png\'">\n';
		tag += '							</div>\n';
		tag += '							<p class="itemBrand">'+obj2+'</p>\n';
		tag += '							<div class="itemName">'+obj3+'</div>\n';
		if(obj4 != obj5) {
			tag += '							<span class="itemPrice_original">' + obj4.addComma() + '</span>\n';
		}
		tag += '							<p class="itemPrice">'+obj5.addComma()+'\n';
		if(obj6>0){
			tag += '								<span class="itemPercent">'+obj6+'%</span>\n';
		}
		tag += '							</p>\n';
		tag += '							<button type="button" class="btn btn_default" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')"><span>자세히 보기</span></button>\n';
		tag += '						</div>\n';
		tag += '					</div>\n';
		tag += '				</div>\n';
		tag += '			</div>\n';
		tag += '		</div>\n';
		tag += '	</div>\n';
		tag += '</div>\n';

		$("#lookbookItemPop").append(tag);
		$('#lookbookItemPop').modal("show");
	}
	
	var fnAddCartLookBookGoods1 = function (obj, idx){
		let $obj = $(obj);
		let $target = $('.cont_items #itemsList'+idx).find('.item_prod');
		let goodsSize = $target.length;
		let btnType = "C";
		let params = [];
		let goodsIdx = 0;
		
		$target.each(function(){
			params = [];
			goodsIdx ++;
			if ($(this).find('.item_state').hasClass('soldout')) {
				
			}else{
				// 옵션확인
				let goodsCnt = $(this).find('input[name=lookbookGoodsOptCd]').length;
				if(goodsCnt == 1){
					let arrOpt = $(this).find('input[name=lookbookGoodsOptCd]').val();
					let arrOptInfo = arrOpt.split(':');
					
					let obj = new Object();
					obj.goodsCd = $(this).attr("goodsCd");
					obj.optCd = arrOptInfo[1];
					obj.goodsQty = $(this).attr("minOrdQty");
					obj.goodsType = $(this).attr("goodsType");
					obj.cartGb = btnType;
					obj.afLinkCd = '';
					obj.ithrCd = $(this).attr("ithrCd");
					obj.contentsLoc = $(this).attr("contentsLoc");
					obj.planDtlSq = '';
					obj.multiGoodsGb = 'O'  // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
					if (goodsIdx == goodsSize){
						obj.multiGoodsGb = 'E'  // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
					}
					params.push(obj);
					
					// 장바구니담기
					cfnAddCart(params);
				}else{
					let $goods = $(this);
					let cartGoodsList = [];
					let compsList = [];
					let goodsList = {
						cartCompsList : new Array()
					}
					
					let arrInfo = $(this).find('input[name=lookbookGoodsOptCd]').val().split(',');	// 상품코드단위
					
					
					$.each(arrInfo, function(idx, item) {
						let arrOptInfo = item.split(':');
						
						let obj = new Object();
						obj.cartGb = btnType;
						obj.goodsType = $goods.attr("goodsType");
						obj.goodsCd = $goods.attr("goodsCd");
						obj.itemCd =arrOptInfo[0];
						obj.optCd = arrOptInfo[1];
						obj.goodsQty = $goods.attr("minOrdQty");
						obj.afLinkCd = '';
						obj.ithrCd =  $goods.attr("ithrCd");
						obj.contentsLoc = $goods.attr("contentsLoc");
						obj.planDtlSq = ''
						obj.multiGoodsGb = 'O'  // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
						if (goodsIdx == goodsSize){
							obj.multiGoodsGb = 'E'  // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
						}
						compsList.push(obj);
						
					});
					
					goodsList.cartCompsList = compsList;
					cartGoodsList.push(goodsList);
					
					// 장바구니담기
					cfnAddCart(cartGoodsList);
				}
			}
		});
	}
	
	// 컨텐츠 호출
	$(document).ready( function() {
		/* 슬라이드 - 상단_LOOKBOOK */
		var lookbook_visual_slide = new Swiper('.br_lookbook_view.cont_visual .swiper-container', {
			loop: true,
			loopAdditionalSlides : 1,
			slidesPerView: 'auto',
			spaceBetween: 20,
			speed : 800,
			autoWidth: true,
			autoHeight: true,
			observer: true,
			centeredSlides: true,
			autoplay: false,
			nested: true,
			navigation: {
				nextEl: '.br_lookbook_view.cont_visual .swiper-button-next',
				prevEl: '.br_lookbook_view.cont_visual .swiper-button-prev',
			},
			pagination: {
				el: '.br_lookbook_view.cont_visual .swiper-pagination',
				clickable: true,
			},
			on: {
				slideChange:function(){
					// 05.06_ 추가 : .ioTit
					$('.text_cont').removeClass('active');
					$('.ioTit').removeClass('active');
					$('.itemsOut').removeClass('active');
					$('.text_cont').eq(this.realIndex).addClass('active');
					$('.ioTit').eq(this.realIndex).addClass('active');
					$('.itemsOut').eq(this.realIndex).addClass('active');
				}
			},
			watchOverflow : true,
			watchSlidesVisibility: true,
			watchSlidesProgress: true,
		});
		
		/* 슬라이드 - 룩북 상품 inSide */
		var togetherIteminner = new Swiper('.br_lookbook_view.cont_items .items_inside', {
			observer: true,
			observeParents: true,
			slidesPerView: 6,
			spaceBetween: 20,
			scrollbar: {
				el: '.br_lookbook_view.cont_items .swiper-scrollbar',
				hide: true,
			},
			// nested: true,
		});
		
		/* 슬라이드 - 다른 룩북 보기 */
		var br_ohter_slide = new Swiper('.br_lookbook_view.cont_others .swiper-container', {
			slidesPerView: 5,
			spaceBetween: 20,
			navigation: {
				nextEl: '.br_lookbook_view.cont_others .swiper-button-next',
				prevEl: '.br_lookbook_view.cont_others .swiper-button-prev',
			},
		});
		
		// 슬라이드 - 상단_LOOKBOOK > picker - 룩북_피커_상품정보 팝업
		$(document).on('click','#btn_picker_item01',function(e){
			$("#lookbookItemPop").modal("show");
			return false;
		});

		if(lookbookGb=='BL'){
			$("#navHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
		}else{
			$("#navHome").attr('href', '/');
		}
	});

	$('#lbImgDesc .text_cont').each(function (){
		var brText = $(this).find("input[name=title]").val();
		let tag = brText.replace(/(?:\r\n|\r|\n)/g, '<br>');
		$(this).append(tag);
	});

/*]]>*/
</script>

</th:block>

</body>
</html>