style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
							<!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><button type="button" class="active" id="li0" onclick="fnBestListSearch(this,0);">전체</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="#none" class="refresh">17:30 기준</a></li>
							</ul>
						</div>
					</div>
					<div class="swiper-container item_list">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="item_prod">
									<div class="item_state">
										<a href="#none" class="itemLink">
											<div class="itemPic">
												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
											</div>
											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
											<div class="viewComment">508명 보는중</div>
										</a>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="item_prod">
									<div class="item_state">
										<a href="#none" class="itemLink">
											<div class="itemPic">
												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
											</div>
											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
											<div class="viewComment">320명 보는중</div>
										</a>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="item_prod">
									<div class="item_state">
										<a href="#none" class="itemLink">
											<div class="itemPic">
												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
											</div>
											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
											<div class="viewComment">1500명 보는중</div>
										</a>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="item_prod">
									<div class="item_state">
										<a href="#none" class="itemLink">
											<div class="itemPic">
												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
											</div>
											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
											<div class="viewComment">508명 보는중</div>
										</a>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="item_prod">
									<div class="item_state">
										<a href="#none" class="itemLink">
											<div class="itemPic">
												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/mo/thumb/prod3.jpg">
											</div>
											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
											<div class="viewComment">508명 보는중</div>
										</a>
									</div>
								</div>
							</div>
						</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">구매 성별 전체
											<!--<option value="hide">구매 성별 전체</option>
                                            <option value="Test_SELECT_OPTION_1" rel="icon-temperature">구매 성별 전체1</option>
                                            <option value="Test_SELECT_OPTION_2">구매 성별 전체2</option>
                                            <option value="Test_SELECT_OPTION_3">구매 성별 전체3</option>-->
										</a>
									</div>
								</li>
								<li>
									<div class="open_categori age">
										<a id="filter">구매 연령 전체
											<!--<option value="hide">구매 연령전체</option>
                                            <option value="Test_SELECT_OPTION_1" rel="icon-temperature">구매 연령전체1</option>
                                            <option value="Test_SELECT_OPTION_2">구매 연령전체2</option>
                                            <option value="Test_SELECT_OPTION_3">구매 연령전체3</option>-->
										</a>
									</div>
								</li>
							</ul>
						</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">
							</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 ="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(){
			$(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();

			var dp_viewitem_slide = new Swiper('.view_item .swiper-container', {
				slidesPerView: 'auto',
				slidesPerView: 3,
				spaceBetween: 8,
				centerMode: true,
			});

			// 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){
			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>