style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!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  : BestMainFormMob.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_best">
			<div class="inner wide">
				<div class="category_nav">
					<ul id="cateListArea">
						<li class="" id="li0"><button type="button" onclick="fnBestListSearch(this,'');">전체</button></li>
						<th:block th:each="item, stat : ${bestCateList}">
							<li class="" th:id="${'li'+item.cateNo}"><button type="button" th:onclick="fnBestListSearch(this,[[${item.cateNo}]]);" th:text="${item.cateNm}">여성</button></li>
						</th:block>
					</ul>
				</div>
			</div>
			<div class="inner bg_gray">
				<div class="view_item">
					<div class="count_wrap">
						<div>
							<p>지금 많이 <span>보고 있어요</span></p>
						</div>
						<div>
							<ul class="dp_util">
								<li><a href="javascript:void(0);" id="researchBtn" class="refresh" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')+' 기준'}">17:30 기준</a></li>
							</ul>
						</div>
					</div>
					<div class="swiper-container item_list">
						<div class="swiper-wrapper" id="itemViewArea">
						</div>
					</div>
				</div>
			</div>

			<div class="inner">
				<div class="best_item">
					<h2 class="dp_subtitle">베스트 TOP 100</h2>
					<div class="item_list">
						<div class="count_wrap">
							<ul class="dp_util">
								<li>
									<div class="open_categori sex">
										<a id="filter">구매 성별 전체
										</a>
									</div>
								</li>
								<li>
									<div class="open_categori age">
										<a id="filter">구매 연령 전체
										</a>
									</div>
								</li>
							</ul>
						</div>
						<div class="list_content">
							<div class="itemsGrp" id="prodArea">
							</div>
						</div>
						<div class="list_last" id="divLastPage" style="display: none;">마지막페이지 입니다.</div>
					</div>
				</div>
			</div>
		</section>

		<!-- 카테고리 -->
		<div class="category_box">
			<div class="lap">
				<div class="category_close">카테고리닫기</div>
				<div class="category_list">
					<!-- 카테고리 선택 -->
					<div class="selcet_list">
						<ul>
							<li class="active"><a href="javascript:void(0)">구매성별 전체</a></li>
							<li><a href="javascript:void(0)">구매성별1</a></li>
							<li><a href="javascript:void(0)">구매성별2</a></li>
							<li><a href="javascript:void(0)">구매성별3</a></li>
							<li><a href="javascript:void(0)">구매성별4</a></li>
						</ul>
					</div>
					<!-- //카테고리 선택 -->
				</div>
			</div>
		</div>
		<!-- //카테고리 -->

		<!-- 210415_최신상품순 리스트 팝업 추가 -->
		<div id="odDatePop1" class="popup_box odDatePop">
			<div class="lap">
				<div class="popup_close">카테고리닫기</div>
				<div class="popup_head sr-only">
					<h2 class="">기간 선택 팝업</h2>
				</div>
				<div class="popup_con">
					<div class="button_list clear">
						<button type="button" class="on"><span>구매성별 전체</span></button>
						<button type="button"><span>구매성별1</span></button>
						<button type="button"><span>구매성별2</span></button>
						<button type="button"><span>구매성별3</span></button>
						<button type="button"><span>구매성별4</span></button>
					</div>
				</div>
			</div>
		</div>
		<div id="odDatePop2" class="popup_box odDatePop">
			<div class="lap">
				<div class="popup_close">카테고리닫기</div>
				<div class="popup_head sr-only">
					<h2 class="">기간 선택 팝업</h2>
				</div>
				<div class="popup_con">
					<div class="button_list clear">
						<button type="button" class="on"><span>구매연령 전체</span></button>
						<button type="button"><span>구매연령1</span></button>
						<button type="button"><span>구매연령2</span></button>
						<button type="button"><span>구매연령3</span></button>
						<button type="button"><span>구매연령4</span></button>
					</div>
				</div>
			</div>
		</div>
	</main>

	<form id="bestGoodsForm" name="bestGoodsForm">
		<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="50"/>
		<input type="hidden" name="cateNo" value=""/>
		<input type="hidden" name="sortGb"/>
	</form>

	<!-- 수동설정 + 추천솔루션 카운트 문제로 인해 인피티니스크롤 제거 협의 21-07-21 -->
