style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!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/DefaultLayoutMob">
<!--
 *******************************************************************************
 * @source  : OutletMainFormMob.html
 * @desc    : 아울렛메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.10   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<main role="" id="" class="container dp">
		<section class="content dp_outlets">
			<th:block th:if="${outletMainLayoutList}" th:each="mainLayoutData, mainStat : ${outletMainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SOM','')},contentsTitle=${mainLayoutData.contentsTitle}">
				<th:block th:if="${contentsLoc=='001'}">
					<div class="inner wide" th:if="${planningList != null and !planningList.empty}">
						<div class="outlets_visual">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide" th:each="item, status : ${planningList}">
										<a th:href="${item.strVar1}">
											<div class="img">
												<img th:src="${@environment.getProperty('domain.image') + item.imgPath2}" alt="">
											</div>
											<div class="txtWrap" th:classAppend="${(item.strVar7 == 'BLACK') ? '' :'w'}">
												<p class="subject">
													<input type="hidden" name="mainTitle" th:value="${item.strTitle1}"/>
												</p>
												<p class="txt_xs" th:text="${item.subText1}">재고있을 때 미리 득템</p>
											</div>
										</a>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='004'}">
<!--				<th:block th:if="${mainStat.index==1}" th:style="${'display:block'}" th:data="${mainStat.index}">-->
					<div class="inner wide bg_gray">
						<div class="dp_cate_list">
						</div>
					</div>
<!--				</th:block>-->
				</th:block>

				<th:block th:if="${contentsLoc=='002'}">
					<div class="inner wide" th:if="${mdPickGoodsList != null}">
						<div class="md_item inner">
							<h2 class="dp_subtitle" th:text="${contentsTitle}">MD가 추천하는 아울렛 아이템</h2>
							<div class="swiper-container item_list">
								<div class="swiper-wrapper">
									<div class="swiper-slide" th:each="item, status : ${mdPickGoodsList}">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SOM002', planDtlSq=''">관심상품 추가</button>
												<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SOM002');">
													<div class="itemPic">
														<th:block th:each="option,idx:${item.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
															<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
															<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
														</th:block>
														<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" alt="">
													</div>
													<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
													<div class="itemName" th:text="${item.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
													<p class="itemPrice">
														<span class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'COMMA')}">89,000</span>
														[[${#numbers.formatInteger(item.currPrice,0,'COMMA')}]]
														<span class="itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
													</p>
													<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='003'}">
					<div class="inner" th:if="${bestGoodsList != null}">
						<div class="best_item">
							<h2 class="dp_subtitle" th:text="${contentsTitle}">베스트 상품</h2>
							<div class="item_list">
								<div class="itemsGrp">
									<div class="item_prod" th:each="item, status : ${bestGoodsList}">
										<div class="item_state">
											<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SOM003', planDtlSq=''">관심상품 추가</button>
											<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SOM003');">
												<div class="shape" th:classappend="${status.count==1}?'ranker'"><span th:text="${status.index+1}">1</span></div>
												<div class="itemPic">
													<th:block th:each="option,idx:${item.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
														<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
														<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
													</th:block>
													<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" alt="">
												</div>
												<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
												<div class="itemName" th:text="${item.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
												<p class="itemPrice"><span class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(item.currPrice,0,'COMMA')}]]
													<span class="itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
												</p>
												<div class="itemcolorchip" th:if="${item.colorArr != null}">
													<th:block th:each="option, idx : ${item.colorArr}" th:with="colorArray=${#strings.arraySplit(idx.current,':')}">
														<span th:if="${colorArray[1]=='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';border:1px solid #aaa;'}" class="chip_color" th:value="${colorArray[0]}"></span>
														<span th:if="${colorArray[1]!='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';'}" class="chip_color" th:value="${colorArray[0]}"></span>
													</th:block>
												</div>
												<p class="itemBadge" th:if="${item.benefitArr != null}">
													<th:block th:each="option, idx : ${item.benefitArr}" th:with="iconArray=${#strings.arraySplit(idx.current,':')}" >
														<span class="badge13" th:if="${idx.index<3}" th:value="${iconArray[0]}" th:text="${iconArray[1]}"></span>
													</th:block>
												</p>
												<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

			</th:block>
		</section>
	</main>

	<script th:inline="javascript">
		$(document).ready(function(){
			fnSetCategory1Depts();

			$(document).on('click','.sub_category .more_btn',function(){
				$(this).toggleClass('on');
				$('.sub_category .cate_wrap').toggleClass('on');
				if($(this).hasClass('on')){
					$(this).find('span').text('접기');
				}else{
					$(this).find('span').text('더보기');
				}
			});

			//210624_ 추가 : 슬라이드 속성 추가.
			var outletCont = $('.outlets_visual .swiper-slide');
			var outletLength = outletCont.length;
			if (outletLength < 2) {
				var swiper = new Swiper('.outlets_visual .swiper-container', {
					observer: true,
					observeParents: true,
					loop:false,
					speed:1000,
					watchOverflow: true,
					pagination: {
						el: '.outlets_visual .swiper-pagination',
						type: 'fraction',
					},
				});
			}else{
				var swiper = new Swiper('.outlets_visual .swiper-container', {
					observer: true,
					observeParents: true,
					loop:true,
					speed:1000,
					pagination: {
						el: '.outlets_visual .swiper-pagination',
						type: 'fraction',
					},
					autoplay : {
						delay : 3000,   // 시간 설정
						disableOnInteraction: false,
					},
				});
			}

			var dp_mditem_slide = new Swiper('.md_item .swiper-container', {
				slidesPerView: 2,
				spaceBetween: 8,
				speed:1000,
				centerMode: true,
				a11y: {
					enabled: true,
					notificationClass: 'swiper-notification',
					prevSlideMessage: '이전 슬라이드',
					nextSlideMessage: '다음 슬라이드',
					firstSlideMessage: '첫번째 슬라이드 입니다',
					lastSlideMessage: '마지막 슬라이드 입니다',
					paginationBulletMessage: '슬라이드 {{index}}로 이동',
				},
			});
		});

		// 카테고리1Depts 설정
		var fnSetCategory1Depts = function() {
			let allCate = [[${allCateList}]];
			let cateGb = 'G032_101';
			let formalGb = 'G009_20';
			let tag = '';
			tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cateGb + '\',\'\',\'\',\'\',\'\',\'\',\'' + formalGb + '\');">전체</a>\n';
			$.each(allCate, function(allCateIdx, allCateItem) {
				tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + allCateItem.cateGb + '\',' + allCateItem.cate1No + ',\'\',\'\',\'\',\'\',\'' + formalGb + '\');">' + allCateItem.cate1Nm + '</a>\n';
			});
			$('.dp_cate_list').html(tag);
		}

		// 스크립트 제거
		function fnRemoveHTML(text){
			var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
			reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
			reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
			return reText;
		}

		$('.subject').each(function (){
			let tag = '';
			if(!gagajf.isNull($(this).find("input[name=mainTitle]").val())) {
				var brText = $(this).find("input[name=mainTitle]").val();
				tag = fnRemoveHTML(brText);
				$(this).append(tag);
			}
		});
	</script>

</th:block>

</body>
</html>