|
|
@@ -19,73 +19,277 @@
|
|
|
<body>
|
|
|
|
|
|
<th:block layout:fragment="content">
|
|
|
- <main role="" id="" class="container br">
|
|
|
- <section class="content br_lookbook">
|
|
|
+ <main role="" id="" class="container dp">
|
|
|
+
|
|
|
+ <section class="content dp_lookbook">
|
|
|
<div class="inner">
|
|
|
- <p class="title"><span id="totCnt"></span>개 룩북</p>
|
|
|
- <div class="collection_wrap">
|
|
|
- <div class="collection_list" id="lookbookArea">
|
|
|
+ <!-- 상품리스트 -->
|
|
|
+ <div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
|
|
|
+ <div class="count_wrap">
|
|
|
+ <div>
|
|
|
+ <p><span>9999</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>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <p class="last_page">마지막 페이지입니다.</p>
|
|
|
- </div>
|
|
|
- <div class="no_lb_wrap" id="divLookbookNoData">
|
|
|
- <p>등록된 룩북이 없습니다.</p>
|
|
|
- <button class="btn" id="btnHome">홈으로 가기</button>
|
|
|
+ <div class="list_defult">
|
|
|
+ <div>
|
|
|
+ <p>등록된 룩북이 없습니다.</p>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="btn btn_default"><span>홈으로 가기</span></button>
|
|
|
+ </div>
|
|
|
+ <div class="lookbookGrp">
|
|
|
+ <div class="swiper_filter brand">
|
|
|
+ <div class="cate_wrap">
|
|
|
+ <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>
|
|
|
+ <a href="javascript:;">여성 잡화</a>
|
|
|
+ </div>
|
|
|
+ <div class="btnbox"><a href="#none" class="reset">새로고침</a></div>
|
|
|
+ </div>
|
|
|
+ <ul class="event_con">
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="">
|
|
|
+ <div class="ev_img">
|
|
|
+ <img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">
|
|
|
+ </div>
|
|
|
+ <div class="ev_txt">
|
|
|
+ <p class="brand">TBJ 외</p>
|
|
|
+ <p class="tit">2020 F/W COLLECTION 2020</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="list_last">마지막페이지 입니다.</div>
|
|
|
</div>
|
|
|
+ <!-- //상품리스트 -->
|
|
|
</div>
|
|
|
</section>
|
|
|
+
|
|
|
+ <!-- 카테고리 -->
|
|
|
+ <div class="category_box lookbook">
|
|
|
+ <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)">BUCKAROO</a></li>
|
|
|
+ <li><a href="javascript:void(0)">TBJ</a></li>
|
|
|
+ <li><a href="javascript:void(0)">ANDEW</a></li>
|
|
|
+ <li><a href="javascript:void(0)">FRJ</a></li>
|
|
|
+ <li><a href="javascript:void(0)">LPGA골프</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 카테고리 선택 -->
|
|
|
+ </div>
|
|
|
+ <div class="category_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
|
|
|
+ <div>
|
|
|
+ <button class="reset"><span>초기화</span></button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button class="apply"><span>적용</span></button>
|
|
|
+ </div>
|
|
|
+ </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">
|
|
|
+ <button type="button" class="on"><span>전체</span></button>
|
|
|
+ <button type="button"><span>BUCKAROO</span></button>
|
|
|
+ <button type="button"><span>TBJ</span></button>
|
|
|
+ <button type="button"><span>ANDEW</span></button>
|
|
|
+ <button type="button"><span>FRJ</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="brand_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
|
|
|
+ <div class="share_like">
|
|
|
+ <button class="refresh">초기화</button>
|
|
|
+ <!--<button class="like">위시리스트</button>-->
|
|
|
+ </div>
|
|
|
+ <div class="prd_buy">
|
|
|
+ <button class="buying btPop_auto" id="btn_purchase">적용</button>
|
|
|
+ <button class="cantbuying">SOLD OUT</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
|
- var lookbookGb = [[${lbInfo.lookbookGb}]];
|
|
|
- if(lookbookGb != 'BL'){
|
|
|
- lookbookGb = 'L';
|
|
|
- }
|
|
|
- var brandCd = [[${lbInfo.brandCd}]];
|
|
|
+ $(document).ready(function(){
|
|
|
|
|
|
- let fnGetLookbookList = function (lookbookGb, brandGroupNo){
|
|
|
- let actionUrl = '/display/lookbook/main/list?lookbookGb='+lookbookGb;
|
|
|
- if (!gagajf.isNull(brandGroupNo)) actionUrl += '&multiBrandCd=' + brandGroupNo;
|
|
|
- $('#lookbookArea').html('');
|
|
|
- $('#divLookbookNoData').hide();
|
|
|
-
|
|
|
- $.getJSON(actionUrl , function (result, status){
|
|
|
- if (status == 'success'){
|
|
|
- if (result.length > 0){
|
|
|
- $("#totCnt").html('<span>' + result.length.addComma() + '</span>');
|
|
|
-
|
|
|
- var tag = '';
|
|
|
- $.each(result, function(idx, item){
|
|
|
- tag += '<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">';
|
|
|
- tag += ' <div className="collection">';
|
|
|
- tag += ' <figure>';
|
|
|
- tag += ' <img src="' + _imgUrl + item.orgTnfileNm + '" alt="">';
|
|
|
- tag += ' </figure>';
|
|
|
- tag += ' <p>'+item.title+'</p>';
|
|
|
- tag += ' </div>';
|
|
|
- tag += '</a>';
|
|
|
- });
|
|
|
- $('#lookbookArea').html(tag);
|
|
|
- $('#divLookbookNoData').hide();
|
|
|
- $('#lookbookArea').show();
|
|
|
- }else{
|
|
|
- $("#totCnt").html('<span>0</span>');
|
|
|
- $('#lookbookArea').hide();
|
|
|
- $('#divLookbookNoData').show();
|
|
|
- }
|
|
|
+ $(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('더보기');
|
|
|
}
|
|
|
});
|
|
|
- }
|
|
|
|
|
|
- $(document).ready(function() {
|
|
|
- fnGetLookbookList(lookbookGb,brandCd);
|
|
|
|
|
|
- if(lookbookGb=='BL'){
|
|
|
- $("#btnHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
|
|
|
- }else{
|
|
|
- $("#btnHome").attr('href', '/');
|
|
|
+ //카테고리
|
|
|
+ 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();
|
|
|
+
|
|
|
+ // 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).ready(function(){
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ //$('.popup_box .button_list button').removeClass('on');
|
|
|
+ $(this).toggleClass('on');
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ $(this).parents('.popup_box').show().addClass('active');
|
|
|
+ //$("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+ $(document).on('click','.brand_floormenu .refresh',function(){
|
|
|
+ $('.popup_box .button_list button').removeClass('on');
|
|
|
+ });
|
|
|
+ $(document).on('click','.popup_box .buying',function(){
|
|
|
+ $(this).parents('.popup_box').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
|
|
|
});
|
|
|
/*]]>*/
|
bin2107