|
|
@@ -0,0 +1,375 @@
|
|
|
+<!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>
|
bin2107