style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : BestMainFormWeb.html
 * @desc    : 베스트메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.13   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container dp">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth">베스트</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content wide dp_best"> <!-- 페이지특정 클래스 = dp_best -->
				<div class="cont_head">
					<div>
						<h3>베스트</h3>
					</div>
				</div>
				<div class="cont_body">
					<div class="taps">
						<div>
							<ul id="cateListArea">
								<li class="active" id="li0"><a href="javascript:void(0);" onclick="fnBestListSearch(this,'');">전체</a></li>
								<th:block th:each="item, stat : ${bestCateList}">
									<li class="" th:id="${'li'+item.cateNo}"><a href="javascript:void(0);" th:onclick="fnBestListSearch(this,[[${item.cateNo}]]);" th:text="${item.cateNm}"></a></li>
								</th:block>
							</ul>
						</div>
					</div>
					<!-- 지금 많이 보고 있어요 -->
					<div class="dp_best_live">
						<div class="sec_head">
							<p class="dp_live_txt"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/pc/dp_best_livetxt.jpg'" alt="STYLE24 실시간 베스트 상품!   "></p>
							<p class="displayH">지금 많이 <br> <span>보고 있어요</span></p>
							<button type="button" id="researchBtn"><span><em class="time" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</em> 기준</span></button>
						</div>
						<div class="sec_body" >
							<div class="swiper-container dp_live_slider">
								<div class="swiper-wrapper" id="itemViewArea">
