GoodsDealDetailFormMob.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="mob/common/layout/GoodsLayoutMob">
  6. <!--
  7. *******************************************************************************
  8. * @source : GoodsDealDetailFormMob.html
  9. * @desc : 딜 상품상세 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.04.15 eskim 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <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')}">
  22. <!-- ★ 컨텐츠 시작 -->
  23. <section class="pd_detail">
  24. <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
  25. <div class="pd_info">
  26. <div class="pd_info1" data-speed="10">
  27. <div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">
  28. <div class="thumb_box">
  29. <div class="area_slider">
  30. <div class="swiper-container thumb_list">
  31. <div class="swiper-wrapper">
  32. <th:block th:each="goodsImg, status : ${goodsImgList}">
  33. <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
  34. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  35. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  36. <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 -->
  37. </th:block>
  38. </div>
  39. <!-- Add Pagination -->
  40. <div class="swiper-pagination"></div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="inner">
  47. <!-- 210409_ 구조변경 : .covered 추가 -->
  48. <div class="covered">
  49. <div class="timer_box" style="display:none;">
  50. <p>
  51. <span class="tt">남은시간</span>
  52. <span class="timer">
  53. <em id="d-days">0</em>
  54. <em id="d-hours">0</em>
  55. <em id="d-minutes">0</em>
  56. <em id="d-seconds">0</em>
  57. </span>
  58. </p>
  59. </div>
  60. <div class="descript_box">
  61. <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
  62. <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
  63. <p class="price_blk">
  64. <span class="sale_price" ><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원 ~</span>
  65. </p>
  66. <div class="btn_group_flex">
  67. <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
  73. <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
  74. </div>
  75. <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  76. (goodsCouponList != null and !goodsCouponList.empty) or
  77. (tmtbList != null and !tmtbList.empty) or
  78. (freeGoodsList != null and !freeGoodsList.empty)}" >
  79. <div class="benefit_box">
  80. <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or (tmtbList != null and !tmtbList.empty)}">
  81. <dt>쇼핑혜택</dt>
  82. <dd>
  83. <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  84. <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
  85. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  86. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  87. </em> 쿠폰 할인</span>
  88. </th:block>
  89. <th:block th:if="${tmtbList != null and !tmtbList.empty}">
  90. <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
  91. <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
  92. <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> 할인
  93. </span>
  94. </th:block>
  95. <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
  96. <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
  97. <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'Y'}" th:text="${'외 택1'}"></th:block></span>
  98. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  99. </dd>
  100. </dl>
  101. <dl class="bnf_card">
  102. <dt>카드혜택</dt>
  103. <dd>
  104. <th:block th:each="cardInfo, status : ${cardInfoList}">
  105. <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>
  106. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  107. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  108. </th:block>
  109. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  110. </dd>
  111. </dl>
  112. </div>
  113. </div>
  114. </div>
  115. <!-- //***** 상품소개영역 ***** -->
  116. <th:block th:include="~{mob/goods/GoodsIncludeFormMob:: goodsDealComposeForm}"></th:block>
  117. <div class="inner" style="display:none;">
  118. <div class="recommendedArea">
  119. <!-- 이상품과 함께 본 상품영역-->
  120. <div class="pd_clickother" id="goodsTogetherbArea">
  121. </div>
  122. <!-- //이상품과 함께 본 상품영역-->
  123. </div>
  124. </div>
  125. <!-- 팝업영역 -->
  126. <div>
  127. <!-- 구매하기팝업 -->
  128. <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
  129. <a class="btn btPop_close">Close </a>
  130. <div class="header btPop_head btPopAuto_head">
  131. 구매하기팝업
  132. </div>
  133. <div class="body btPop_body btPopAuto_body">
  134. <div class="option_result op1">
  135. <!-- 옵션 -->
  136. <div class="option_box">
  137. <div class="opt_select">
  138. <form class="form_wrap">
  139. <div class="form_field">
  140. <div class="select_custom option_open">
  141. <div class="combo">
  142. <div class="select">상품옵션06</div>
  143. </div>
  144. </div>
  145. </div>
  146. </form>
  147. </div>
  148. <div class="opt_result">
  149. <div class="result_item">
  150. <div class="opt_header">
  151. <div class="bundle">
  152. <span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>
  153. <span class="item_option">블루그레이/S</span>
  154. </div>
  155. </div>
  156. <div class="number_count">
  157. <span class="minus"><em class="sr-only">감소</em></span>
  158. <input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>
  159. <span class="plus"><em class="sr-only">추가</em></span>
  160. </div>
  161. <div class="item_price">
  162. <p><em>99,999,999</em>원</p>
  163. </div>
  164. <button type="button" class="btn_delete_item"><span>삭제</span></button>
  165. </div>
  166. <div class="result_item">
  167. <div class="opt_header">
  168. <div class="bundle">
  169. <span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>
  170. <span class="item_option">블루그레이/S</span>
  171. </div>
  172. </div>
  173. <div class="number_count">
  174. <span class="minus"><em class="sr-only">감소</em></span>
  175. <input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>
  176. <span class="plus"><em class="sr-only">추가</em></span>
  177. </div>
  178. <div class="item_price">
  179. <p><em>99,999,999</em>원</p>
  180. </div>
  181. <button type="button" class="btn_delete_item"><span>삭제</span></button>
  182. </div>
  183. </div>
  184. </div>
  185. <!-- 네이버결제 -->
  186. <div class="npay_box" style="display:none;">
  187. <div class="np_head">
  188. <div><img src="/images/mo/img_npay_txt.png" alt="NAVER 네이버 ID로 간편구매 네이버페이"></div>
  189. <div><button><img src="/images/mo/btn_npay_txt.png" alt="Npay 구매"></button></div>
  190. </div>
  191. <div class="np_body">
  192. <a href="#none"><em>[멥버십]</em>첫달 무료가입하고 추가 4%!</a>
  193. </div>
  194. </div>
  195. </div>
  196. <!-- 옵션선택팝업 -->
  197. <div class="pop_option_select">
  198. <div class="close">닫기</div>
  199. <div class="pp_body">
  200. <div class="pp_cont">
  201. <div class="opt_select">
  202. <div class="opt_header">
  203. <span class="title">옵션선택</span>
  204. <div class="check_excluding form_field">
  205. <div>
  206. <input id="excluding" type="checkbox" onclick='getGuidance(event)'><label for="excluding"> <span>품절제외</span> </label>
  207. </div>
  208. <div class="guidance" >
  209. <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
  210. <p><span>99</span>개 품절 옵션이 제외되었습니다</p>
  211. </div>
  212. <script>
  213. function getGuidance(event) {
  214. if(event.target.checked){
  215. $(".guidance").addClass("ontoast");
  216. setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
  217. }
  218. }
  219. </script>
  220. </div>
  221. </div>
  222. <form class="form_wrap">
  223. <div class="form_field mb20">
  224. <div class="select_custom deal_opt_item active">
  225. <div class="combo">
  226. <div class="select">상품</div>
  227. <ul class="list">
  228. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  229. <li class="">
  230. <div class="item_prod">
  231. <div class="item_state">
  232. <a href="javascript:void(0)" class="itemLink">
  233. <div class="itemPic">
  234. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  235. </div>
  236. <div class="itemName"><span class="tit_option">[상품1]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  237. <p class="itemPrice">
  238. 134,100
  239. <span class="itemPrice_original">149,000</span>
  240. <span class="itemPercent">30%</span>
  241. </p>
  242. </a>
  243. </div>
  244. </div>
  245. </li>
  246. <li class="">
  247. <div class="item_prod">
  248. <div class="item_state">
  249. <a href="javascript:void(0)" class="itemLink">
  250. <div class="itemPic">
  251. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  252. </div>
  253. <div class="itemName"><span class="tit_option">[상품2]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  254. <p class="itemPrice">
  255. 134,100
  256. <span class="itemPrice_original">149,000</span>
  257. <span class="itemPercent">30%</span>
  258. </p>
  259. </a>
  260. </div>
  261. </div>
  262. </li>
  263. <li class="selected">
  264. <div class="item_prod">
  265. <div class="item_state">
  266. <a href="javascript:void(0)" class="itemLink">
  267. <div class="itemPic">
  268. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  269. </div>
  270. <div class="itemName"><span class="tit_option">[상품3]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  271. <p class="itemPrice">
  272. 134,100
  273. <span class="itemPrice_original">149,000</span>
  274. <span class="itemPercent">30%</span>
  275. </p>
  276. </a>
  277. </div>
  278. </div>
  279. </li>
  280. <li aria-disabled="true">
  281. <div class="item_prod">
  282. <div class="item_state">
  283. <a href="javascript:void(0)" class="itemLink">
  284. <div class="itemPic">
  285. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  286. </div>
  287. <div class="itemName"><span class="tit_option">[상품4]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  288. <p class="itemPrice">
  289. 134,100
  290. <span class="itemPrice_original">149,000</span>
  291. <span class="itemPercent">30%</span>
  292. </p>
  293. </a>
  294. </div>
  295. </div>
  296. </li>
  297. <li>
  298. <div class="item_prod">
  299. <div class="item_state">
  300. <a href="javascript:void(0)" class="itemLink">
  301. <div class="itemPic">
  302. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  303. </div>
  304. <div class="itemName"><span class="tit_option">[상품5]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  305. <p class="itemPrice">
  306. 134,100
  307. <span class="itemPrice_original">149,000</span>
  308. <span class="itemPercent">30%</span>
  309. </p>
  310. </a>
  311. </div>
  312. </div>
  313. </li>
  314. <li aria-disabled="true" data-soldout="true">
  315. <div class="item_prod">
  316. <div class="item_state">
  317. <a href="javascript:void(0)" class="itemLink">
  318. <div class="itemPic">
  319. <img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
  320. </div>
  321. <div class="itemName"><span class="tit_option">[상품6]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
  322. <p class="itemPrice">
  323. 134,100
  324. <span class="itemPrice_original">149,000</span>
  325. <span class="itemPercent">30%</span>
  326. </p>
  327. </a>
  328. </div>
  329. </div>
  330. </li>
  331. </ul>
  332. </div>
  333. </div>
  334. </div>
  335. <div class="form_field">
  336. <div class="select_custom item_opt1" disabled>
  337. <div class="combo">
  338. <div class="select">옵션1</div>
  339. <ul class="list" style="display: none;">
  340. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  341. <li class="">선택</li>
  342. <li class="">옵션2</li>
  343. <li class="selected">상품옵션3</li>
  344. <li>상품옵션4</li>
  345. <li aria-disabled="true">
  346. <div>상품옵션15</div>
  347. <div>120,000원</div>
  348. </li>
  349. <li>상품옵션5</li>
  350. <li aria-disabled="true" data-soldout="true">
  351. <div>상품옵션6</div>
  352. <div>120,000원</div>
  353. </li>
  354. </ul>
  355. </div>
  356. </div>
  357. </div>
  358. <div class="form_field">
  359. <div class="select_custom item_opt2" disabled>
  360. <div class="combo">
  361. <div class="select">옵션1</div>
  362. <ul class="list" style="display: none;">
  363. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  364. <li class="">선택</li>
  365. <li class="">옵션1</li>
  366. <li class="selected">옵션1</li>
  367. <li>옵션1</li>
  368. <li aria-disabled="true">
  369. <div>옵션1</div>
  370. <div>120,000원</div>
  371. </li>
  372. <li>옵션1</li>
  373. <li aria-disabled="true" data-soldout="true">
  374. <div>옵션1</div>
  375. <div>120,000원</div>
  376. </li>
  377. </ul>
  378. </div>
  379. </div>
  380. </div>
  381. </form>
  382. </div>
  383. </div>
  384. </div>
  385. </div>
  386. <!-- //옵션선택팝업 -->
  387. </div>
  388. <div class="body btPop_foot btPopAuto_foot">
  389. <!-- 총 결재금액, 하단버튼 -->
  390. <div class="pay_box">
  391. <div class="price_box">
  392. <p class="number">
  393. 총&nbsp;<span>99</span>개
  394. </p>
  395. <p class="price">
  396. <span>
  397. 99,999,999<em>원</em>
  398. </span>
  399. </p>
  400. </div>
  401. <div class="btn_box">
  402. <button class="gift" id="btn_gift">
  403. <span><span>선물해보세요!</span></span>
  404. </button>
  405. <button class="cart" id="btn_shoppingBag_pop">쇼핑백</button>
  406. <button class="buyNow" id="btn_now_purchase">바로구매</button>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. <!-- 구매하기팝업 -->
  412. <!-- 쇼핑백팝업 -->
  413. <div id="shoppingBagModal">
  414. <div class="shoppingBag_box">
  415. <p>쇼핑백에 상품을 담았습니다.</p>
  416. <a href="#none" class="link_shoppingBag">쇼핑백 바로가기</a>
  417. </div>
  418. </div>
  419. <!-- //쇼핑백팝업 -->
  420. </div>
  421. <!-- 팝업영역 -->
  422. </section>
  423. <!-- ★ 컨텐츠 종료 -->
  424. <!-- 바닥메뉴 -->
  425. <div class="product_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
  426. <div class="share_like">
  427. <button class="share">공유하기</button>
  428. <button class="like">위시리스트</button>
  429. </div>
  430. <div class="prd_buy">
  431. <button class="buying btPop_auto" id="btn_purchase">구매하기</button>
  432. <button class="cantbuying">SOLD OUT</button>
  433. </div>
  434. </div>
  435. <!-- //바닥메뉴 -->
  436. </main>
  437. <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
  438. <form id="directOrderForm" method="POST" action="/order/noMember"></form>
  439. <script th:inline="javascript">
  440. /*<![CDATA[*/
  441. var cateNm = "";
  442. // 함께본 상품
  443. var fnGoodsTogetherSearch = function(params) {
  444. gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);
  445. }
  446. $(document).ready( function() {
  447. var params = new Object();
  448. params.goodsCd = [[${params.goodsCd}]];
  449. params.colorCd = [[${params.colorCd}]];
  450. params.viewDt = [[${params.viewDt}]];
  451. params.preview = [[${params.preview}]];
  452. params.adminYn = [[${params.adminYn}]];
  453. params.goodsType = [[${params.goodsType}]];
  454. params.supplyCompCd = [[${params.supplyCompCd}]];
  455. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  456. // selecter
  457. $(function(){
  458. var opt_selecter_item = new sCombo('.opt_select .select_custom.deal_opt_item');
  459. //var item_opt01 = new sCombo('.pd .pop_option_select .item_opt1');
  460. //var item_opt02 = new sCombo('.pd .pop_option_select .item_opt2');
  461. var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
  462. });
  463. //옵션변경 셀렉트
  464. var opt_selecter01 = new sCombo('.pd .pop_option_select .item_opt1');
  465. $('.pd .pop_option_select .select_custom .combo .list > li').click(function(e) {
  466. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  467. return false;
  468. });
  469. var opt_selecter02 = new sCombo('.pd .pop_option_select .item_opt2');
  470. //슬라이드 - 베스트리뷰
  471. var riviewSwiper = new Swiper('.pd .riview_box .area_slider .swiper-container', {
  472. slidesPerView: 1,
  473. spaceBetween: 8,
  474. loop: true,
  475. pagination: {
  476. el: '.swiper-pagination',
  477. type: 'fraction',
  478. },
  479. });
  480. //슬라이드 - 제품사진
  481. var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  482. slidesPerView:1,
  483. pagination: {
  484. el: '.swiper-pagination',
  485. type: 'fraction',
  486. },
  487. });
  488. //슬라이드 - 함께하면 할인되는 다다익선 상품
  489. var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
  490. slidesPerView: 3,
  491. spaceBetween: 8,
  492. });
  493. //슬라이드 - 이 상품과 함께 본 상품
  494. var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
  495. slidesPerView: 2,
  496. spaceBetween: 8,
  497. });
  498. //슬라이드 - STYLE24의 스타일링 추천
  499. var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
  500. slidesPerView: 1,
  501. spaceBetween: 0,
  502. pagination: {
  503. el: '.swiper-pagination',
  504. type: 'fraction',
  505. },
  506. });
  507. var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
  508. observer: true,
  509. observeParents: true,
  510. slidesPerView: 3,
  511. spaceBetween: 8,
  512. });
  513. $(".pic_list > div").hide();
  514. $(".pic_list > div").eq(0).fadeIn();
  515. rcmdPicimgSwiper.on('slideChange', function () {
  516. var pic_index=this.activeIndex;
  517. $(".pic_list > div").hide();
  518. $(".pic_list > div").eq(pic_index).fadeIn();
  519. });
  520. //슬라이드 - 동일브랜드 상품 추천
  521. var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {
  522. slidesPerView: 3,
  523. spaceBetween: 8,
  524. });
  525. //슬라이드 - 이 상품과 비슷한 상품
  526. var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
  527. slidesPerView: 3,
  528. spaceBetween: 8,
  529. });
  530. //슬라이드 - 베스트리뷰팝업
  531. var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
  532. observer: true,
  533. observeParents: true,
  534. slidesPerView: 1,
  535. pagination: {
  536. el: '.swiper-pagination',
  537. type: 'fraction',
  538. },
  539. });
  540. //슬라이드 - 포토,영상리뷰팝업
  541. var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
  542. observer: true,
  543. observeParents: true,
  544. slidesPerView: 1,
  545. pagination: {
  546. el: '.swiper-pagination',
  547. type: 'fraction',
  548. },
  549. });
  550. //탭 - 사이즈정보 > 탭
  551. $(document).on('click','#infoSizePop .tab_nav ul li',function(e){
  552. $(this).addClass('active').siblings().removeClass('active');
  553. $('#infoSizePop .tab_cont_wrap .tab_cont').hide();
  554. $('#infoSizePop .tab_cont_wrap .tab_cont').eq($(this).index()).show();
  555. return false;
  556. });
  557. //탭 - 사이즈정보 > 서브탭
  558. $(document).on('click','#infoSizePop .sub_tab_nav ul li',function(e){
  559. var value=$(this).find("a").text();
  560. var catTxt=$(".category_open").text();
  561. console.log(value)
  562. $(this).addClass('active').siblings().removeClass('active');
  563. $(this).parents('.tab_cont').find('.sub_tab_cont').hide();
  564. $(this).parents('.tab_cont').find('.sub_tab_cont').eq($(this).index()).show();
  565. $(this).parents().parents().parents().parents().parents(".category_box").hide();
  566. $(this).parents().parents().parents().parents().parents(".category_box").prev(".category_open").text(value);
  567. return false;
  568. });
  569. //팝업 - 사이즈정보 > 서브탭 - 카테고리팝오픈
  570. $(document).on('click','#infoSizePop .category_open',function(e){
  571. $(this).siblings().show();
  572. return false;
  573. });
  574. $(document).on('click','#infoSizePop .category_close',function(e){
  575. $(this).parents().parents(".category_box").hide();
  576. return false;
  577. });
  578. //팝업 - 상품문의 리스트
  579. $(document).on('click','#btn_pdQnaList_pop',function(e){
  580. $("#pdQnaListPop").modal("show");
  581. return false;
  582. });
  583. //팝업 - 상품문의 작성
  584. $(document).on('click','#btn_pdQnaWrite_pop',function(e){
  585. $("#pdQnaWritePop").modal("show");
  586. return false;
  587. });
  588. //팝업 - 제품리뷰 > 카테고리팝오픈
  589. // 오픈
  590. $(document).on('click','.pd_review .category_open > li',function(e){
  591. var dataName=$(this).attr("data_name");
  592. $(".pd_review .category_box").show();
  593. $(".pd_review .category_list").find(".category").hide();
  594. $(".pd_review .category_list").find("#"+dataName).show();
  595. return false;
  596. });
  597. // 닫기
  598. $(document).on('click','.pd_review .category_box .category_close',function(e){
  599. $(".pd_review .category_box").hide();
  600. return false;
  601. });
  602. // 변경
  603. $(document).on('click','.pd_review .category ul > li',function(e){
  604. var num=$(".pd_review .category_open > li").length;
  605. var value=$(this).find("a").attr("data");
  606. var name=$(this).parent().parent().attr("id");
  607. $(this).parent().find("li").removeClass("active");
  608. $(this).addClass("active");
  609. for(var i=0; i < num; i++){
  610. var dataname=$(".pd_review .category_open > li").eq(i).attr("data_name");
  611. if(name==dataname){
  612. $(".pd_review .category_open > li").eq(i).find("span").text(value);
  613. }
  614. }
  615. return false;
  616. });
  617. // 포토,베스트리뷰숨김
  618. var review_open=$(".btn_review_open");
  619. $(document).on('click','.btn_review_open',function(e){
  620. $(this).toggleClass('active');
  621. $(this).next(".review_list").toggleClass('active');
  622. return false;
  623. });
  624. // =============구매하기팝업========================================================
  625. // pop open
  626. function popOpenScroll(){
  627. $('html, body').css({'overflow': 'hidden', 'height': '100%'});
  628. $('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
  629. event.preventDefault();
  630. event.stopPropagation();
  631. return false;
  632. });
  633. }
  634. // pop close
  635. function popClsScroll(){
  636. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  637. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  638. return false;
  639. }
  640. // pop close
  641. function popClsScroll2(){
  642. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  643. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  644. return false;
  645. }
  646. //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
  647. $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
  648. $(".Purchase_pop .pop_option_select").show();
  649. return false;
  650. });
  651. $(document).on('click','.Purchase_pop .close',function(e){
  652. $(".Purchase_pop .pop_option_select").hide();
  653. return false;
  654. })
  655. //팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업
  656. $(document).on('click','.pd_dealitem .item_prod .btn_default',function(e){
  657. $('.container').addClass('btPop_open');
  658. $(".Purchase_pop .pop_option_select").show();
  659. popOpenScroll();
  660. return false;
  661. });
  662. //팝업 - 딜상세팝업 구매하기버튼 > 옵션셀렉트팝업
  663. $(document).on('click','#pdDescrpPop .modal-footer button',function(e){
  664. $("#pdDescrpPop .close-modal ").click();
  665. $('.container').addClass('btPop_open');
  666. $(".Purchase_pop .pop_option_select").show();
  667. popOpenScroll();
  668. return false;
  669. });
  670. // ============================================================================//
  671. // =============딜리스트팝업========================================================
  672. //팝업 - 딜리뷰상품 리스트팝업
  673. $(document).on('click','.deal_listReview_open',function(e){
  674. $("#listReviewPop").show();
  675. return false;
  676. }).on('click','#listReviewPop .close, #listReviewPop .deal_list_select ul > li',function(e){
  677. $("#listReviewPop").hide();
  678. return false;
  679. });
  680. //팝업 - 딜문의상품 리스트팝업
  681. $(document).on('click','.deal_listQna_open',function(e){
  682. $("#listQnaPop").show();
  683. return false;
  684. }).on('click','#listQnaPop .close, #listQnaPop .deal_list_select ul > li',function(e){
  685. $("#listQnaPop").hide();
  686. return false;
  687. });
  688. //팝업 - 딜배송상품 리스트팝업
  689. $(document).on('click','.deal_listDelivery_open',function(e){
  690. $("#listDeliveryPop").show();
  691. return false;
  692. }).on('click','#listDeliveryPop .close, #listDeliveryPop .deal_list_select ul > li',function(e){
  693. $("#listDeliveryPop").hide();
  694. return false;
  695. });
  696. //팝업 - 딜상세정보 리스트팝업
  697. $(document).on('click','#pdDescrpPop .deal_listDescrp_open',function(e){
  698. $(this).toggleClass("active");
  699. $("#listDescrpPop").toggle();
  700. return false;
  701. }).on('click','#listDescrpPop .deal_list_select ul > li',function(e){
  702. $("#pdDescrpPop .deal_listDescrp_open").removeClass("active");
  703. $("#listDescrpPop").hide();
  704. return false;
  705. });
  706. // ============================================================================//
  707. //탭 - 딜상품 > 상품상세정보 탭
  708. $(document).on('click','.pd.deal .tab_detail_nav ul li',function(e){
  709. $(this).addClass('active').siblings().removeClass('active');
  710. $('.pd.deal .tab_detail_cont').hide();
  711. $('.pd.deal .tab_detail_cont').eq($(this).index()).show();
  712. /* //상품상세정보 호출
  713. $('.pd_review .cont_body').load('pd_review_pop.html');
  714. $('.pd_qnalist .cont_body').load('pd_qnalist_pop.html');
  715. $('.pd_delivery .cont_body').load('pd_delivery_pop.html');
  716. return false; */
  717. });
  718. //탭 - 딜상품 > 상세정보 탭 고정
  719. $(window).scroll(function(){
  720. var scrollTop= $(window).scrollTop();
  721. var tabTop=$('.pd_desc_wrap').offset().top;
  722. if (scrollTop >= tabTop){
  723. $('.tab_detail_nav').addClass('fix');
  724. } else {
  725. $('.tab_detail_nav').removeClass('fix');
  726. }
  727. });
  728. $('.Purchase_pop .btPop_close').click(function(){
  729. $('html, body').css({'overflow': 'visible', 'height': '100%'});
  730. $('.container').removeClass('btPop_open');
  731. autome.style.top = 100 + "%";
  732. return false;
  733. });
  734. //관심상품 등록
  735. $(document).on('click','.pd .itemLike',function(e){
  736. $(this).toggleClass('active');
  737. return false;
  738. });
  739. // 광고 스크립트용
  740. var goodsNavigation = [[${goodsNavigation}]];
  741. var cate1Nm = "";
  742. var cate2Nm = "";
  743. var cate3Nm = "";
  744. var cate4Nm = "";
  745. var cate5Nm = "";
  746. if (!gagajf.isNull(goodsNavigation)) {
  747. cate1Nm = goodsNavigation.cate1Nm;
  748. cate2Nm = goodsNavigation.cate2Nm;
  749. cate3Nm = goodsNavigation.cate3Nm;
  750. cate4Nm = goodsNavigation.cate4Nm;
  751. cate5Nm = goodsNavigation.cate3Nm;
  752. if (!gagajf.isNull(cate1Nm)) {
  753. cateNm += cate1Nm;
  754. }
  755. if (!gagajf.isNull(cate2Nm)) {
  756. cateNm += ' > ' + cate2Nm;
  757. }
  758. if (!gagajf.isNull(cate3Nm)) {
  759. cateNm += ' > ' + cate3Nm;
  760. }
  761. if (!gagajf.isNull(cate4Nm)) {
  762. cateNm += ' > ' + cate4Nm;
  763. }
  764. if (!gagajf.isNull(cate5Nm)) {
  765. cateNm += ' > ' + cate5Nm;
  766. }
  767. }
  768. // 광고 스크립트용
  769. var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
  770. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
  771. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  772. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  773. $("meta[property='og:url']").attr('content', snsUrl);
  774. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  775. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  776. $("meta[property='og:image']").attr('content', snsGoodsImg);
  777. <!-- 트위터 관련 메타태그 -->
  778. $("meta[name='twitter:url']").attr('content', snsUrl);
  779. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  780. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  781. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  782. // 추천솔류션 meta 설정
  783. $("meta[property='eg:type']").attr('content',"product");
  784. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  785. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  786. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  787. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  788. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  789. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  790. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  791. $("meta[property='eg:category1']").attr('content',cate1Nm);
  792. $("meta[property='eg:category2']").attr('content',cate2Nm);
  793. $("meta[property='eg:category3']").attr('content',cate3Nm);
  794. $("meta[property='eg:category4']").attr('content',cate4Nm);
  795. $("meta[property='eg:category5']").attr('content',cate5Nm);
  796. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  797. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  798. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  799. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  800. $("meta[property='eg:stock']").attr('content',"");
  801. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
  802. $("meta[property='eg:description']").attr('content',null);
  803. $("meta[property='eg:extraImage']").attr('content',null);
  804. $("meta[property='eg:locale']").attr('content',"KR");
  805. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  806. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  807. // 탭별 선택시 기본 상품 설정
  808. let selIdx = 0;
  809. $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').each(function() {
  810. if (typeof ($(this).attr('aria-disabled')) == 'undefined' || !$(this).attr('aria-disabled')){
  811. return false;
  812. }
  813. selIdx ++;
  814. });
  815. $('.pd_pop.pd_listReview_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  816. $('.pd_pop.pd_listQna_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  817. $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  818. });
  819. /*]]>*/
  820. </script>
  821. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  822. <!-- 광고 스크립트 -->
  823. <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
  824. <!-- //광고 스크립트 -->
  825. </th:block>
  826. </body>
  827. </html>