style24
/
style24.front


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

<th:block layout:fragment="content">
	<main role="" id="" class="container br">

		<!-- ★ 컨텐츠 시작 -->
		<section class="content br_lookbook" th:if="${lookbookDetailList != null}">
			<div class="inner">
				<h2 class="collection_title" th:text="${lookbookInfo.title}">2020 F/W COLLECTION</h2>
			</div>
			<div class="inner wide">
				<div class="recommendedArea">
					<!-- 상품이미지pic -->
					<div class="area_slider pic_img">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<th:block th:each="item, stat : ${lookbookDetailList}">
									<div class="swiper-slide">
										<div class="page">
											<div class="pic">
												<span class="thumb" th:style="${'background-image:url('+@environment.getProperty('domain.image')+item.sysFileNm+')'}"></span>
												<!-- 상품피커 -->
												<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+'%;'}">
														<div>
															<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 class="pick_descr">
																<a href="javascript:void(0);">
																</a>
															</div>
														</div>
													</div>
												</th:block>
												<!-- //상품피커 -->
											</div>
										</div>
									</div>
								</th:block>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
					</div>
					<!-- //상품이미지pic -->
					<div class="lb_text" id="lbImgDesc" th:if="${lookbookDetailList != null}">
						<th:block th:each="item, stat : ${lookbookDetailList}">
							<div class="text_cont">
								<input type="hidden" name="title" th:value="${item.imgDesc}">
							</div>
						</th:block>
						<button class="btn btnText"><p>더보기</p><span></span></button>
					</div>
				</div>
			</div>
			<div class="inner" th:if="${lookbookDetailList != null}">
				<div class="br_inlookbook">
					<th:block th:each="item, stat : ${lookbookDetailList}">
						<p class="title ioTit"><em>룩북 속 상품</em>(<th:block th:text="${#lists.size(item.lookbookGoodsList)}"></th:block>)</p>
					</th:block>

					<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 swiper-container-initialized swiper-container-horizontal">
										<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
											<th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
												<div class="swiper-slide swiper-slide-active" style="width: 210.333px; margin-right: 20px;">
													<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.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsItem.dcRate,0,0)}%|">10%</span>
																</p>
															</a>
														</div>
													</div>
												</div>
											</th:block>
										</div>
										<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
											<div class="swiper-scrollbar-drag" style="transition-duration: 0ms;"></div>
										</div>
										<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
									</div>
								</div>
							</th:block>
							<!-- 룩북1 해당 아이템 -->
						</div>
						<!-- 겉 상품 종료 -->
					</div>
					<!-- 05.06_ 추가 : .ioTit , .ioBtn -->
					<th:block th:each="item, stat : ${lookbookDetailList}">
						<button class="btn ioBtn" th:onclick="fnAddCartLookBookGoods1(this,[[${stat.count}]]);">모두 쇼핑백 담기</button>
					</th:block>
				</div>
			</div>
			<div class="inner" th:if="${otherLookbookList}">
				<!-- 다른룩북보기 슬라이드 -->
				<div class="br_otherbrand">
					<h3 class="br_subtitle">다른 룩북 보기</h3>
					<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}" style="height:100%" alt="">
											</div>
											<div class="txt">
												<p class="tt" th:text="${oneData.title}"></p>
											</div>
										</a>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</div>
				<!-- //다른룩북보기 슬라이드 -->
			</div>
		</section>
		<!-- ★ 컨텐츠 종료 -->

		<!-- 픽커모달 -->
		<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!--			<div class="modal-dialog" role="document">-->
