style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
							<!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="index.html">홈</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,0);">전체</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 src="/images/pc/dp_best_livetxt.jpg" alt="STYLE24 실시간 베스트 상품!   "></p>
							<p class="displayH">지금 많이 <br> <span>보고 있어요</span></p>
							<button type="button"><span><em class="time">17:30</em> 기준</span></button>
						</div>
						<div class="sec_body">
							<div class="swiper-container dp_live_slider">
								<div class="swiper-wrapper">
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike">관심상품 추가</button>
												<a href="#none" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
													</div>
													<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
													<div class="viewCount"><span>508</span>명 보는중</div>
												</a>
											</div>
										</div>
									</div>
								</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">
						<div id="listBoxOuter" class="itemsGrp">
							<ul class="productlist quarter" >
							</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 ="30"/>
		<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;
		}

		$.each($("#cateListArea").find('li'), function() {
			$(this).removeClass();
		});
		$("#li"+cateNo).addClass('active');
		$("#bestGoodsForm input[name=cateNo]").val(cateNo);
		fnCategoryGoodsInfiniteScrollInit();
		gagaInfiniteScroll.getHistory();
	}

	// 상품 검색
	var fnGetInfiniteScrollDataList = function (pageNum){
		$("#bestGoodsForm input[name=pageNo]").val(pageNum+1);
		gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  gagaInfiniteScroll.jsonToHtml);
	}

	var fnDrawInfiniteScrollData = function (result){
		let totalCnt = result.totalCnt;
		gagaInfiniteScroll.pageStatus.totalCount = result.totalCnt;
		var ithrCd = '';
		var contentLoc = '';

		if (result.dataList != null && result.dataList.length > 0) {
			var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];;
			let lastPage = result.paging.pageable.pageNo;
			let endRow = result.endRow - result.paging.pageable.pageSize;
			var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow);
			gagaInfiniteScroll.draw(htm);
		}else{
			if($("#bestGoodsForm input[name=pageNo]").val()==1){
				$('#listBox').html('<li class="none">상품정보가 존재하지 않습니다.</li>');
			}
			$("#divLastPage").show();
			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();
		}else{
			fnCategoryGoodsInfiniteScrollInit();

			fnBestListSearch();
		}
	});

/*]]>*/
</script>

</th:block>

</body>
</html>