| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902 |
- <!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/GoodsLayoutMob">
- <!--
- *******************************************************************************
- * @source : GoodsDealDetailFormMob.html
- * @desc : 딜 상품상세 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER DATE AUTHOR DESCRIPTION
- * === =========== ========== =============================================
- * 1.0 2021.04.15 eskim 최초 작성
- *******************************************************************************
- -->
- <body>
- <th:block layout:fragment="content">
- <main role="" id="" class="container pd deal" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
- <!-- ★ 컨텐츠 시작 -->
- <section class="pd_detail">
- <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
- <div class="pd_info">
- <div class="pd_info1" data-speed="10">
- <div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">
- <div class="thumb_box">
- <div class="area_slider">
- <div class="swiper-container thumb_list">
- <div class="swiper-wrapper">
- <th:block th:each="goodsImg, status : ${goodsImgList}">
- <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
- or #strings.contains(goodsImg.sysImgNm,'_L1.')
- or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
- <div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div> <!-- mov -->
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="inner">
- <!-- 210409_ 구조변경 : .covered 추가 -->
- <div class="covered">
- <div class="timer_box" style="display:none;">
- <p>
- <span class="tt">남은시간</span>
- <span class="timer">
- <em id="d-days">0</em>
- <em id="d-hours">0</em>
- <em id="d-minutes">0</em>
- <em id="d-seconds">0</em>
- </span>
- </p>
- </div>
- <div class="descript_box">
- <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
- <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
- <p class="price_blk">
- <span class="sale_price" ><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원 ~</span>
- </p>
- <div class="btn_group_flex">
- <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
- </div>
- </div>
- </div>
- </div>
- <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
- <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
- </div>
-
- <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
- (goodsCouponList != null and !goodsCouponList.empty) or
- (tmtbList != null and !tmtbList.empty) or
- (freeGoodsList != null and !freeGoodsList.empty)}" >
- <div class="benefit_box">
- <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or (tmtbList != null and !tmtbList.empty)}">
- <dt>쇼핑혜택</dt>
- <dd>
- <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
- <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
- <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
- <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
- </em> 쿠폰 할인</span>
- </th:block>
- <th:block th:if="${tmtbList != null and !tmtbList.empty}">
- <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
- <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
- <em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
- </span>
- </th:block>
- <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
- <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
- <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'Y'}" th:text="${'외 택1'}"></th:block></span>
- <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
- </dd>
- </dl>
- <dl class="bnf_card">
- <dt>카드혜택</dt>
- <dd>
- <th:block th:each="cardInfo, status : ${cardInfoList}">
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
- <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
- </th:block>
- <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
- </dd>
- </dl>
- </div>
- </div>
- </div>
- <!-- //***** 상품소개영역 ***** -->
- <th:block th:include="~{mob/goods/GoodsIncludeFormMob:: goodsDealComposeForm}"></th:block>
- <div class="inner" style="display:none;">
- <div class="recommendedArea">
- <!-- 이상품과 함께 본 상품영역-->
- <div class="pd_clickother" id="goodsTogetherbArea">
- </div>
- <!-- //이상품과 함께 본 상품영역-->
- </div>
- </div>
-
- <!-- 팝업영역 -->
- <div>
- <!-- 구매하기팝업 -->
- <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
- <a class="btn btPop_close">Close </a>
- <div class="header btPop_head btPopAuto_head">
- 구매하기팝업
- </div>
- <div class="body btPop_body btPopAuto_body">
- <div class="option_result op1">
- <!-- 옵션 -->
- <div class="option_box">
- <div class="opt_select">
- <form class="form_wrap">
- <div class="form_field">
- <div class="select_custom option_open">
- <div class="combo">
- <div class="select">상품옵션06</div>
- </div>
- </div>
- </div>
- </form>
- </div>
- <div class="opt_result">
- <div class="result_item">
- <div class="opt_header">
- <div class="bundle">
- <span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>
- <span class="item_option">블루그레이/S</span>
- </div>
- </div>
- <div class="number_count">
- <span class="minus"><em class="sr-only">감소</em></span>
- <input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>
- <span class="plus"><em class="sr-only">추가</em></span>
- </div>
- <div class="item_price">
- <p><em>99,999,999</em>원</p>
- </div>
- <button type="button" class="btn_delete_item"><span>삭제</span></button>
- </div>
- <div class="result_item">
- <div class="opt_header">
- <div class="bundle">
- <span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>
- <span class="item_option">블루그레이/S</span>
- </div>
- </div>
- <div class="number_count">
- <span class="minus"><em class="sr-only">감소</em></span>
- <input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>
- <span class="plus"><em class="sr-only">추가</em></span>
- </div>
- <div class="item_price">
- <p><em>99,999,999</em>원</p>
- </div>
- <button type="button" class="btn_delete_item"><span>삭제</span></button>
- </div>
- </div>
-
- </div>
- <!-- 네이버결제 -->
- <div class="npay_box" style="display:none;">
- <div class="np_head">
- <div><img src="/images/mo/img_npay_txt.png" alt="NAVER 네이버 ID로 간편구매 네이버페이"></div>
- <div><button><img src="/images/mo/btn_npay_txt.png" alt="Npay 구매"></button></div>
- </div>
- <div class="np_body">
- <a href="#none"><em>[멥버십]</em>첫달 무료가입하고 추가 4%!</a>
- </div>
- </div>
- </div>
- <!-- 옵션선택팝업 -->
- <div class="pop_option_select">
- <div class="close">닫기</div>
- <div class="pp_body">
- <div class="pp_cont">
- <div class="opt_select">
- <div class="opt_header">
- <span class="title">옵션선택</span>
- <div class="check_excluding form_field">
- <div>
- <input id="excluding" type="checkbox" onclick='getGuidance(event)'><label for="excluding"> <span>품절제외</span> </label>
- </div>
- <div class="guidance" >
- <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
- <p><span>99</span>개 품절 옵션이 제외되었습니다</p>
- </div>
- <script>
- function getGuidance(event) {
- if(event.target.checked){
- $(".guidance").addClass("ontoast");
- setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
- }
- }
- </script>
- </div>
- </div>
- <form class="form_wrap">
- <div class="form_field mb20">
- <div class="select_custom deal_opt_item active">
- <div class="combo">
- <div class="select">상품</div>
- <ul class="list">
- <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
- <li class="">
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품1]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- <li class="">
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품2]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- <li class="selected">
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품3]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- <li aria-disabled="true">
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품4]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- <li>
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품5]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- <li aria-disabled="true" data-soldout="true">
- <div class="item_prod">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink">
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
- </div>
- <div class="itemName"><span class="tit_option">[상품6]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
- <p class="itemPrice">
- 134,100
- <span class="itemPrice_original">149,000</span>
- <span class="itemPercent">30%</span>
- </p>
- </a>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="form_field">
- <div class="select_custom item_opt1" disabled>
- <div class="combo">
- <div class="select">옵션1</div>
- <ul class="list" style="display: none;">
- <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
- <li class="">선택</li>
- <li class="">옵션2</li>
- <li class="selected">상품옵션3</li>
- <li>상품옵션4</li>
- <li aria-disabled="true">
- <div>상품옵션15</div>
- <div>120,000원</div>
- </li>
- <li>상품옵션5</li>
- <li aria-disabled="true" data-soldout="true">
- <div>상품옵션6</div>
- <div>120,000원</div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="form_field">
- <div class="select_custom item_opt2" disabled>
- <div class="combo">
- <div class="select">옵션1</div>
- <ul class="list" style="display: none;">
- <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
- <li class="">선택</li>
- <li class="">옵션1</li>
- <li class="selected">옵션1</li>
- <li>옵션1</li>
- <li aria-disabled="true">
- <div>옵션1</div>
- <div>120,000원</div>
- </li>
- <li>옵션1</li>
- <li aria-disabled="true" data-soldout="true">
- <div>옵션1</div>
- <div>120,000원</div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- <!-- //옵션선택팝업 -->
- </div>
- <div class="body btPop_foot btPopAuto_foot">
- <!-- 총 결재금액, 하단버튼 -->
- <div class="pay_box">
- <div class="price_box">
- <p class="number">
- 총 <span>99</span>개
- </p>
- <p class="price">
- <span>
- 99,999,999<em>원</em>
- </span>
- </p>
- </div>
- <div class="btn_box">
- <button class="gift" id="btn_gift">
- <span><span>선물해보세요!</span></span>
- </button>
- <button class="cart" id="btn_shoppingBag_pop">쇼핑백</button>
- <button class="buyNow" id="btn_now_purchase">바로구매</button>
- </div>
- </div>
- </div>
- </div>
- <!-- 구매하기팝업 -->
- <!-- 쇼핑백팝업 -->
- <div id="shoppingBagModal">
- <div class="shoppingBag_box">
- <p>쇼핑백에 상품을 담았습니다.</p>
- <a href="#none" class="link_shoppingBag">쇼핑백 바로가기</a>
- </div>
- </div>
- <!-- //쇼핑백팝업 -->
- </div>
- <!-- 팝업영역 -->
- </section>
- <!-- ★ 컨텐츠 종료 -->
- <!-- 바닥메뉴 -->
- <div class="product_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
- <div class="share_like">
- <button class="share">공유하기</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>
- <!-- //바닥메뉴 -->
- </main>
- <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
- <form id="directOrderForm" method="POST" action="/order/noMember"></form>
- <script th:inline="javascript">
- /*<![CDATA[*/
-
- var cateNm = "";
-
- // 함께본 상품
- var fnGoodsTogetherSearch = function(params) {
- gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);
- }
-
- $(document).ready( function() {
-
- var params = new Object();
- params.goodsCd = [[${params.goodsCd}]];
- params.colorCd = [[${params.colorCd}]];
- params.viewDt = [[${params.viewDt}]];
- params.preview = [[${params.preview}]];
- params.adminYn = [[${params.adminYn}]];
- params.goodsType = [[${params.goodsType}]];
- params.supplyCompCd = [[${params.supplyCompCd}]];
- params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
- // selecter
- $(function(){
- var opt_selecter_item = new sCombo('.opt_select .select_custom.deal_opt_item');
- //var item_opt01 = new sCombo('.pd .pop_option_select .item_opt1');
- //var item_opt02 = new sCombo('.pd .pop_option_select .item_opt2');
- var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
- });
- //옵션변경 셀렉트
- var opt_selecter01 = new sCombo('.pd .pop_option_select .item_opt1');
- $('.pd .pop_option_select .select_custom .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- var opt_selecter02 = new sCombo('.pd .pop_option_select .item_opt2');
-
- //슬라이드 - 베스트리뷰
- var riviewSwiper = new Swiper('.pd .riview_box .area_slider .swiper-container', {
- slidesPerView: 1,
- spaceBetween: 8,
- loop: true,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
-
- //슬라이드 - 제품사진
- var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
- slidesPerView:1,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- //슬라이드 - 함께하면 할인되는 다다익선 상품
- var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
- slidesPerView: 3,
- spaceBetween: 8,
- });
- //슬라이드 - 이 상품과 함께 본 상품
- var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
- slidesPerView: 2,
- spaceBetween: 8,
- });
- //슬라이드 - STYLE24의 스타일링 추천
- var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
- slidesPerView: 1,
- spaceBetween: 0,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 3,
- spaceBetween: 8,
- });
- $(".pic_list > div").hide();
- $(".pic_list > div").eq(0).fadeIn();
- rcmdPicimgSwiper.on('slideChange', function () {
- var pic_index=this.activeIndex;
- $(".pic_list > div").hide();
- $(".pic_list > div").eq(pic_index).fadeIn();
- });
-
- //슬라이드 - 동일브랜드 상품 추천
- var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {
- slidesPerView: 3,
- spaceBetween: 8,
- });
- //슬라이드 - 이 상품과 비슷한 상품
- var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
- slidesPerView: 3,
- spaceBetween: 8,
- });
-
- //슬라이드 - 베스트리뷰팝업
- var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 1,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
-
- //슬라이드 - 포토,영상리뷰팝업
- var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 1,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
-
-
- //탭 - 사이즈정보 > 탭
- $(document).on('click','#infoSizePop .tab_nav ul li',function(e){
- $(this).addClass('active').siblings().removeClass('active');
- $('#infoSizePop .tab_cont_wrap .tab_cont').hide();
- $('#infoSizePop .tab_cont_wrap .tab_cont').eq($(this).index()).show();
- return false;
- });
- //탭 - 사이즈정보 > 서브탭
- $(document).on('click','#infoSizePop .sub_tab_nav ul li',function(e){
- var value=$(this).find("a").text();
- var catTxt=$(".category_open").text();
- console.log(value)
- $(this).addClass('active').siblings().removeClass('active');
- $(this).parents('.tab_cont').find('.sub_tab_cont').hide();
- $(this).parents('.tab_cont').find('.sub_tab_cont').eq($(this).index()).show();
- $(this).parents().parents().parents().parents().parents(".category_box").hide();
- $(this).parents().parents().parents().parents().parents(".category_box").prev(".category_open").text(value);
- return false;
- });
- //팝업 - 사이즈정보 > 서브탭 - 카테고리팝오픈
- $(document).on('click','#infoSizePop .category_open',function(e){
- $(this).siblings().show();
- return false;
- });
- $(document).on('click','#infoSizePop .category_close',function(e){
- $(this).parents().parents(".category_box").hide();
- return false;
- });
-
- //팝업 - 상품문의 리스트
- $(document).on('click','#btn_pdQnaList_pop',function(e){
- $("#pdQnaListPop").modal("show");
- return false;
- });
- //팝업 - 상품문의 작성
- $(document).on('click','#btn_pdQnaWrite_pop',function(e){
- $("#pdQnaWritePop").modal("show");
- return false;
- });
- //팝업 - 제품리뷰 > 카테고리팝오픈
- // 오픈
- $(document).on('click','.pd_review .category_open > li',function(e){
- var dataName=$(this).attr("data_name");
- $(".pd_review .category_box").show();
- $(".pd_review .category_list").find(".category").hide();
- $(".pd_review .category_list").find("#"+dataName).show();
- return false;
- });
- // 닫기
- $(document).on('click','.pd_review .category_box .category_close',function(e){
- $(".pd_review .category_box").hide();
- return false;
- });
- // 변경
- $(document).on('click','.pd_review .category ul > li',function(e){
- var num=$(".pd_review .category_open > li").length;
- var value=$(this).find("a").attr("data");
- var name=$(this).parent().parent().attr("id");
- $(this).parent().find("li").removeClass("active");
- $(this).addClass("active");
- for(var i=0; i < num; i++){
- var dataname=$(".pd_review .category_open > li").eq(i).attr("data_name");
- if(name==dataname){
- $(".pd_review .category_open > li").eq(i).find("span").text(value);
- }
- }
- return false;
- });
- // 포토,베스트리뷰숨김
- var review_open=$(".btn_review_open");
- $(document).on('click','.btn_review_open',function(e){
- $(this).toggleClass('active');
- $(this).next(".review_list").toggleClass('active');
- return false;
- });
-
-
- // =============구매하기팝업========================================================
- // pop open
- function popOpenScroll(){
- $('html, body').css({'overflow': 'hidden', 'height': '100%'});
- $('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
- event.preventDefault();
- event.stopPropagation();
- return false;
- });
- }
- // pop close
- function popClsScroll(){
- $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
- $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
- return false;
- }
- // pop close
- function popClsScroll2(){
- $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
- $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
- return false;
- }
- //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
- $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
- $(".Purchase_pop .pop_option_select").show();
- return false;
- });
- $(document).on('click','.Purchase_pop .close',function(e){
- $(".Purchase_pop .pop_option_select").hide();
- return false;
- })
- //팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업
- $(document).on('click','.pd_dealitem .item_prod .btn_default',function(e){
- $('.container').addClass('btPop_open');
- $(".Purchase_pop .pop_option_select").show();
- popOpenScroll();
- return false;
- });
- //팝업 - 딜상세팝업 구매하기버튼 > 옵션셀렉트팝업
- $(document).on('click','#pdDescrpPop .modal-footer button',function(e){
- $("#pdDescrpPop .close-modal ").click();
- $('.container').addClass('btPop_open');
- $(".Purchase_pop .pop_option_select").show();
- popOpenScroll();
- return false;
- });
- // ============================================================================//
-
- // =============딜리스트팝업========================================================
- //팝업 - 딜리뷰상품 리스트팝업
- $(document).on('click','.deal_listReview_open',function(e){
- $("#listReviewPop").show();
- return false;
- }).on('click','#listReviewPop .close, #listReviewPop .deal_list_select ul > li',function(e){
- $("#listReviewPop").hide();
- return false;
- });
- //팝업 - 딜문의상품 리스트팝업
- $(document).on('click','.deal_listQna_open',function(e){
- $("#listQnaPop").show();
- return false;
- }).on('click','#listQnaPop .close, #listQnaPop .deal_list_select ul > li',function(e){
- $("#listQnaPop").hide();
- return false;
- });
- //팝업 - 딜배송상품 리스트팝업
- $(document).on('click','.deal_listDelivery_open',function(e){
- $("#listDeliveryPop").show();
- return false;
- }).on('click','#listDeliveryPop .close, #listDeliveryPop .deal_list_select ul > li',function(e){
- $("#listDeliveryPop").hide();
- return false;
- });
- //팝업 - 딜상세정보 리스트팝업
- $(document).on('click','#pdDescrpPop .deal_listDescrp_open',function(e){
- $(this).toggleClass("active");
- $("#listDescrpPop").toggle();
- return false;
- }).on('click','#listDescrpPop .deal_list_select ul > li',function(e){
- $("#pdDescrpPop .deal_listDescrp_open").removeClass("active");
- $("#listDescrpPop").hide();
- return false;
- });
- // ============================================================================//
-
- //탭 - 딜상품 > 상품상세정보 탭
- $(document).on('click','.pd.deal .tab_detail_nav ul li',function(e){
- $(this).addClass('active').siblings().removeClass('active');
- $('.pd.deal .tab_detail_cont').hide();
- $('.pd.deal .tab_detail_cont').eq($(this).index()).show();
-
- /* //상품상세정보 호출
- $('.pd_review .cont_body').load('pd_review_pop.html');
- $('.pd_qnalist .cont_body').load('pd_qnalist_pop.html');
- $('.pd_delivery .cont_body').load('pd_delivery_pop.html');
- return false; */
- });
-
- //탭 - 딜상품 > 상세정보 탭 고정
- $(window).scroll(function(){
- var scrollTop= $(window).scrollTop();
- var tabTop=$('.pd_desc_wrap').offset().top;
- if (scrollTop >= tabTop){
- $('.tab_detail_nav').addClass('fix');
- } else {
- $('.tab_detail_nav').removeClass('fix');
- }
- });
- $('.Purchase_pop .btPop_close').click(function(){
- $('html, body').css({'overflow': 'visible', 'height': '100%'});
- $('.container').removeClass('btPop_open');
- autome.style.top = 100 + "%";
- return false;
- });
-
- //관심상품 등록
- $(document).on('click','.pd .itemLike',function(e){
- $(this).toggleClass('active');
- return false;
- });
-
-
- // 광고 스크립트용
- var goodsNavigation = [[${goodsNavigation}]];
- var cate1Nm = "";
- var cate2Nm = "";
- var cate3Nm = "";
- var cate4Nm = "";
- var cate5Nm = "";
- if (!gagajf.isNull(goodsNavigation)) {
- cate1Nm = goodsNavigation.cate1Nm;
- cate2Nm = goodsNavigation.cate2Nm;
- cate3Nm = goodsNavigation.cate3Nm;
- cate4Nm = goodsNavigation.cate4Nm;
- cate5Nm = goodsNavigation.cate3Nm;
-
- if (!gagajf.isNull(cate1Nm)) {
- cateNm += cate1Nm;
- }
- if (!gagajf.isNull(cate2Nm)) {
- cateNm += ' > ' + cate2Nm;
- }
- if (!gagajf.isNull(cate3Nm)) {
- cateNm += ' > ' + cate3Nm;
- }
- if (!gagajf.isNull(cate4Nm)) {
- cateNm += ' > ' + cate4Nm;
- }
- if (!gagajf.isNull(cate5Nm)) {
- cateNm += ' > ' + cate5Nm;
- }
- }
- // 광고 스크립트용
-
- var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
- var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
- var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
-
- <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
- $("meta[property='og:url']").attr('content', snsUrl);
- $("meta[property='og:title']").attr('content', snsGoodsFullNm);
- $("meta[property='og:description']").attr('content', snsGoodsFullNm);
- $("meta[property='og:image']").attr('content', snsGoodsImg);
- <!-- 트위터 관련 메타태그 -->
- $("meta[name='twitter:url']").attr('content', snsUrl);
- $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
- $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
- $("meta[name='twitter:image']").attr('content', snsGoodsImg);
- // 추천솔류션 meta 설정
- $("meta[property='eg:type']").attr('content',"product");
- $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
- $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
- $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
- $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
- $("meta[property='eg:itemUrl']").attr('content',snsUrl);
- $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
- $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
- $("meta[property='eg:category1']").attr('content',cate1Nm);
- $("meta[property='eg:category2']").attr('content',cate2Nm);
- $("meta[property='eg:category3']").attr('content',cate3Nm);
- $("meta[property='eg:category4']").attr('content',cate4Nm);
- $("meta[property='eg:category5']").attr('content',cate5Nm);
- $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
- $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
- $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
- $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
- $("meta[property='eg:stock']").attr('content',"");
- $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
- $("meta[property='eg:description']").attr('content',null);
- $("meta[property='eg:extraImage']").attr('content',null);
- $("meta[property='eg:locale']").attr('content',"KR");
- $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
- $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
-
-
- // 탭별 선택시 기본 상품 설정
- let selIdx = 0;
- $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').each(function() {
- if (typeof ($(this).attr('aria-disabled')) == 'undefined' || !$(this).attr('aria-disabled')){
- return false;
- }
- selIdx ++;
- });
- $('.pd_pop.pd_listReview_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
-
- $('.pd_pop.pd_listQna_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
-
- $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
- });
-
- /*]]>*/
- </script>
- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
- <!-- 광고 스크립트 -->
- <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
- <!-- //광고 스크립트 -->
- </th:block>
- </body>
- </html>
|