style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!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" id="itemViewArea">
						<div class="sec_head">
							<p class="dp_live_txt"><img src="/images/pc/dp_best_livetxt.jpg" alt="STYLE24 실시간 베스트 상품!   "></p>
							<p class="displayH">지금 많이 <br> <span>보고 있어요</span></p>
							<button type="button"><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">
									<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}">관심상품 추가</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">전체</li>
												<li>남성</li>
												<li>여성</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">전체</li>
												<li>10대</li>
												<li>20대</li>
												<li>30대</li>
												<li>40대</li>
												<li>50대 이상</li>
											</ul>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>

					<div id="infiniteContainer" class="list_content">
						<div id="listBoxOuter" class="itemsGrp">
							<ul class="productlist quarter" id="listBox">
							</ul>
						</div>
					</div>
<!--					<div class="list_content">-->
<!--						<div class="itemsGrp" id="listBox"> -->
							<!-- itemsGrp rank hot deal -->
							<!--<div class="item_prod">
								<div class="item_state">
									<button type="button" class="itemLike">관심상품 추가</button>
									<a href="#none" class="itemLink">
										<div class="rank ranker"><span>1</span></div>
										<div class="itemPic">
											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
										</div>
										<p class="itemBrand">BRAND NAME</p>
										<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
										<p class="itemPrice">80,100
											<span class="itemPrice_original">89,000</span>
											<span class=" itemPercent">10%</span>
										</p>
										<div class="itemcolorchip">
											<span class="chip_color35" value="ABM">BEIGE</span>
											<span class="chip_color54" value="BDS">BLACK</span>
											<span class="chip_color40" value="YBR">WHITE</span>
										</div>
										<p class="itemBadge">
											<span class="badge13">베스트 </span>
										</p>
										<div class="itemComment">#주문 폭주 상품</div>
									</a>
								</div>
							</div>-->
<!--						</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>

	<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');

		/* 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 fnBestListSearch = function (obj, cateNo){
		// if(gagajf.isNull(cateNo)){
		// 	cateNo = 0;
		// }
		console.log('here1');
		$.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);

		// fnCategoryGoodsInfiniteScrollInit();
		gagaInfiniteScroll.getHistory();
	}

	//
/*
		let fnRealtimeViewBestList = function(cateNo) {
			$.getJSON('/display/realtime/best/list'
					, function(result, status) {
						if (result.length > 0) {
							searchEngineAllCate = result;
							// GNB탭 > 브랜드 생성
							// fnCreateGnbBrandGroup();
							fnCreateGnbTab();
						}
					});
		}
		*/
	var fnRealtimeViewBestList = function (cateNo){
		$("#bestGoodsForm input[name=cateNo]").val(cateNo);
		gagajf.ajaxFormSubmit("/display/realtime/best/list", document.bestGoodsForm, callbackRealtimeView);
	}

	var callbackRealtimeView = function (result){
		console.log('[callbackRealtimeView]');
		console.log('result::'+result);
		console.log(result);
		$("#itemViewArea").html('');
	}

	var totalCnt = 0;
	var idx = 1;
	// 상품 검색
	var fnGetInfiniteScrollDataList = function (pageNum){
		console.log('here2');
		console.log('here2 pageNum::'+pageNum);
		$("#bestGoodsForm input[name=pageNo]").val(pageNum+1);
		// if(idx==1 || totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
		// 	idx++;
			gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  gagaInfiniteScroll.jsonToHtml);
		// }
	}

	var fnDrawInfiniteScrollData = function (result){
		console.log('here3');
		console.log(result);
		totalCnt = result.paging.totalCount;
		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
		var ithrCd = '';
		var contentLoc = '';
		let dataListLen = 0;
		if(result.dataList != null){
			dataListLen = result.dataList.length-1;
		}

		if (dataListLen > 0) {
			idx++;
			var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];;
			let lastPage = result.paging.pageNo;
			let endRow = result.paging.endRow - result.paging.pageSize;
			var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow);
			gagaInfiniteScroll.draw(htm);
			console.log('1818');
		}else{
			if(idx > 1) { // 데이터가 1건 이상
				if(totalCnt > Number($("#bestGoodsForm").find("input[name=pageSize]").val())){
					if($("#bestGoodsForm input[name=pageNo]").val()==1){
						$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
					}
					$("#divLastPage").show();
				}
			}else{

			}
			console.log('18');
			gagaInfiniteScroll.draw('not');
		}
	}

	// 사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
	$(window).on("pageshow", function(event) {
		if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
			var historyData = sessionStorage.getItem(document.location.href);
			if(historyData!=null){
				historyData = JSON.parse(historyData);
			}else{
				historyData = {};
			}
			fnBestListSearch();
			console.log('1');
		}else{
			fnCategoryGoodsInfiniteScrollInit();
			console.log('2');
			fnBestListSearch();
		}
	});

/*]]>*/
</script>

</th:block>

</body>
</html>