|
|
@@ -19,28 +19,18 @@
|
|
|
<body>
|
|
|
|
|
|
<th:block layout:fragment="content">
|
|
|
- <main role="" id="" class="container dp">
|
|
|
|
|
|
+
|
|
|
+ <main role="" id="" class="container dp">
|
|
|
<section class="content dp_list">
|
|
|
- <!-- <div class="inner wide bg_gray">-->
|
|
|
- <!-- <div class="sub_category">-->
|
|
|
- <!-- <div class="cate_wrap">-->
|
|
|
- <!-- <a href="javascript:;" class="on">전체</a>-->
|
|
|
- <!-- <a href="javascript:;">티셔츠/셔츠</a>-->
|
|
|
- <!-- <a href="javascript:;">니트/가디건/베스트</a>-->
|
|
|
- <!-- <a href="javascript:;">원피스/스커트</a>-->
|
|
|
- <!-- <a href="javascript:;">팬츠/데님/레깅스</a>-->
|
|
|
- <!-- <a href="javascript:;">가죽/모피</a>-->
|
|
|
- <!-- <a href="javascript:;">여성 잡화</a>-->
|
|
|
- <!-- <a href="javascript:;">언더웨어</a>-->
|
|
|
- <!-- <a href="javascript:;">세트</a>-->
|
|
|
- <!-- <a href="javascript:;">니트/가디건/베스트</a>-->
|
|
|
- <!-- <a href="javascript:;">원피스/스커트</a>-->
|
|
|
- <!-- <a href="javascript:;">가죽/모피</a>-->
|
|
|
- <!-- <a href="javascript:;">여성 잡화</a>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
+ <div class="inner wide bg_gray">
|
|
|
+ <div class="sub_category">
|
|
|
+ <div class="cate_wrap" id="leafCateList">
|
|
|
+ <!-- 하위카테고리 리스트 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="inner">
|
|
|
<!-- 상품리스트 -->
|
|
|
<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
|
|
|
@@ -48,22 +38,22 @@
|
|
|
<div>
|
|
|
<p><span id="totCntId"></span>개의 상품</p>
|
|
|
</div>
|
|
|
- <!-- <div>-->
|
|
|
- <!-- <ul class="dp_util">-->
|
|
|
- <!-- <li>-->
|
|
|
- <!-- <div class="open_categori">-->
|
|
|
- <!-- <!– 210415_select > a태그로 변경 –>-->
|
|
|
- <!-- <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><a href="#none" class="filter open_filter">필터</a></li>-->
|
|
|
- <!-- </ul>-->
|
|
|
- <!-- </div>-->
|
|
|
+ <div>
|
|
|
+ <ul class="dp_util">
|
|
|
+ <li>
|
|
|
+ <div class="open_categori">
|
|
|
+ <!-- 210415_select > a태그로 변경 -->
|
|
|
+ <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><a href="#none" class="filter open_filter">필터</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="list_defult">
|
|
|
<div>
|
|
|
@@ -89,19 +79,370 @@
|
|
|
</section>
|
|
|
|
|
|
<!-- 필터 -->
|
|
|
-
|
|
|
+ <div class="filter_box">
|
|
|
+ <div class="filter_list">
|
|
|
+ <div class="filter_top">
|
|
|
+ <div class="tt">필터</div>
|
|
|
+ <div>
|
|
|
+ <button class="fillter_reset"><span>초기화</span></button>
|
|
|
+ <button class="close">닫기</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter_con">
|
|
|
+ <form id="filterForm">
|
|
|
+ <div class="filter_header">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price" type="checkbox"><label for="price"> <span>남여 공용만 보기</span> </label>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input id="chk-2" type="checkbox"><label for="chk-2"> <span>신상품만 보기</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter_body">
|
|
|
+ <!-- 필터메뉴 -->
|
|
|
+ <ul>
|
|
|
+ <li class="categori">
|
|
|
+ <a href="javascript:void(0)" class="daps1">카테고리<span class="pic">셔츠/블라우스</span></a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">여성</a>
|
|
|
+ <ul class="daps3">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">티셔츠/셔츠</a>
|
|
|
+ <ul class="daps4">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">셔츠/블라우스</a>
|
|
|
+ <ul class="daps5">
|
|
|
+ <li><a href="javascript:void(0)">셔츠</a></li>
|
|
|
+ <li><a href="javascript:void(0)">블라우스</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">맨투맨/모자티</a>
|
|
|
+ <ul class="daps5">
|
|
|
+ <li><a href="javascript:void(0)">맨투맨</a></li>
|
|
|
+ <li><a href="javascript:void(0)">모자티</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">남성</a>
|
|
|
+ <ul class="daps3">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">티셔츠/셔츠</a>
|
|
|
+ <ul class="daps4">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">셔츠/블라우스</a>
|
|
|
+ <ul class="daps5">
|
|
|
+ <li><a href="javascript:void(0)">셔츠</a></li>
|
|
|
+ <li><a href="javascript:void(0)">블라우스</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="brand" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">브랜드</a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li th:each="oneData, status : ${filterBrandList}">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input th:id="${'chkFilterBrand' + status.index}" name="brandGroup" type="checkbox" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'brandGroup','off','','Mob');"><label th:for="${'chkFilterBrand' + status.index}"><span th:text="${oneData.filterNm}"></span></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li calss="size" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">사이즈</a>
|
|
|
+ <div class="daps2">
|
|
|
+ <ul class="sizebox">
|
|
|
+ <li id="sizeLi1">
|
|
|
+ <strong>상의</strong>
|
|
|
+ <th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'T')}">
|
|
|
+ <label class="size_btn">
|
|
|
+ <input type="checkbox" group="filterValue" th:id="${'chkFilterTSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="1" onclick="filterSel(this,'size','off','1','Mob');"><span th:text="${oneData.filterNm}">80</span>
|
|
|
+ </label>
|
|
|
+ </th:block>
|
|
|
+ </li>
|
|
|
+ <li id="sizeLi2">
|
|
|
+ <strong>하의</strong>
|
|
|
+ <th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'B')}">
|
|
|
+ <label class="size_btn">
|
|
|
+ <input type="checkbox" group="filterValue" th:id="${'chkFilterBSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="2" onclick="filterSel(this,'size','off','2','Mob');"><span th:text="${oneData.filterNm}">44</span>
|
|
|
+ </label>
|
|
|
+ </th:block>
|
|
|
+ </li>
|
|
|
+ <li id="sizeLi3">
|
|
|
+ <strong>신발</strong>
|
|
|
+ <th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'S')}">
|
|
|
+ <label class="size_btn">
|
|
|
+ <input type="checkbox" group="filterValue" th:id="${'chkFilterSSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="3" onclick="filterSel(this,'size','off','3','Mob');"><span th:text="${oneData.filterNm}">120</span>
|
|
|
+ </label>
|
|
|
+ </th:block>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="price">
|
|
|
+ <a href="javascript:void(0)" class="daps1">가격<!--<span class="pic">230,000원~487,000원, 700,000원~990,000원</span>--></a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price1" type="checkbox"><label for="price1"> <span>9천원 이하</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price2" type="checkbox"><label for="price2"> <span>9천원 ~ 23만원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price3" type="checkbox" checked><label for="price3"> <span>23만원 ~ 48만원 7천원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price4" type="checkbox" ><label for="price4"> <span>48만원 7천원 ~ 79만원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price5" type="checkbox" checked><label for="price5"> <span>70만원 ~ 99만원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price6" type="checkbox"><label for="price6"> <span>99만원 ~ 136만원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="price7" type="checkbox"><label for="price7"> <span>136만원 ~ 179만원 9천원</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="discount">
|
|
|
+ <a href="javascript:void(0)" class="daps1">할인율</a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount1" type="checkbox"><label for="discount1"> <span>10% 이하</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount2" type="checkbox"><label for="discount2"> <span>10~20%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount3" type="checkbox"><label for="discount3"> <span>20~30%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount4" type="checkbox"><label for="discount4"> <span>30~40%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount5" type="checkbox"><label for="discount5"> <span>40~50%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount6" type="checkbox"><label for="discount6"> <span>50~60%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount7" type="checkbox"><label for="discount7"> <span>60~70%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount8" type="checkbox"><label for="discount8"> <span>70~80%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount9" type="checkbox"><label for="discount9"> <span>80~90%</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input id="discount10" type="checkbox"><label for="discount10"> <span>90이상</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="age" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">연령</a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li th:each="oneData, status : ${filterAgeList}">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'age','off','','Mob');" type="checkbox"><label th:for="${'chkFilterAge' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="season" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">시즌</a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li th:each="oneData, status : ${filterSeasonList}">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'season','off','','Mob');" type="checkbox"><label th:for="${'chkFilterSeason' + status.index}"> <span th:text="${oneData.filterNm}">봄</span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="color" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">컬러
|
|
|
+ <span class="pic">
|
|
|
+<!-- <span class="pdColor-color01"></span><span class="pdColor-color02"></span>-->
|
|
|
+ </span>
|
|
|
+ </a>
|
|
|
+ <div class="daps2">
|
|
|
+ <ul class="colorbox">
|
|
|
+ <li th:each="oneData, status : ${filterColorList}">
|
|
|
+ <label class="color-check">
|
|
|
+ <input type="checkbox" group="filterValue" th:id="${'chkFilterColor' + status.index}" name="color" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm.replace('#','')}" onclick="filterSel(this,'color','off','','Mob');">
|
|
|
+ <span class="pdColor-color" th:if="${oneData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm+';'+' border:1px solid #aaa;'}" th:value="${oneData.filterCd}"></span>
|
|
|
+ <span class="pdColor-color" th:if="${oneData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm}" th:value="${oneData.filterCd}"></span>
|
|
|
+ </label>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="benefit" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
|
|
|
+ <a href="javascript:void(0)" class="daps1">혜택</a>
|
|
|
+ <ul class="daps2">
|
|
|
+ <li th:each="oneData, status : ${filterBenefitList}">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="form_field">
|
|
|
+ <div>
|
|
|
+ <input th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'benefit','off','','Mob');" type="checkbox"><label th:for="${'chkFilterBenefits' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- //필터메뉴 -->
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- //필터 -->
|
|
|
|
|
|
- <!-- 카테고리 -->
|
|
|
-
|
|
|
- <!-- //카테고리 -->
|
|
|
-
|
|
|
- <!-- 제품네비 -->
|
|
|
-
|
|
|
- <!-- //제품네비 -->
|
|
|
|
|
|
<!-- 210415_최신상품순 리스트 팝업 추가 -->
|
|
|
-
|
|
|
+ <div id="odDatePop" 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" id="sortArea">
|
|
|
+ <button type="button" id="sortingNEW" class="on" onclick="fnSortingChange(this,'NEW','','Mob');"><span>최신상품순</span></button>
|
|
|
+ <button type="button" id="sortingBEST" onclick="fnSortingChange(this,'BEST','','Mob');"><span>인기많은순</span></button>
|
|
|
+ <button type="button" id="sortingREVIEW" onclick="fnSortingChange(this,'REVIEW','','Mob');"><span>리뷰많은순</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
|
|
|
<form id="searchGoodsForm" name="searchGoodsForm">
|
|
|
@@ -126,10 +467,332 @@
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
$(document).ready(function(){
|
|
|
- //fnCreateCategoryList();
|
|
|
+ fnCreateCategoryList();
|
|
|
+
|
|
|
+ if ($('#sizeLi1').find('label').length == 0) $('#sizeLi1').hide();
|
|
|
+ if ($('#sizeLi2').find('label').length == 0) $('#sizeLi2').hide();
|
|
|
+ if ($('#sizeLi3').find('label').length == 0) $('#sizeLi3').hide();
|
|
|
+
|
|
|
+ //네비
|
|
|
+ var bodyChk = 0;
|
|
|
+ function navi(){
|
|
|
+
|
|
|
+ var navOpen=$("#htopTitle");
|
|
|
+ var navClose=$(".nav_box .nav_close");
|
|
|
+ var navPop=$(".nav_box");
|
|
|
+
|
|
|
+ navOpen.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on")
|
|
|
+ navPop.hide();
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ bodyChk = 1;
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on")
|
|
|
+ navPop.show();
|
|
|
+ navPop.addClass("on");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ bodyChk = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ navClose.on("click",function(){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ navPop.hide();
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ $("#htopTitle").removeClass("on");
|
|
|
+ });
|
|
|
+
|
|
|
+ if(bodyChk === 0){
|
|
|
+ $('body').on('scroll touchmove mousewheel', function(event) { // 터치무브와 마우스휠 스크롤 방지
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ navi();
|
|
|
+
|
|
|
+ //카테고리
|
|
|
+ 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");
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ categoryClose.on("click",function(){
|
|
|
+ categoryPop.hide();
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ category();
|
|
|
+
|
|
|
+ //필터
|
|
|
+ function filter(){
|
|
|
+ var filterOpen=$(".open_filter");
|
|
|
+ var filterClose=$(".filter_box .close");
|
|
|
+ var filterPop=$(".filter_box");
|
|
|
+ var filter=$(".filter_body > ul");
|
|
|
+ var dap1=$(".filter_body > ul .daps1");
|
|
|
+ var dap2=$(".filter_body > ul .daps2");
|
|
|
+ var dap3=$(".filter_body > ul .daps3");
|
|
|
+ var dap4=$(".filter_body > ul .daps4");
|
|
|
+ var dap5=$(".filter_body > ul .daps5");
|
|
|
+ var dap2A=$(".filter_body > ul .daps2 > li > a");
|
|
|
+ var dap3A=$(".filter_body > ul .daps3 > li > a");
|
|
|
+ var dap4A=$(".filter_body > ul .daps4 > li > a");
|
|
|
+ var dap5A=$(".filter_body > ul .daps5 > li > a");
|
|
|
+
|
|
|
+ /* 필터모달 > 열기,닫기 */
|
|
|
+ filterOpen.on("click",function(){
|
|
|
+ filterPop.addClass("active");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ });
|
|
|
+
|
|
|
+ filterClose.on("click",function(){
|
|
|
+ filterPop.removeClass("active");
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 필터메뉴 > 댑스열고, 닫기 */
|
|
|
+ dap1.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ $(this).next(dap2).slideUp();
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ $(this).next(dap2).slideDown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dap2A.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ $(this).next(dap3).slideUp();
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ $(this).next(dap3).slideDown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dap3A.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ $(this).next(dap4).slideUp();
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ $(this).next(dap4).slideDown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dap4A.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ $(this).next(dap5).slideUp();
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ $(this).next(dap5).slideDown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dap5A.on("click",function(){
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ $(this).removeClass("on");
|
|
|
+ //$(this).next(dap6).slideUp();
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ //$(this).next(dap6).slideDown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ filter();
|
|
|
+
|
|
|
+ // 210415_팝업관련 추가
|
|
|
+ //기간 선택 팝업
|
|
|
+ $(document).on("click", ".open_categori", function(){
|
|
|
+ $('#odDatePop').show().addClass("active");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ });
|
|
|
+ //팝업_닫기
|
|
|
+ $('.popup_close').on("click",function(){
|
|
|
+ $('.popup_box').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+
|
|
|
+ // 210415_팝업 테두리 선택 추가
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ $('.popup_box .button_list button').removeClass('on');
|
|
|
+ $(this).addClass('on');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.dp .filter_box .filter_con').scroll(function(){
|
|
|
+ //$(".dp .filter_box .filter_con").css("border-bottom", "0px none");
|
|
|
+ //console.log($(".dp .filter_box .filter_con").scrollTop());
|
|
|
+ if($(".dp .filter_box .filter_con").scrollTop() === 0){
|
|
|
+ $(".dp .filter_box .filter_top").css("box-shadow", "none");
|
|
|
+ //$(".dp .filter_box .filter_con").css("border-bottom", "1px solid #eee");
|
|
|
+ } else {
|
|
|
+ $(".dp .filter_box .filter_top").css("box-shadow", "0px 3px 15px 0px rgba(0,0,0,0.30)");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //210510_추가 : 토스트 팝업 button 클릭 시 팝업 닫기.
|
|
|
+ $(document).on('click','.popup_box.odDatePop .button_list button',function(){
|
|
|
+ $(this).parents('.popup_box.odDatePop').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+
|
|
|
|
|
|
});
|
|
|
|
|
|
+ var fnCreateCategoryList = function (){
|
|
|
+ let actionUrl = '';
|
|
|
+ let brandGroupNo = [[${cateInfo.brandGroupNo}]];
|
|
|
+ let cate1No = [[${cateInfo.cate1No}]];
|
|
|
+ console.log('cateList brandGroupNo::'+brandGroupNo+'>>cate1No::'+cate1No);
|
|
|
+
|
|
|
+ if(gagajf.isNull(brandGroupNo) || brandGroupNo == 0){
|
|
|
+ if( [[${cateInfo.formalGb}]] == 'G009_20'){
|
|
|
+ actionUrl = '/display/outlet/cate/list?cate1No='+cate1No+'&formalGb='+ [[${cateInfo.formalGb}]];
|
|
|
+ }else{
|
|
|
+ actionUrl = '/display/category/reload/list?cateGb='+[[${cateInfo.cateGb}]];
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ actionUrl = '/display/brand/cate/list?brandGroupNo=' + [[${cateInfo.brandGroupNo}]];
|
|
|
+ }
|
|
|
+
|
|
|
+ $.getJSON(actionUrl, function(result, status){
|
|
|
+ if(result.length > 0){
|
|
|
+ let formalGb = [[${cateInfo.formalGb}]];
|
|
|
+ if(formalGb == 'G009_10'){
|
|
|
+ formalGb = '';
|
|
|
+ }
|
|
|
+ let cateGb = 'G032_101';
|
|
|
+ $("#leafCateList").html('');
|
|
|
+
|
|
|
+ let allCate = [[${cateList}]];
|
|
|
+ if(brandGroupNo > 0){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ $.each(result, function(idx, item) {
|
|
|
+ $.each(allCate, function(allCateIdx, allCateItem) {
|
|
|
+ if (item.cate1No == allCateItem.cate1No) {
|
|
|
+ $('#leafCateList').append(fnGetCategoryList(item));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ let fnGetCategoryList = function (cate1){
|
|
|
+ var brandGroupNo = [[${cateInfo.brandGroupNo}]];
|
|
|
+ var cateGb = [[${cateInfo.cateGb}]];
|
|
|
+ var formalGb = [[${cateInfo.formalGb}]];
|
|
|
+ var cate1No = [[${cateInfo.cate1No}]];
|
|
|
+ var cate2No = [[${cateInfo.cate2No}]];
|
|
|
+ var cate3No = [[${cateInfo.cate3No}]];
|
|
|
+ var cate4No = [[${cateInfo.cate4No}]];
|
|
|
+ var cate5No = [[${cateInfo.cate5No}]];
|
|
|
+
|
|
|
+ let tag = '';
|
|
|
+
|
|
|
+ if(formalGb!='G009_20'){
|
|
|
+ formalGb = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (cate1 != null) {
|
|
|
+ if(cate1.cate1No == cate1No){
|
|
|
+ if(gagajf.isNull(cate2No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ');">cate1전체(test)</a>';
|
|
|
+ }
|
|
|
+ if(cate1.leafYn == 'N' && cate1.cate2List.length > 0){
|
|
|
+ $.each(cate1.cate2List, function (idx2, cate2){
|
|
|
+ if(gagajf.isNull(cate2No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ');">'+cate2.cate2Nm+'</a>';
|
|
|
+ }else{
|
|
|
+ if(cate2.cate2No == cate2No){
|
|
|
+ if(cate2.leafYn == 'N' && cate2.cate3List.length > 0){
|
|
|
+ if(gagajf.isNull(cate3No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ');">cate2전체(test)</a>';
|
|
|
+ }
|
|
|
+ $.each(cate2.cate3List, function (idx3, cate3){
|
|
|
+ if(gagajf.isNull(cate3No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ');">'+cate3.cate3Nm+'</a>';
|
|
|
+ }else{
|
|
|
+ if(cate3.cate3No == cate3No){
|
|
|
+ if(cate3.leafYn == 'N' && cate3.cate4List.length > 0){
|
|
|
+ if(gagajf.isNull(cate4No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ');">cate3전체(test)</a>';
|
|
|
+ }
|
|
|
+ $.each(cate3.cate4List, function (idx4, cate4){
|
|
|
+ if(gagajf.isNull(cate4No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ');">'+cate4.cate4Nm+'</a>';
|
|
|
+ }else{
|
|
|
+ if(cate4.cate4No == cate4No){
|
|
|
+ if(cate4.leafYn == 'N' && cate4.cate5List.length > 0){
|
|
|
+ if(gagajf.isNull(cate5No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ');">cate4전체(test)</a>';
|
|
|
+ }
|
|
|
+ $.each(cate4.cate5List, function (idx5, cate5){
|
|
|
+ if(gagajf.isNull(cate5No)){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ',' + cate5.cate5No + ');">'+cate5.cate5Nm+'</a>';
|
|
|
+ }else{
|
|
|
+ if(cate5.cate5No == cate5No){
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ',' + cate5.cate5No + ');">'+cate5.cate5Nm+'</a>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ');">cate4전체</a>';
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ',' + cate4.cate4No + ');">'+cate4.cate4Nm+'</a>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // if(cate1.leafYn == 'N' && cate1.cate2List.length > 0){
|
|
|
+ // $.each(cate1.cate2List, function (idx2, cate2){
|
|
|
+ // if(cate2No == null){
|
|
|
+ // tag += '<a href="javascript:void(0);">cate2전체(test)</a>';
|
|
|
+ // }else{
|
|
|
+ // if(cate2.leafYn == 'N' && cate2.cate3List.length > 0){
|
|
|
+ // $.each(cate2.cate3List, function (idx3, cate3){
|
|
|
+ // if(cate3No == null){
|
|
|
+ // tag += '<a href="javascript:void(0);">cate3전체(test)</a>';
|
|
|
+ // }else{
|
|
|
+ // tag += '<a href="javascript:void(0);">3'+cate3.cateNm+'</a>';
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }else{
|
|
|
+ // tag += '<a href="javascript:void(0);">2'+cate2.cateNm+'</a>';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ return tag;
|
|
|
+ }
|
|
|
+
|
|
|
var fnGoodsListSearch = function (){
|
|
|
gagaInfiniteScroll.getHistory();
|
|
|
}
|
eskim