<!--									<th:block th:each="item, status : ${viewBestGoodsList}">-->
<!--										<div class="swiper-slide">-->
<!--											<div class="item_prod">-->
<!--												<div class="item_state">-->
<!--													<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0} ? 'likeit active'" onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.itemId}, goodsNm=${item.itemName}">관심상품 추가</button>-->
<!--													<a th:href="${item.itemUrl}" class="itemLink">-->
<!--														<div class="itemPic">-->
<!--															<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">-->
<!--														</div>-->
<!--														<div class="itemName" th:text="${item.itemName}"></div>-->
<!--														<div class="viewCount">-->
<!--															<span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span>-->
<!--														</div>-->
<!--													</a>-->
<!--												</div>-->
<!--											</div>-->
<!--										</div>-->
<!--									</th:block>-->
								</div>
								<div class="swiper-controls">
									<div class="swiper-scrollbar"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- 지금 많이 보고 있어요 -->
				</div>
			</div>
			<div class="content dp_best_top100">
				<div class="cont_head">
					<div>
						<h3>베스트 TOP100</h3>
					</div>
				</div>
				<div class="cont_body">
					<div class="ui_row">
						<div class="ui_col_12">
							<form class="form_wrap">
								<div class="form_field">
									<div class="select_custom select_sex">
										<div class="combo">
											<div class="select">구매 성별 전체</div>
											<ul class="list">
												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
												<li class="selected" data-id="" onclick="fnGetEigenD002(this, 'gender');">전체</li>
												<li data-id="A" onclick="fnGetEigenD002(this, 'gender');">남성</li>
												<li data-id="B" onclick="fnGetEigenD002(this, 'gender');">여성</li>
											</ul>
										</div>
									</div>
									<div class="select_custom select_age">
										<div class="combo">
											<div class="select">구매 연령 전체</div>
											<ul class="list">
												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
												<li class="selected" data-id="" onclick="fnGetEigenD002(this, 'age');">전체</li>
												<li data-id="10" onclick="fnGetEigenD002(this, 'age');">10대</li>
												<li data-id="20" onclick="fnGetEigenD002(this, 'age');">20대</li>
												<li data-id="30" onclick="fnGetEigenD002(this, 'age');">30대</li>
												<li data-id="40" onclick="fnGetEigenD002(this, 'age');">40대</li>
												<li data-id="50" onclick="fnGetEigenD002(this, 'age');">50대 이상</li>
											</ul>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>

					<div class="list_content">
						<div class="itemsGrp" id="prodArea">
						</div>
					</div>

				</div>
			</div>
			<div class="last_page" id="divLastPage" style="display: none;">
				<span>마지막 페이지입니다.</span>
			</div>
		</div>
	</div>

	<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() {
		// 베스트TOP100 정렬
		var select_sex = new sCombo('.select_sex.select_custom');
		var select_age = new sCombo('.select_age.select_custom');
	});

	var fnBestListSearch = function (obj, cateNo){
		$.each($("#cateListArea").find('li'), function() {
			$(this).removeClass();
		});
		if(gagajf.isNull(cateNo)){
			$("#li0").addClass('active');
		}else{
			$("#li"+cateNo).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('');
			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 += '		<button type="button" class="itemLike" onclick="cfnPutWishList(this)" goodsCd="'+item.itemId+'" goodsNm="'+ item.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
						html += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.itemId+'\',\'\',\'IN10_01\')">\n';
						html += '				<div class="itemPic">\n';
						html += '					<img alt="" 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"><span>10명</span> 미만</div>\n';
						}else{
							html += '				<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
						}
						html += '			</a>\n';
						html += '		</div>\n';
						html += '	</div>\n';
						html += '</div>\n';
					}
				});

			}

			$("#itemViewArea").append(html);
			$("#researchBtn").attr("onclick","fnRealtimeViewBestList("+cateNo+");");
			/* SLIDE - 지금많이 보고있어요 */
			var dp_live_slide = new Swiper ('.dp_best_live .dp_live_slider', {
				slidesPerView: 6,
				spaceBetween: 20,
				speed : 1000,
				freeMode: true,
				autoplay: false,
				scrollbar: {
					el: '.dp_best_live .swiper-scrollbar',
					hide: false,
				},
			});
		});
	}

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

	let bestCnt = 0;
	let eigenBestCnt = 0;

	var fnCallbackBestTop100 = function (result){
		$("#prodArea").html('');
		var tag = '';

		bestCnt = result.dataList.length;

		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.mainColorCd+'\',\'IN10_01\')">\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">'+item.currPrice.addComma();
				if (item.currPrice != item.listPrice) {
					tag+='						<span class="itemPrice_original">'+item.listPrice.addComma()+'</span>\n';
					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);
		}
		// 수동설정이 100미만이면 추천솔루션 데이터 추가 조회
		if(bestCnt < 100){
			eigenBestCnt = 100 - bestCnt;
			fnGetEigenBestData(eigenBestCnt);
		}
	}

	// 추천솔루션 데이터 추가 조회
	var fnGetEigenBestData = function (cnt){
		var eigenUrl = '';
		var selectCateNo = $("#bestGoodsForm input[name=cateNo]").val();

		if(gagajf.isNull(selectCateNo)){
			/* cateNo 전체 일 때 */
			eigenUrl = 'https://api.eigene.io/rec/m061?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4';
		}else{
			eigenUrl = 'https://api.eigene.io/rec/m060?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&incids='+selectCateNo;
		}
		var tag = '';
		$.getJSON(eigenUrl, function (result, status){
			if (status === 'success') {
				if (!gagajf.isNull(result.results)) {
					$.each(result.results, 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.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
						tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\',\'IN10_01\')">\n';
						tag += '<div class="shape ';
						if(cnt == 100 && idx==0){
							tag += ' ranker';
						}
						tag += '"><span>'+(bestCnt+idx+1)+'</span></div>\n';
						tag += '			<div class="itemPic">\n';
						tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+ item.product.itemImage +'">\n';
						tag += '			</div>\n';
						tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
						tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
						tag += '			<p class="itemPrice">'+item.product.salePrice.addComma();
						if (item.product.originalPrice != item.product.salePrice) {
							tag+='						<span class="itemPrice_original">'+item.product.originalPrice.addComma()+'</span>\n';
							tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
						}
						tag += '			</p>\n';
						tag += '		</a>\n';
						tag += '	</div>\n';
						tag += '</div>\n';
					});
					$("#prodArea").append(tag);
				}
			}
		});
	}

	// 구매 성별/연령 별 베스트 상품 추천
	var fnGetEigenD002 = function (obj, key){
		var gender = '';
		var age = '';

		if(key == 'gender'){
			gender = $(obj).attr("data-id");
			$('.select_age .list').find('li').each(function (){
				if($(this).hasClass("selected")){
					age = $(this).attr("data-id");
				}
			});
		}else{
			age = $(obj).attr("data-id");
			$('.select_sex .list').find('li').each(function (){
				if($(this).hasClass("selected")){
					gender = $(this).attr("data-id");
				}
			});
		}

		if(gagajf.isNull(gender) && gagajf.isNull(age)){
			$("#prodArea").html('');
			fnGetEigenBestData(100);
		}else{
			$("#prodArea").html('');
			var eigenUrl = 'https://api.eigene.io/rec/d002?size=100&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&gender='+gender+'&age='+age;
			var tag = '';
			$.getJSON(eigenUrl, function (result, status){
				if (status === 'success') {
					if (!gagajf.isNull(result.results)) {
						$.each(result.results, 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.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
							tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\',\'IN10_01\')">\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="'+ item.product.itemImage +'">\n';
							tag += '			</div>\n';
							tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
							tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
							tag += '			<p class="itemPrice">'+item.product.salePrice.addComma();
							if (item.product.originalPrice != item.product.salePrice) {
								tag+='						<span class="itemPrice_original">'+item.product.originalPrice.addComma()+'</span>\n';
								tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
							}
							tag += '			</p>\n';
							tag += '		</a>\n';
							tag += '	</div>\n';
							tag += '</div>\n';
						});
						$("#prodArea").append(tag);
					}
				}
			});
		}
	}

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

/*]]>*/
</script>

</th:block>

</body>
</html>