<!--				<div class="modal-content">-->
<!--					<div class="modal-header">-->
<!--						<h5 class="modal-title"><span class="sr_only">제품정보</span></h5>-->
<!--					</div>-->
<!--					<div class="modal-body">-->
<!--						<div class="itemsGrp rowtype">-->
<!--							<div class="item_prod">-->
<!--								<div class="item_state">-->
<!--									<a href="#none" class="itemLink">-->
<!--										<div class="itemPic">-->
<!--											<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">-->
<!--										</div>-->
<!--										<p class="itemBrand">BRAND NAME</p>-->
<!--										<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>-->
<!--										<p class="itemPrice">-->
<!--											80,100-->
<!--										</p>-->
<!--									</a>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--			<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>-->
		</div>
		<!-- //픽커모달 -->

	</main>

	<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){
		$("#reco_pop .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"><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 ';
		if(obj9 == 'Y'){
			tag += ' sold_out';
		}
		tag +='">\n';
		tag +='					<div class="item_state">\n';
		tag +='						<a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')" class="itemLink">\n';
		tag +='							<div class="itemPic">\n';
		tag +='								<img class="vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260" alt="">\n';
		tag +='							</div>\n';
		tag +='							<p class="itemBrand">'+obj2+'</p>\n';
		tag +='							<div class="itemName">'+obj3+'</div>\n';
		tag +='							<p class="itemPrice">'+obj5.addComma()+'</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="#close-modal" rel="modal:close" class="close-modal ">Close</a>\n';

		$("#reco_pop").append(tag);
		$('#reco_pop').modal("show");
	}

	var fnAddCartLookBookGoods1 = function (obj, idx){
		let $obj = $(obj);
		let $target = $('.br_inlookbook #itemsList'+idx).find('.item_prod');
		let goodsSize = $target.length;
		let btnType = "C";
		let params = [];
		let goodsIdx = 0;

		$target.each(function(){
			params = [];
			goodsIdx ++;
			if ($(this).hasClass('unable')) {

			}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(){
		//setHtop();

		var spc = $('.swiper-pagination-current');
		var spt = $('.swiper-pagination-total');
		setInterval(function(){
			for(var i=0; i<spc.length; i++){
				if(spc[i].innerText.length < 2){
					var itNum = spc[i].innerText.toString();
					spc[i].innerText = 0+itNum;
				}
			}
			for(var i=0; i<spt.length; i++){
				if(spt[i].innerText.length < 2){
					var itNum2 = spt[i].innerText.toString();
					spt[i].innerText = 0+itNum2;
				}
			}
		}, 10);

		$(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;
		});
	});

	function setHtop() {
		if($('header').hasClass('main')) {
			$('#htopMain').show();
			$('#htopSub').hide();
		} else {
			$('#htopMain').hide();
			$('#gnb').hide();
			$('#htopSub').show();
		}
	}

	// 룩북 슬라이드
	var rcmdPicimgSwiper = new Swiper('.recommendedArea .area_slider .swiper-container', {
		loop: true,
		slidesPerView: 1,
		spaceBetween: 0,
		pagination: {
			el: '.swiper-pagination',
			type: 'fraction',
		},
		//210414_자동롤링 추가
		//autoplay : {
		//	delay : 3000,   // 시간 설정
		//},
		on: {
			slideChange:function(){
				// 05.06_ 추가 : .ioTit , .ioBtn
				$('.text_cont').removeClass('active');
				$('.ioTit').removeClass('active');
				$('.itemsOut').removeClass('active');
				$('.ioBtn').removeClass('active');
				$('.text_cont').eq(this.realIndex).addClass('active');
				$('.ioTit').eq(this.realIndex).addClass('active');
				$('.itemsOut').eq(this.realIndex).addClass('active');
				$('.ioBtn').eq(this.realIndex).addClass('active');
			}
		},
	});

	//룩북 속 상품
	var inLookbookSwiper = new Swiper('.br_inlookbook .area_slider .swiper-container', {
		slidesPerView: 3,
		spaceBetween: 26,
		observer: true,
		observeParents: true,
		//pagination: {
		//	el: '.swiper-pagination',
		//	type: 'fraction',
		//},
	});

	//다른 룩북 보기
	var otherBrandSwiper = new Swiper('.br_otherbrand .area_slider .swiper-container', {
		slidesPerView: 2,
		spaceBetween: 8,
		//pagination: {
		//	el: '.swiper-pagination',
		//	type: 'fraction',
		//},
	});

	// 더보기
	var count = 0;
	function view_fold(){
		document.querySelector(".lb_text button").onclick = function () {
			if(count === 0) {
				//document.querySelector(".lb_text .text_cont").style.height = "auto";
				$('.lb_text .text_cont').css('height', 'auto');
				document.querySelector(".lb_text .btnText p").innerText="접기";
				document.querySelector(".lb_text .btnText span").style.background="url(/images/mo/br_arrow_up.png)";
				count = 1;
			} else {
				//document.querySelector(".lb_text .text_cont").style.height = "3.4rem";
				$('.lb_text .text_cont').css('height', '3.4rem');
				document.querySelector(".lb_text .btnText p").innerText="더보기";
				document.querySelector(".lb_text .btnText span").style.background="url(/images/mo/br_arrow_down.png)";
				count = 0;
			}
		}
	}
	view_fold();
	/*]]>*/
</script>

<script>
	// 픽커모달
	$(document).ready(function () {
		$("#htopTitle").html('룩북');
	});

	$('#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>