GoodsDealDetailFormWeb.html 49 KB

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