GoodsDealDetailFormWeb.html 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240
  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="web/common/layout/DefaultLayoutWeb">
  6. <!--
  7. *******************************************************************************
  8. * @source : GoodsDetailFormWeb.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.03.02 eskim 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <script src="/ux/pc/js/ion.rangeSlider.min.js"></script>
  22. <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  23. <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.pc.js.url')}" src="" charset="UTF-8"></script>
  24. <script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
  25. <form id="nPayForm" name="nPayForm"></form>
  26. <div id="container" class="container pd deal" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
  27. <div class="wrap">
  28. <!-- 상품 대표설명 -->
  29. <div class="content pd_detail">
  30. <div class="cont_head">
  31. <h3 class="sr-only">상품 대표설명</h3>
  32. </div>
  33. <div class="cont_body">
  34. <!-- CONT-BODY -->
  35. <div class="item_detail">
  36. <div class="area_pic">
  37. <div class="thumb_nav_wrap" th:if="${goodsImgList != null and !goodsImgList.empty}" >
  38. <div class="thumbnav">
  39. <div class="swiper-container">
  40. <div class="swiper-wrapper">
  41. <th:block th:each="goodsImg, status : ${goodsImgList}">
  42. <div class="swiper-slide" th:classappend="${status.first}? 'on' : ''"
  43. th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
  44. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  45. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  46. <a th:href="${'#navLocate'+ status.count}"><span class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=48'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></span></a></div>
  47. </th:block>
  48. </div>
  49. </div>
  50. <div class="swiper-button-next"></div>
  51. <div class="swiper-button-prev"></div>
  52. </div>
  53. </div>
  54. <div class="thumb_list_wrap" th:if="${goodsImgList != null and !goodsImgList.empty}" >
  55. <ul>
  56. <th:block th:each="goodsImg, status : ${goodsImgList}">
  57. <li th:id="${'navLocate'+ status.count}" th:classappend="${status.first}? 'on' : ''"
  58. th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
  59. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  60. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  61. <a href="javascript:void(0);"><span class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=558'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></span></a></li>
  62. </th:block>
  63. </ul>
  64. </div>
  65. </div>
  66. <form name="cartForm" id="cartForm" method="post">
  67. <input type="hidden" name="mode">
  68. <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
  69. <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
  70. <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
  71. <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
  72. <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
  73. <input type="hidden" name="optCd" />
  74. <input type="hidden" name="optCd1" />
  75. <input type="hidden" name="optCd2" />
  76. <input type="hidden" name="addPrice" />
  77. <input type="hidden" name="ordQty" />
  78. <input type="hidden" name="stock" />
  79. <input type="hidden" name="minOrdQty"/>
  80. <input type="hidden" name="maxOrdQty"/>
  81. <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
  82. <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
  83. <div class="area_desc">
  84. <div class="desc_wrap">
  85. <div class="timer_box" style="display:none;">
  86. <p>
  87. <span class="tit">남은시간</span>
  88. <span class="timer">
  89. <em id="d-days">0</em>
  90. <em id="d-hours">0</em>
  91. <em id="d-minutes">0</em>
  92. <em id="d-seconds">0</em>
  93. </span>
  94. </p>
  95. </div>
  96. <div class="descript_box">
  97. <div class="desc_top">
  98. <div class="shareSet">
  99. <button class="btn_share" data-name="openShare">공유하기</button>
  100. <th:block th:include="~{web/goods/GoodsIncludeFormWeb :: goodsSnsForm}"></th:block>
  101. </div>
  102. <button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${params.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">관심상품 추가</button>
  103. </div>
  104. <div class="desc_info">
  105. <div class="title_blk">
  106. <span class="comment" th:text="${goodsInfo.goodsTnm}">
  107. #본사 직영 인기캐주얼 특가전
  108. </span>
  109. <span class="name" th:text="${goodsInfo.goodsFullNm}">
  110. [NBA외] 본사 직영~ 봄 신상 야구모자/백팩 외 99종 무료배송!
  111. </span>
  112. </div>
  113. <div class="price_blk">
  114. <span class="sale_price">
  115. <em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원 ~
  116. </span>
  117. <button type="button" id="btn_saleCoupon_pop" class="btn btn_primary btn_sm btn_coupon" th:if="${goodsCouponList != null and !goodsCouponList.empty}" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]] )"><span>쿠폰받기</span></button>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="benefit_box" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  122. (goodsCouponList != null and !goodsCouponList.empty)
  123. }" >
  124. <dl>
  125. <div class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or
  126. (tmtbList != null and !tmtbList.empty) or
  127. (freeGoodsList != null and !freeGoodsList.empty)}" >
  128. <dt>쇼핑혜택</dt>
  129. <dd>
  130. <span th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  131. <th:block th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">
  132. 최대 <em class="c_primary" >
  133. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  134. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  135. </em> 쿠폰 할인
  136. </th:block>
  137. </span>
  138. <span th:if="${tmtbList != null and !tmtbList.empty}">
  139. <th:block th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
  140. <em class="c_primary"><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
  141. <em class="c_primary"><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
  142. </th:block>
  143. </span>
  144. <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
  145. <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
  146. <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'Y'}" th:text="${'외 택1'}"></th:block></th:block></span>
  147. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  148. </dd>
  149. </div>
  150. <div class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
  151. <dt>카드혜택</dt>
  152. <dd>
  153. <th:block th:each="cardInfo, status : ${cardInfoList}">
  154. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em class="c_primary"><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
  155. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  156. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  157. </th:block>
  158. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  159. </dd>
  160. </div>
  161. </dl>
  162. </div>
  163. <div class="option_box">
  164. <div class="opt_select">
  165. <div class="form_field">
  166. <div class="select_custom deal_opt_item">
  167. <div class="combo">
  168. <div class="select">
  169. <div class="item_prod">
  170. <div class="item_state">
  171. <a href="javascript:void(0);" class="itemLink">
  172. <div class="itemPic">
  173. <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=285'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  174. </div>
  175. <div class="itemName">상품선택</div>
  176. </a>
  177. </div>
  178. </div>
  179. </div>
  180. <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
  181. <th:block th:each="goodsInfo, status : ${goodsDealComposeList}" >
  182. <li th:onclick="fnOption1('Up', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
  183. th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
  184. <div class="item_prod">
  185. <div class="item_state" >
  186. <a href="javascript:void(0);" class="itemLink" >
  187. <div class="itemPic">
  188. <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=285'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  189. </div>
  190. <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
  191. <div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
  192. <p class="itemPrice" ><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
  193. <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
  194. <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
  195. </p>
  196. </a>
  197. <input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
  198. </div>
  199. </div>
  200. </li>
  201. </th:block>
  202. </ul>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="form_field" id="form_field1_Up">
  207. <div class="select_custom deal_opt1" disabled>
  208. <div class="combo">
  209. <div class="select">옵션1선택</div>
  210. <ul class="list" id="goodsDealOptUp1">
  211. <!-- 옵션 1 -->
  212. </ul>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="form_field" id="form_field2_Up">
  217. <div class="select_custom deal_opt2" disabled>
  218. <div class="combo">
  219. <div class="select">옵션2선택</div>
  220. <ul class="list" id="goodsDealOptUp2">
  221. <!-- 옵션 2 -->
  222. </ul>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <div class="opt_result">
  228. </div>
  229. </div>
  230. <div class="price_box" style="display:none;">
  231. <p class="number">
  232. 총&nbsp;<span id="goodsTotalQty">0</span>개
  233. </p>
  234. <p class="price">
  235. <span>
  236. <b id="goodsTotalPrice">0</b><em>원</em>
  237. </span>
  238. </p>
  239. </div>
  240. <div class="btn_box">
  241. <div class="btn_group_block ui_row">
  242. <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  243. <div class="ui_col_6">
  244. <button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C','Up');"><span>쇼핑백</span></button>
  245. </div>
  246. <div class="ui_col_6">
  247. <button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O','Up');"><span>바로구매</span></button>
  248. </div>
  249. </th:block>
  250. <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  251. <div class="ui_col_12">
  252. <button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
  253. </div>
  254. </th:block>
  255. </div>
  256. </div>
  257. <div style="margin-top:10px;">
  258. <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
  259. <script th:inline="javascript">
  260. if(!wcs_add) var wcs_add = {};
  261. wcs_add["wa"] = "${@environment.getProperty('naverPay.common.certification.key')}";
  262. wcs.inflow("style24.com");
  263. wcs_do();
  264. </script>
  265. <script type="text/javascript" >
  266. //<![CDATA[
  267. /*버튼설정*/
  268. naver.NaverPayButton.apply({
  269. BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
  270. TYPE : "C", // 버튼 모음 종류 설정
  271. COLOR : 1, // 버튼 모음의 색 설정
  272. COUNT : 1, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
  273. ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
  274. BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
  275. "":""
  276. });
  277. /*네이버구매하기*/
  278. function buy_nc() {
  279. // 자사 일반 상품 정보
  280. let compsList = [];
  281. $("#cartForm .result_item input[name=cea]").each(function() {
  282. let dealGoodsCd = "[[${goodsInfo.goodsCd}]]";
  283. let goodsType = "[[${goodsInfo.goodsType}]]";
  284. let goodsCd = $(this).parent().find("input[name=coption]").attr("goodscd");
  285. let optCd = $(this).attr("optcd");
  286. let goodsQty = $(this).val();
  287. if (!goodsCd) {
  288. mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
  289. return false;
  290. }
  291. if (!goodsQty || goodsQty < 1) {
  292. mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
  293. return false;
  294. }
  295. if (!optCd) {
  296. mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
  297. return false;
  298. }
  299. var obj = new Object();
  300. obj.cartGb = "N";
  301. obj.goodsType = goodsType;
  302. obj.goodsCd = goodsCd;
  303. obj.optCd = optCd;
  304. obj.goodsQty = goodsQty;
  305. obj.dealGoodsCd = $("#cartForm input[name=goodsCd]").val();
  306. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  307. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  308. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  309. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  310. compsList.push(obj);
  311. });
  312. // 장바구니담기
  313. cfnAddCart(compsList);
  314. return false;
  315. }
  316. <!-- 구매불가 -->
  317. function not_buy_nc() {
  318. mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
  319. return false;
  320. }
  321. //]]>
  322. </script>
  323. </th:block>
  324. </div>
  325. </div>
  326. </div>
  327. </form>
  328. </div>
  329. </div>
  330. </div>
  331. <!-- 상품 대표설명 -->
  332. <!-- //***** 상품소개영역 ***** -->
  333. <th:block th:include="~{web/goods/GoodsIncludeFormWeb :: goodsDealComposeForm}"></th:block>
  334. <!-- 이 상품과 함께 본 상품 -->
  335. <div class="content wide pd_clickother" id="goodsTogetherbArea">
  336. </div>
  337. <!-- // 이 상품과 함께 본 상품 -->
  338. </div>
  339. <!-- 상품썸네일 크게보기 팝업 -->
  340. <div class="pd_pop full_pop pd_itemthumb_pop" id="pdItemThumbPop">
  341. <div class="full_popup_wrap">
  342. <h5 class="sr-only">상품썸네일 크게보기</h5>
  343. <div class="btn_close">
  344. <a href="" id="btn_close_itemThumbPop">닫기버튼</a>
  345. </div>
  346. <div class="full_pop_container">
  347. <!-- 배송교환반품안내 리스트 내용 -->
  348. </div>
  349. </div>
  350. </div>
  351. <!-- //상품썸네일 크게보기 팝업 -->
  352. <!-- **************** 개별상품 상세정보 팝업 **************** -->
  353. <!-- 바로구매 장바구니 등록 정보 저장을 위한 form -->
  354. <form id="directOrderForm" method="POST" action="/order/noMember"></form>
  355. </div>
  356. <script th:inline="javascript">
  357. /*<![CDATA[*/
  358. let socialSq = [[${goodsInfo.socialSq}]];
  359. let socialEddt = [[${goodsInfo.socialEddt}]];
  360. function promotionTimer() {
  361. var endTime = new Date(socialEddt); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
  362. endTime = (Date.parse(endTime) / 1000);
  363. var now = new Date();
  364. now = (Date.parse(now) / 1000);
  365. var timeLeft = endTime - now;
  366. var days = Math.floor(timeLeft / 86400);
  367. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  368. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  369. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  370. if (hours < '10') { hours = '0' + hours; }
  371. if (minutes < '10') { minutes = '0' + minutes; }
  372. if (seconds < '10') { seconds = '0' + seconds; }
  373. if (Number(days) > 0 ){
  374. // hours = Number(hours) + (Number(days) * 24);
  375. $('#d-days').html(days);
  376. }else{
  377. $('#d-days').hide();
  378. }
  379. $('#d-hours').html(hours);
  380. $('#d-minutes').html(minutes);
  381. $('#d-seconds').html(seconds);
  382. }
  383. if (!gagajf.isNull(socialSq)){
  384. $('.timer_box').css('display', 'block');
  385. setInterval(function() { promotionTimer(); }, 1000);
  386. };
  387. var cateNm = "";
  388. // 함께본 상품
  389. var fnGoodsTogetherSearch = function(params) {
  390. //gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);
  391. $.ajax( {
  392. type : "POST",
  393. url : '/goods/detail/together/frame',
  394. data : JSON.stringify(params),
  395. dataType : 'html',
  396. beforeSend : function(xhr, settings) {
  397. xhr.setRequestHeader("AJAX" , "true");
  398. xhr.setRequestHeader('Accept' , 'application/json');
  399. xhr.setRequestHeader('Content-Type' , 'application/json');
  400. },
  401. success : function(result) {
  402. if (result != null) {
  403. $("#goodsTogetherbArea").css("display", "block");
  404. $("#goodsTogetherbArea").html(result);
  405. var otherItemSwiper1 = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
  406. slidesPerView: 5,
  407. slidesToScroll: 5,
  408. slidesPerGroup: 5,
  409. spaceBetween: 20,
  410. navigation: {
  411. nextEl: '.pd_clickother .swiper-button-next',
  412. prevEl: '.pd_clickother .swiper-button-prev',
  413. },
  414. pagination: {
  415. el: '.pd_clickother .swiper-pagination',
  416. clickable: true,
  417. },
  418. });
  419. }
  420. }
  421. });
  422. }
  423. // 옵션1 조회
  424. var fnOption1 = function(flag, goodsCd, currPrice, selfGoodsYn){
  425. let data = {goodsCd : goodsCd
  426. };
  427. let jsonData = JSON.stringify(data);
  428. $('.form_field .select_custom.deal_opt1').find('.combo .select').html('옵션1선택');
  429. $('.form_field .select_custom.deal_opt2').attr('disabled', true);
  430. $('.form_field .select_custom.deal_opt2').find('.combo .select').html('옵션2선택');
  431. gagajf.ajaxJsonSubmit('/goods/detail/option1/list', jsonData, function(result) {
  432. if (result.dataList != null && result.dataList.length > 0) {
  433. let tagUpS = "";
  434. let tagDownS = "";
  435. let tagUp = "";
  436. let tagDown = "";
  437. let $objUp = null;
  438. let $objDown = null;
  439. let qty = 1;
  440. $.each(result.dataList, function(idx, item) {
  441. let tag1 = "";
  442. let tag2 = "";
  443. if (idx == 0){
  444. if (flag == "layer"){
  445. $objUp = $('.pd_descrp_pop .opt_select .select_custom.deal_opt1');
  446. // $objUp.html('');
  447. $objUp.remove();
  448. }else if (flag == "Up"){
  449. $objUp = $('.pd_detail .opt_select .select_custom.deal_opt1');
  450. // $objUp.html('');
  451. $objUp.remove();
  452. }else{
  453. $objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
  454. // $objDown.html('');
  455. $objDown.remove();
  456. }
  457. // $('.form_field .select_custom.deal_opt1').attr('disabled', false);
  458. //------
  459. tag1 += '<div class="select_custom deal_opt1">\n';
  460. tag1 += '<div class="combo">\n';
  461. tag1 += '<div class="select">옵션1선택</div>\n';
  462. tag1 += '<ul class="list">\n';
  463. //------
  464. //tag1 += '<li class="selected" id="goodsOpt1">옵션1선택</li>\n';
  465. }
  466. let soldoutYn = "";
  467. let disabledYn = "";
  468. if (item.stockQty <= 0) soldoutYn = "true";
  469. if (soldoutYn == "true" || item.goodsStat != 'G008_90') disabledYn = "true";
  470. if (flag == "layer"){
  471. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'layer\')">\n';
  472. }else if (flag == "Up"){
  473. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Up\')">\n';
  474. }else{
  475. tagDown = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Down\')">\n';
  476. }
  477. tag2 += '<div class="opt_name">'+ item.optCd1Nm+'</div>\n';
  478. if (item.addPrice > 0){
  479. tag2 += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
  480. }
  481. tag2 += '<input type="hidden" name="opt1" value="'+ goodsCd +'" currPrice="'+ currPrice+'" optCd1="'+item.optCd1+'" minOrdQty="'+item.minOrdQty+'" maxOrdQty="'+item.maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'" />\n';
  482. tag2 += '</li>\n';
  483. tagUpS += tag1+tagUp+tag2;
  484. tagDownS += tag1+tagDown+tag2;
  485. });
  486. if (!gagajf.isNull(tagUpS)){
  487. //------
  488. tagUpS += '</ul>\n';
  489. tagUpS += '</div>\n';
  490. tagUpS += '</div>\n';
  491. tagDownS += '</ul>\n';
  492. tagDownS += '</div>\n';
  493. tagDownS += '</div>\n';
  494. //------
  495. }
  496. if (flag == "layer"){
  497. // $objUp.prepend(tagUpS);
  498. $('#form_field1_'+flag).append(tagUpS);
  499. var pop_desc_option02 = new sCombo('.pd_descrp_pop .opt_select .select_custom.deal_opt1');
  500. //$('.pd_descrp_pop .opt_select .select_custom.deal_opt1').find('.combo .select').trigger('click');
  501. }else if (flag == "Up"){
  502. // $objUp.prepend(tagUpS);
  503. $('#form_field1_'+flag).append(tagUpS);
  504. var detail_deal_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
  505. //$('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select').trigger('click');
  506. }else{
  507. // $objDown.prepend(tagDownS);
  508. $('#form_field1_'+flag).append(tagDownS);
  509. var desc_option02 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
  510. //$('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select').trigger('click');
  511. }
  512. }
  513. /* if (flag != "layer"){
  514. // 상품 선태값 적용
  515. let $obj = null;
  516. let $taget = null;
  517. // 하단 우측 상품선택영역 Up/ Down
  518. if (flag == "Up"){
  519. $obj = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select');
  520. $taget = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
  521. }else{
  522. $taget = $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select');
  523. $obj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select');
  524. }
  525. let goodsDealInfo = $obj.html();
  526. $taget.html(goodsDealInfo);
  527. } */
  528. });
  529. }
  530. // 옵션2 조회
  531. var fnOption2 = function(obj, flag){
  532. let $obj = $(obj);
  533. let $target = $obj.find('input[name="opt1"]');
  534. let goodsCd = $target.val();
  535. let currPrice = $target.attr("currPrice");
  536. let optCd1 = $target.attr("optCd1");
  537. let minOrdQty = $target.attr("minOrdQty");
  538. let maxOrdQty = $target.attr("maxOrdQty");
  539. let selfGoodsYn = $target.attr("selfGoodsYn");
  540. let data = {goodsCd : goodsCd
  541. ,optCd1 : optCd1
  542. };
  543. let jsonData = JSON.stringify(data);
  544. gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
  545. if (result.dataList != null && result.dataList.length > 0) {
  546. let tagUpS = "";
  547. let tagDownS = "";
  548. let tagUp = "";
  549. let tagDown = "";
  550. let $objUp = null;
  551. let $objDown = null;
  552. $.each(result.dataList, function(idx, item) {
  553. let tag1 = "";
  554. let tag2 = "";
  555. if (idx == 0){
  556. if (flag == "layer"){
  557. $objUp = $('.pd_descrp_pop .opt_select .select_custom.deal_opt2');
  558. // $objUp.html('');
  559. $objUp.remove();
  560. }else if (flag == "Up"){
  561. $objUp = $('.pd_detail .opt_select .select_custom.deal_opt2');
  562. // $objUp.html('');
  563. $objUp.remove();
  564. }else{
  565. $objDown = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
  566. // $objDown.html('');
  567. $objDown.remove();
  568. }
  569. //$('.form_field .select_custom.deal_opt2').attr('disabled', false);
  570. //------
  571. tag1 += '<div class="select_custom deal_opt2">\n';
  572. tag1 += '<div class="combo">\n';
  573. tag1 += '<div class="select">옵션2선택</div>\n';
  574. tag1 += '<ul class="list">\n';
  575. //------
  576. //tag1 += '<li class="selected" id="goodsOpt2">옵션2</li>\n';
  577. }
  578. let soldoutYn = "";
  579. let disabledYn = "";
  580. if ("Y" == item.soldoutYn || item.stockQty <= 0) soldoutYn = "true";
  581. if (soldoutYn == "true") disabledYn = "true";
  582. if (flag == "layer"){
  583. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'layer\' )">\n';
  584. }else if (flag == "Up"){
  585. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Up\' )">\n';
  586. }else{
  587. tagDown = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Down\' )">\n';
  588. }
  589. tag2 += '<div class="opt_name">'+ item.optCd2+'</div>\n';
  590. if (item.addPrice > 0){
  591. tag2 += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
  592. }
  593. tag2 += '<input type="hidden" name="opt2" value="'+ goodsCd +'" currPrice="'+ currPrice+'" addPrice="'+item.addPrice+'" optCd="'+item.optCd+'" optCd1="'+item.optCd1+'" optCd1Nm="'+item.optCd1Nm+'" optCd2="'+item.optCd2+'" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'"/>\n';
  594. tag2 += '</li>\n';
  595. tagUpS += tag1+tagUp+tag2;
  596. tagDownS += tag1+tagDown+tag2;
  597. });
  598. if (!gagajf.isNull(tagUpS)){
  599. //------
  600. tagUpS += '</ul>\n';
  601. tagUpS += '</div>\n';
  602. tagUpS += '</div>\n';
  603. tagDownS += '</ul>\n';
  604. tagDownS += '</div>\n';
  605. tagDownS += '</div>\n';
  606. //------
  607. }
  608. if (flag == "layer"){
  609. // $objUp.prepend(tagUpS);
  610. $('#form_field2_'+flag).append(tagUpS);
  611. var pop_desc_option02 = new sCombo('.pd_descrp_pop .opt_select .select_custom.deal_opt2');
  612. //$('.pd_descrp_pop .opt_select .select_custom.deal_opt2').find('.combo .select').trigger('click');
  613. }else if (flag == "Up"){
  614. // $objUp.prepend(tagUpS);
  615. $('#form_field2_'+flag).append(tagUpS);
  616. var detail_deal_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
  617. //$('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select').trigger('click');
  618. }else{
  619. // $objDown.prepend(tagDownS);
  620. $('#form_field2_'+flag).append(tagDownS);
  621. var desc_option03 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
  622. //$('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select').trigger('click');
  623. }
  624. }
  625. /* if (flag != "layer"){
  626. // 옵션 1 선태값 적용
  627. let $obj2 = null;
  628. let $taget2 = null;
  629. // 하단 우측 상품선택영역 Up/ Down
  630. if (flag == "Up"){
  631. $obj2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select');
  632. $taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
  633. }else{
  634. $obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt1').find('.combo .select');
  635. $taget2 = $('.pd_detail .opt_select .select_custom.deal_opt1').find('.combo .select');
  636. }
  637. let goodsDealInfo = $obj2.html();
  638. $taget2.html(goodsDealInfo);
  639. } */
  640. });
  641. }
  642. //사이즈 클릭시 - 단품
  643. var fnViewStock = function(obj, flag ) {
  644. let $obj = $(obj);
  645. let $target = $obj.find('input[name="opt2"]');
  646. let goodsCd = $target.val();
  647. let currPrice = $target.attr("currPrice");
  648. let optCd = $target.attr("optCd");
  649. let optCd1 = $target.attr("optCd1");
  650. let optCd1Nm = $target.attr("optCd1Nm");
  651. let optCd2 = $target.attr("optCd2");
  652. let minOrdQty = $target.attr("minOrdQty");
  653. let maxOrdQty = $target.attr("maxOrdQty");
  654. let addPrice = $target.attr("addPrice");
  655. let selfGoodsYn = $target.attr("selfGoodsYn");
  656. let optQty = minOrdQty;
  657. let params = new Object();
  658. params.goodsCd = goodsCd;
  659. params.optCd = optCd;
  660. params.optCd1 = optCd1;
  661. params.optCd2 = optCd2;
  662. params.selfGoodsYn = selfGoodsYn;
  663. // 중복선택 확인 opt_result
  664. var overlap = 0;
  665. $('.pd_detail .opt_result .number_count').each(function() {
  666. if ($('input[name="coption"]', this).val() == optCd) {
  667. ++overlap;
  668. }
  669. });
  670. if (overlap > 0) {
  671. mcxDialog.alert("이미 선택하신 옵션입니다.");
  672. return false;
  673. }
  674. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  675. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  676. if (maxOrdQty > itemCnt) {
  677. maxOrdQty = itemCnt;
  678. }
  679. if (minOrdQty > itemCnt) {
  680. //alert("무슨작업을 해야할가요?");
  681. return false; //무슨작업을 해야하나?
  682. }
  683. //상품정보
  684. let $selObj = null;
  685. if (flag == "layer"){
  686. $selObj = $('.pd_descrp_pop .form_field .select_custom.deal_opt_item');
  687. }else if (flag == "Up"){
  688. $selObj = $('.pd_detail .opt_select .select_custom.deal_opt_item');
  689. }else{
  690. $selObj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item');
  691. }
  692. let $goodsObj =$selObj.find('.combo .select').find('input[name=selectGoods]');
  693. let goodsNm = $goodsObj.attr('goodsnm');
  694. let goodsCd = $goodsObj.attr('goodscd');
  695. let price = parseInt(currPrice)+ parseInt(addPrice);
  696. let tag = "";
  697. tag += '<div class="result_item result_'+optCd+'">\n';
  698. tag += ' <div class="opt_header">\n';
  699. tag += ' <span class="item_name">'+goodsNm+'</span>\n';
  700. tag += ' <span class="item_option">'+optCd1Nm+'/'+optCd2+'</span>\n';
  701. tag += ' </div>\n';
  702. tag += ' <div class="number_count">\n';
  703. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  704. tag += ' <input type="text" name="cea" optCd="'+optCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'">\n';
  705. tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  706. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  707. tag += ' </div>\n';
  708. tag += ' <div class="item_price">\n';
  709. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  710. tag += ' </div>\n';
  711. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
  712. tag += '</div>\n';
  713. let $objUp = null;
  714. let $objDown = null;
  715. // 하단 우측 상품선택영역 Up/ Down/ layer
  716. if (flag == "layer"){
  717. $objLayer = $('.pd_descrp_pop .opt_result');
  718. $objUp = $('.pd_detail .opt_result');
  719. $objDown = $('.pd_desc_wrap .opt_result');
  720. $objLayer.prepend(tag);
  721. }else{
  722. $objUp = $('.pd_detail .opt_result');
  723. $objDown = $('.pd_desc_wrap .opt_result');
  724. }
  725. $objUp.prepend(tag);
  726. $objDown.prepend(tag);
  727. if (flag != "layer"){
  728. // 옵션 2 선태값 적용
  729. let $obj2 = null;
  730. let $taget2 = null;
  731. // 하단 우측 상품선택영역 Up/ Down
  732. if (flag == "Up"){
  733. $obj2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select');
  734. $taget2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
  735. }else{
  736. $obj2 = $('.pd_desc_wrap .opt_select .select_custom.deal_opt2').find('.combo .select');
  737. $taget2 = $('.pd_detail .opt_select .select_custom.deal_opt2').find('.combo .select');
  738. }
  739. let goodsDealInfo = $obj2.html();
  740. $taget2.html(goodsDealInfo);
  741. }
  742. fnSetTotalPrice();
  743. var dTag = '';
  744. dTag += '';
  745. dTag += '<div class="item_prod">\n';
  746. dTag += '<div class="item_state">\n';
  747. dTag += ' <a href="javascript:void(0);" class="itemLink">\n';
  748. dTag += ' <div class="itemPic">\n';
  749. dTag +=' <img class="vLHTC pd_img" src="'+_uploadGoodsUrl +'/'+[[${goodsInfo.sysImgNm}]]+'?RS=285" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png" />\n';
  750. dTag += ' </div>\n';
  751. dTag += ' <div class="itemName">상품선택</div>\n';
  752. dTag += ' </a>\n';
  753. dTag += '</div>\n';
  754. dTag += '</div>\n';
  755. $('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select').html(dTag);
  756. $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item').find('.combo .select').html(dTag);
  757. //$('.pd_descrp_pop .form_field .select_custom.deal_opt_item').find('.combo .select').html(dTag);
  758. if (flag != "layer"){
  759. $('.form_field .select_custom.deal_opt1').attr('disabled', true);
  760. //$('.form_field .select_custom.deal_opt1').find('.combo .select').html('옵션1선택');
  761. }
  762. $('.form_field .select_custom.deal_opt1').find('.combo .select').html('옵션1선택');
  763. $('.form_field .select_custom.deal_opt2').attr('disabled', true);
  764. $('.form_field .select_custom.deal_opt2').find('.combo .select').html('옵션2선택');
  765. }, "text");
  766. }
  767. // 수량 변경 클릭
  768. var fnAdjustOrderEa = function(obj) {
  769. let $obj = $(obj);
  770. let $target = $obj.parent().children('input[name="cea"]');
  771. let minOrdQty = parseInt( $target.attr('minOrdQty'));
  772. let maxOrdQty = parseInt( $target.attr('maxOrdQty'));
  773. let ea =parseInt($target.val());
  774. if ($obj.attr('adjust') == '-') --ea;
  775. else ++ea;
  776. //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
  777. //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
  778. //if (ea.toString().length > maxOrdQty) --ea;
  779. if (ea < 1) ea = minOrdQty;
  780. $target.val(ea);
  781. $target.attr('value', ea);
  782. fnChangeOrderEa($target[0]);
  783. }
  784. //옵션 갯수 변경
  785. var fnChangeOrderEa = function(obj) {
  786. let $obj = $(obj);
  787. let ea = parseInt($obj.val());
  788. let maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
  789. let minOrdQty = parseInt($(obj).attr('minOrdQty'));
  790. let optCd = $(obj).attr('optCd');
  791. let alertMsg = '';
  792. if (ea < minOrdQty) {
  793. alertMsg = minOrdQty+"개 부터 구매 가능합니다.";
  794. ea = minOrdQty;
  795. }
  796. if (ea > maxOrdQty) {
  797. alertMsg = maxOrdQty+"개 까지만 구매 가능합니다.";
  798. ea = maxOrdQty;
  799. }
  800. obj.value = ea;
  801. if (alertMsg != ''){
  802. mcxDialog.alert(alertMsg);
  803. return false;
  804. }
  805. if (ea <= 1){
  806. $('.number_count').find('.minus').addClass('min_val');
  807. }else{
  808. $('.number_count').find('.minus').removeClass('min_val');
  809. }
  810. let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
  811. let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
  812. let totalPrice = ((goodsPrice+addPrice) * ea);
  813. //$obj.parent().parent().find('#goodsPrice').text(totalPrice.addComma());
  814. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
  815. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
  816. $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
  817. fnSetTotalPrice();
  818. }
  819. //합계 계산
  820. var fnSetTotalPrice = function() {
  821. $('.price_box').show();
  822. //let f = document.cartForm;
  823. let totalEa = 0;
  824. let totalPrice = 0;
  825. $('input[name="cea"]', document.cartForm).each(function() {
  826. let ea = parseInt($(this).val());
  827. let target=$('.select_custom.item_opt2');
  828. let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  829. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  830. totalEa += ea;
  831. if (goodsPrice > 0) {
  832. totalPrice += ((goodsPrice+addPrice) * ea);
  833. }
  834. });
  835. $('.price_box .number span').html(totalEa.addComma());
  836. $('.price_box .price > span').html(totalPrice.addComma());
  837. if ($('input[name="cea"]', document.cartForm).length <= 0 ) {
  838. $('.price_box').hide();
  839. }
  840. }
  841. //장바구니담기
  842. var fnAddCart = function(btnType, flag){
  843. let compsList = [];
  844. let $target = $('#cartForm input[name=cea]');
  845. let targetSize = $target.length; //선택성품 갯수
  846. if ($target.length <= 0){
  847. let $selObj = null;
  848. if (flag == "layer"){
  849. $selObj = $('.pd_descrp_pop .form_field .select_custom.deal_opt_item');
  850. }else if (flag == "Up"){
  851. $selObj = $('.pd_detail .opt_select .select_custom.deal_opt_item');
  852. }else{
  853. $selObj = $('.pd_desc_wrap .opt_select .select_custom.deal_opt_item');
  854. }
  855. let selGoodsCd = $selObj.find('.combo .select').find('input[name=selectGoods]').attr('goodscd');
  856. if (gagajf.isNull(selGoodsCd) || typeof (selGoodsCd) == 'undefined'){
  857. mcxDialog.alert("상품을 선택해 주세요.");
  858. return false;
  859. }else{
  860. mcxDialog.alert("옵션을 선택해 주세요.");
  861. return false;
  862. }
  863. }
  864. $target.each(function() {
  865. let ea = parseInt($(this).val());
  866. let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
  867. let optCd = $(this).parent().find('input[name="coption"]').val();
  868. //let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  869. //let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  870. var obj = new Object();
  871. obj.cartGb = btnType;
  872. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  873. obj.goodsCd = goodsCd;
  874. obj.optCd = optCd;
  875. obj.goodsQty = ea;
  876. obj.dealGoodsCd = $("#cartForm input[name=goodsCd]").val();
  877. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  878. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  879. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  880. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  881. compsList.push(obj);
  882. });
  883. // 장바구니담기
  884. cfnAddCart(compsList);
  885. }
  886. // 선택상품 삭제
  887. var fnSelectGoodsDel = function(optCd){
  888. $('.result_'+optCd).remove();
  889. fnSetTotalPrice();
  890. }
  891. //공유 버튼 토글
  892. $("button[data-name=openShare]").on("click", function(){
  893. $(this).toggleClass("on").next(".shareWrap").toggleClass("on");
  894. return false;
  895. });
  896. //영역밖 클릭으로 공유토글 닫기
  897. $("body").on('click', function(e) {
  898. if(!$(".shareWrap.on").parent().has(e.target).length) {
  899. $("button[data-name=openShare]").removeClass("on");
  900. $(".shareWrap").removeClass("on");
  901. };
  902. });
  903. var params = new Object();
  904. params.goodsCd = [[${params.goodsCd}]];
  905. params.colorCd = [[${params.colorCd}]];
  906. params.viewDt = [[${params.viewDt}]];
  907. params.preview = [[${params.preview}]];
  908. params.adminYn = [[${params.adminYn}]];
  909. params.goodsType = [[${params.goodsType}]];
  910. params.supplyCompCd = [[${params.supplyCompCd}]];
  911. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  912. //함께본 상품(ajax html)
  913. $('#goodsTogetherbArea').load('GoodsDetailFormWeb.html', function() {
  914. params.goodsOtherGb = "together";
  915. params.ithrCd = "tmtb";
  916. params.contentsLoc = "tmtb";
  917. fnGoodsTogetherSearch(params);
  918. });
  919. //상품상세정보 더보기
  920. $(document).on('click','.pd_descrp_pop .btn_more_box button',function(e){
  921. $('.pd_descrp_pop .cont_body').toggleClass('on');
  922. $(this).toggleClass('active');
  923. $(this).parent('.btn_more_box').toggleClass('covered');
  924. var descrpToggle = $(this).find('span');
  925. $(descrpToggle).text($(descrpToggle).text() == '상세정보 더보기' ? '상세정보 접기' : '상세정보 더보기');
  926. return false;
  927. });
  928. //상품상세정보 탭
  929. $(document).on('click','.pd.deal .tab_detail_nav ul li',function(e){
  930. $(this).addClass('active').siblings().removeClass('active');
  931. $('.pd.deal .tab_detail_cont').hide();
  932. $('.pd.deal .tab_detail_cont').eq($(this).index()).show();
  933. return false;
  934. });
  935. //슬라이드 - 이 상품과 함께 본 상품
  936. var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
  937. slidesPerView: 5,
  938. spaceBetween: 20,
  939. navigation: {
  940. nextEl: '.pd_clickother .swiper-button-next',
  941. prevEl: '.pd_clickother .swiper-button-prev',
  942. },
  943. pagination: {
  944. el: '.pd_clickother .swiper-pagination',
  945. clickable: true,
  946. },
  947. });
  948. $(document).ready( function() {
  949. //상품 대표설명 > 우측 상품정보
  950. /* 딜 옵션선택 후 다음 옵션 활성화 */
  951. var detail_deal_option01 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt_item');
  952. //var detail_deal_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
  953. //var detail_deal_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
  954. /* $('.pd_detail .opt_select .select_custom .combo .list > li').click(function(e) {
  955. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  956. return false;
  957. }); */
  958. // 하단 우측 상품선택영역
  959. /* 딜 옵션선택 후 다음 옵션 활성화 */
  960. var desc_option01 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt_item');
  961. //var desc_option02 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt1');
  962. //var desc_option03 = new sCombo('.pd_desc_wrap .opt_select .select_custom.deal_opt2');
  963. /* $('.pd_desc_wrap .opt_select .select_custom .combo .list > li').click(function(e) {
  964. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  965. return false;
  966. }); */
  967. // 상품선택 옵션 : 하단 상품정보 영역
  968. var tab_review_item = new sCombo('.tab_detail_cont .select_custom.deal_opt_item.forReview');
  969. var tab_qna_item = new sCombo('.tab_detail_cont .select_custom.deal_opt_item.forQna');
  970. var tab_exinfo_item = new sCombo('.tab_detail_cont .select_custom.deal_opt_item.forExinfo');
  971. // 상품선택 옵션 : 상세정보 > 상품 > 팝업
  972. var pop_desc_option01 = new sCombo('.pd_descrp_pop .select_custom.deal_opt_item');
  973. //var pop_desc_option02 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt1');
  974. //var pop_desc_option03 = new sCombo('.pd_detail .opt_select .select_custom.deal_opt2');
  975. /* 상품옵션변경 팝업 > 수량조절 */
  976. //수량1개 이하 감소버튼 비활성화
  977. var valItemCount = $('.option_box .result_item .number_count input').val();
  978. if ( valItemCount == 1 ) {
  979. $(' .option_box .result_item .number_count .minus').addClass('min_val');
  980. }
  981. // 탭별 선택시 기본 상품 설정
  982. let selIdx = 0;
  983. $('.tab_detail_cont.pd_delivery').find('.combo .list li').each(function() {
  984. if (typeof ($(this).attr('aria-disabled')) == 'undefined' || !$(this).attr('aria-disabled')){
  985. return false;
  986. }
  987. selIdx ++;
  988. });
  989. $('.tab_detail_cont.pd_delivery').find('.combo .list li').eq(selIdx).trigger("click");
  990. $('.tab_detail_cont.pd_qnalist').find('.combo .list li').eq(selIdx).trigger("click");
  991. $('.tab_detail_cont.pd_review').find('.combo .list li').eq(selIdx).trigger("click");
  992. });
  993. function buy_nc_req(cartSqArr) {
  994. let data = { cartSqArr : cartSqArr
  995. , backUrl : location.href
  996. , goodsUrl : _PAGE_GOODS_DETAIL
  997. };
  998. let jsonData = JSON.stringify(data);
  999. $.ajax( {
  1000. type : "POST",
  1001. url : "/pg/nPayReq",
  1002. dataType : 'json',
  1003. data : jsonData,
  1004. beforeSend : function(xhr, settings) {
  1005. xhr.setRequestHeader("AJAX" , "true");
  1006. xhr.setRequestHeader('Accept' , 'application/json');
  1007. xhr.setRequestHeader('Content-Type' , 'application/json');
  1008. },
  1009. error: function(xhr, status, error) {
  1010. mcxDialog.alert(status + '; ' + error);
  1011. },
  1012. success : function(result) {
  1013. if (result.state == "sucess") {
  1014. window.open('about:blank', 'popupView');
  1015. document.nPayForm.target = 'popupView';
  1016. document.nPayForm.action = result.npayOrderUrl + "/" + result.orderKey + "/" + result.resultNo;
  1017. document.nPayForm.submit();
  1018. } else {
  1019. mcxDialog.alert(result.message);
  1020. }
  1021. }
  1022. });
  1023. }
  1024. // 광고 스크립트용
  1025. var goodsNavigation = [[${goodsNavigation}]];
  1026. var cate1Nm = "";
  1027. var cate2Nm = "";
  1028. var cate3Nm = "";
  1029. var cate4Nm = "";
  1030. var cate5Nm = "";
  1031. if (!gagajf.isNull(goodsNavigation)) {
  1032. cate1Nm = goodsNavigation.cate1No;
  1033. cate2Nm = goodsNavigation.cate2No;
  1034. cate3Nm = goodsNavigation.cate3No;
  1035. cate4Nm = goodsNavigation.cate4No;
  1036. cate5Nm = goodsNavigation.cate5No;
  1037. cateNm = cate3Nm;
  1038. /* if (!gagajf.isNull(cate1Nm)) {
  1039. cateNm += cate1Nm;
  1040. }
  1041. if (!gagajf.isNull(cate2Nm)) {
  1042. cateNm += ' > ' + cate2Nm;
  1043. }
  1044. if (!gagajf.isNull(cate3Nm)) {
  1045. cateNm += ' > ' + cate3Nm;
  1046. }
  1047. if (!gagajf.isNull(cate4Nm)) {
  1048. cateNm += ' > ' + cate4Nm;
  1049. }
  1050. if (!gagajf.isNull(cate5Nm)) {
  1051. cateNm += ' > ' + cate5Nm */;
  1052. }
  1053. }
  1054. // 광고 스크립트용
  1055. var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
  1056. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd;
  1057. if (typeof (params.colorCd) != 'undefined') snsUrl += "&colorCd=" + params.colorCd;
  1058. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  1059. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  1060. $("meta[property='og:url']").attr('content', snsUrl);
  1061. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  1062. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  1063. $("meta[property='og:image']").attr('content', snsGoodsImg);
  1064. <!-- 트위터 관련 메타태그 -->
  1065. $("meta[name='twitter:url']").attr('content', snsUrl);
  1066. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  1067. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  1068. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  1069. // 추천솔류션 meta 설정
  1070. $("meta[property='eg:type']").attr('content',"product");
  1071. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  1072. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  1073. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  1074. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  1075. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  1076. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  1077. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  1078. $("meta[property='eg:category1']").attr('content',cate1Nm);
  1079. $("meta[property='eg:category2']").attr('content',cate2Nm);
  1080. $("meta[property='eg:category3']").attr('content',cate3Nm);
  1081. $("meta[property='eg:category4']").attr('content',cate4Nm);
  1082. $("meta[property='eg:category5']").attr('content',cate5Nm);
  1083. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  1084. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  1085. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1086. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1087. $("meta[property='eg:stock']").attr('content',"");
  1088. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
  1089. $("meta[property='eg:description']").attr('content',null);
  1090. $("meta[property='eg:extraImage']").attr('content',null);
  1091. $("meta[property='eg:locale']").attr('content',"KR");
  1092. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  1093. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  1094. /*]]>*/
  1095. </script>
  1096. <!-- 광고 스크립트 -->
  1097. <th:block th:replace="~{web/common/advertisements/GoodsDetailScriptsWeb :: scripts}"></th:block>
  1098. <!-- //광고 스크립트 -->
  1099. </th:block>
  1100. </body>
  1101. </html>