<!--	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>-->
<!--	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>-->
<!--	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>-->


	<script th:inline="javascript">
		/*<![CDATA[*/
		var bestCateList = [[${bestCateList}]];
		$(document).ready(function(){
			$(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('더보기');
				}
			});

			//카테고리
			function category(){
				var categoryOpen=$(".open_categori .select_dress");
				var categoryClose=$(".category_box .category_close");
				var categoryPop=$(".category_box");

				categoryOpen.on("click",function(){
					categoryPop.show();
					categoryPop.addClass("active");
					$("body").css({"overflow":"hidden"});
				});

				categoryClose.on("click",function(){
					categoryPop.hide();
					$("body").css({"overflow":"visible"});
				});
			}
			category();

			// 210415_팝업관련 추가
			//기간 선택 팝업
			$(document).on("click", ".open_categori.sex", function(){
				$('#odDatePop1').show().addClass("active");
				$("body").css({"overflow":"hidden"});
			});
			$(document).on("click", ".open_categori.age", function(){
				$('#odDatePop2').show().addClass("active");
				$("body").css({"overflow":"hidden"});
			});
			//팝업_닫기
			$('.popup_close').on("click",function(){
				$('.popup_box').hide().removeClass('active');
				$("body").css({"overflow":"visible"});
			});

			//210510_수정 : 토스트 팝업 버튼 on 클래스 제어.
			$(document).on('click','.popup_box .button_list button',function(){
				$(this).siblings('.button_list button').removeClass('on');
				$(this).addClass('on');
			})

			//210510_추가 : 토스트 팝업 button 클릭 시 팝업 닫기.
			$(document).on('click','.popup_box.odDatePop .button_list button',function(){
				$(this).parents('.popup_box.odDatePop').hide().removeClass('active');
				$("body").css({"overflow":"visible"});
			})

			$(document).on('click','.popup_box.odDatePop .button_list button',function(){
				$(this).parents('.popup_box.odDatePop').hide().removeClass('active');
				$("body").css({"overflow":"visible"});
			})
		});

		var fnBestListSearch = function (obj, cateNo){
			$.each($("#cateListArea").find('li').find('button'), function() {
				$(this).removeClass();
			});
			if(gagajf.isNull(cateNo)){
				$("#li0").find("button").addClass('active');
			}else{
				$("#li"+cateNo).find("button").addClass('active');
			}

			$("#bestGoodsForm input[name=cateNo]").val(cateNo);

			// 카테고리별 실시간 베스트 상품 조회 getRealtimeViewBestGoodsList
			fnRealtimeViewBestList(cateNo);

			// TOP100 조회
			fnBestTop100List();
		}

		var fnRealtimeViewBestList = function (cateNo){
			if(gagajf.isNull(cateNo)){
				cateNo = "";
			}
			var data = {cateNo : cateNo};
			var html = '';

			$.getJSON('/display/realtime/best/list' , data, function (result, status){
				$("#itemViewArea").html('');
				console.log(result);
				if(result.length > 0){
					$.each(result, function (idx, item){
						// 2021.08.30 이미지 null 처리
						if (item.itemName != null) {
							var imgUrl = '';
	
							html += '<div class="swiper-slide">\n';
							html += '	<div class="item_prod">\n';
							html += '		<div class="item_state">\n';
							html += '			<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.itemId+'\')">\n';
							html += '				<div class="itemPic">\n';
							html += '				<img alt="BLACK-a" class=" vLHTC pd_img" src="' + item.imageUrl + '">\n';
							html += '				</div>\n';
							html += '				<div class="itemName">'+item.itemName+'</div>\n';
							if(item.count < 10){
								html += '				<div class="viewCount">10명 미만</div>\n';
							}else{
								html += '				<div class="viewCount">'+item.count.addComma()+'명 보는중</div>\n';
							}
							html += '			</a>\n';
							html += '		</div>\n';
							html += '	</div>\n';
							html += '</div>\n';
						}
					});
				}

				$("#itemViewArea").append(html);
				$("#researchBtn").attr("onclick","fnRealtimeViewBestList("+cateNo+");");
				/* SLIDE - 지금많이 보고있어요 */
				//210624_ 추가 : 슬라이드 속성 추가.
				var dp_viewitem_slide = new Swiper('.view_item .swiper-container', {
					slidesPerView: 'auto',
					slidesPerView: 3,
					spaceBetween: 8,
					speed: 1000,
					centerMode: true,
					a11y: {
						enabled: true,
						notificationClass: 'swiper-notification',
						prevSlideMessage: '이전 슬라이드',
						nextSlideMessage: '다음 슬라이드',
						firstSlideMessage: '첫번째 슬라이드 입니다',
						lastSlideMessage: '마지막 슬라이드 입니다',
						paginationBulletMessage: '슬라이드 {{index}}로 이동',
					},
					autoplay : {
						delay : 3000,   // 시간 설정
						disableOnInteraction: true,
					},
				});
			});
		}

		var fnBestTop100List = function (){
			gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  fnCallbackBestTop100);
		}

		var fnCallbackBestTop100 = function (result){
			$("#prodArea").html('');
			var tag = '';
			if(result.dataList.length > 0){
				$.each(result.dataList, function (idx, item){
					tag += '<div class="item_prod">\n';
					tag += '	<div class="item_state">\n';
					tag += '		<button type="button" class="itemLike"  onclick="wishlistDelete(this)" goodsCd="'+item.goodsCd+'" goodsNm="'+ item.goodsNm+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
					tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\', \''+item.colorCd+'\')">\n';
					tag += '<div class="shape ';
					if(idx==0){
						tag += ' ranker';
					}
					tag += '"><span>'+(idx+1)+'</span></div>\n';
					tag += '			<div class="itemPic">\n';
					tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '">\n';
					tag += '			</div>\n';
					tag += '			<p class="itemBrand">'+item.brandGroupNm+'</p>\n';
					if (item.goodsTnm != null && item.goodsTnm != '') {
						tag+='					<div class="itemComment">'+item.goodsTnm+'</div>\n';
					}
					tag += '			<div class="itemName">'+item.goodsFullNm+'</div>\n';
					tag += '			<p class="itemPrice">';
					if (item.currPrice != item.listPrice) {
						tag += '						<span class="itemPrice_original">' + item.listPrice.addComma() + '</span>\n';
					}
					tag += item.currPrice.addComma();
					if (item.currPrice != item.listPrice) {
						tag+='						<span class=" itemPercent">'+ Math.round((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100) +'%</span>\n';
					}
					tag += '			</p>\n';
					tag += '			<div class="itemcolorchip">\n';
					if(!gagajf.isNull(item.colorChips)){
						var colorArr = item.colorChips.split(",");
						var colorCd = '';
						var rgbColor = '';
						for(let i=0; i<colorArr.length; i++){
							var colorInfo = colorArr[i].split(":");
							colorCd = colorInfo[0];
							rgbColor = colorInfo[1];
							if(rgbColor=='#FFFFFF'){
								tag += '	<span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>\n';
							}else{
								tag += '	<span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>\n';
							}
						}
					}
					tag += '			</div>\n';
					if(!gagajf.isNull(item.icon)){
						var iconArr = item.icon.split(",");
						var iconGb = '';
						var iconNm = '';
						tag += '	<p class="itemBadge">\n';
						let arrCnt;
						if(iconArr.length > 2){
							arrCnt = 3;
						}else{
							arrCnt = iconArr.length;
						}
						for(let i=0; i<arrCnt; i++){
							var iconInfo = iconArr[i].split(":");
							iconGb = iconInfo[0];
							iconNm = iconInfo[1];
							tag += '	<span class="badge13" value="'+iconGb+'">'+iconNm+' </span>\n';
						}
						tag += '	</p>';
					}
					
					tag += '		</a>\n';
					tag += '	</div>\n';
					tag += '</div>\n';
				});

				$("#prodArea").append(tag);
			}
		}

		$(document).ready(function() {
			fnBestListSearch();
		});


		/*]]>*/
	</script>

</th:block>

</body>
</html>