GoodsDealDetailFormMob.html 68 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="mob/common/layout/GoodsLayoutMob">
  6. <!--
  7. *******************************************************************************
  8. * @source : GoodsDealDetailFormMob.html
  9. * @desc : 딜 상품상세 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.04.15 eskim 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
  22. <script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
  23. <form id="nPayForm" name="nPayForm"></form>
  24. <form id="nPayWishForm" name="nPayWishForm" method="get">
  25. <input type="hidden" name="SHOP_ID" />
  26. <input type="hidden" name="ITEM_ID" />
  27. </form>
  28. <form name="cartForm" id="cartForm" method="post">
  29. <input type="hidden" name="mode">
  30. <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
  31. <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
  32. <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
  33. <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
  34. <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
  35. <input type="hidden" name="optCd" />
  36. <input type="hidden" name="optCd1" />
  37. <input type="hidden" name="optCd2" />
  38. <input type="hidden" name="addPrice" />
  39. <input type="hidden" name="ordQty" />
  40. <input type="hidden" name="stock" />
  41. <input type="hidden" name="minOrdQty"/>
  42. <input type="hidden" name="maxOrdQty"/>
  43. <input type="hidden" name="currPrice" th:value="${goodsInfo.currPrice}"/>
  44. <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
  45. <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
  46. <main role="" id="" class="container pd deal" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
  47. <!-- ★ 컨텐츠 시작 -->
  48. <section class="pd_detail">
  49. <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
  50. <div class="pd_info">
  51. <div class="pd_info1" data-speed="10">
  52. <div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">
  53. <div class="thumb_box">
  54. <div class="area_slider">
  55. <div class="swiper-container thumb_list">
  56. <div class="swiper-wrapper">
  57. <th:block th:each="goodsImg, status : ${goodsImgList}">
  58. <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.')
  59. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  60. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  61. <div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div> <!-- mov -->
  62. </th:block>
  63. </div>
  64. <!-- Add Pagination -->
  65. <div class="swiper-pagination"></div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="inner">
  72. <!-- 210409_ 구조변경 : .covered 추가 -->
  73. <div class="covered">
  74. <div class="timer_box" style="display:none;">
  75. <p>
  76. <span class="tt">남은시간</span>
  77. <span class="timer">
  78. <em id="d-days">0</em>
  79. <em id="d-hours">0</em>
  80. <em id="d-minutes">0</em>
  81. <em id="d-seconds">0</em>
  82. </span>
  83. </p>
  84. </div>
  85. <div class="descript_box">
  86. <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
  87. <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
  88. <p class="price_blk">
  89. <span class="sale_price" ><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원 ~</span>
  90. </p>
  91. <div class="btn_group_flex">
  92. <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:if="${goodsCouponList != null and !goodsCouponList.empty}" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
  98. <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
  99. </div>
  100. <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  101. (goodsCouponList != null and !goodsCouponList.empty) or
  102. (tmtbList != null and !tmtbList.empty) or
  103. (freeGoodsList != null and !freeGoodsList.empty) or
  104. (goodsCoupon1List != null and !goodsCoupon1List.empty)}" >
  105. <div class="benefit_box">
  106. <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or
  107. (tmtbList != null and !tmtbList.empty) or
  108. (freeGoodsList != null and !freeGoodsList.empty) or
  109. (goodsCoupon1List != null and !goodsCoupon1List.empty)}">
  110. <dt>쇼핑혜택</dt>
  111. <dd>
  112. <th:block th:if="${goodsCoupon1List != null and !goodsCoupon1List.empty}">
  113. <span th:each="goodsCoupon, status : ${goodsCoupon1List}" th:if="${status.first}"><em>
  114. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  115. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  116. </em> 즉시할인
  117. </span>
  118. </th:block>
  119. <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  120. <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
  121. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  122. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  123. </em> 쿠폰 할인
  124. </span>
  125. </th:block>
  126. <th:block th:if="${tmtbList != null and !tmtbList.empty}">
  127. <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
  128. <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
  129. <em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
  130. </span>
  131. </th:block>
  132. <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
  133. <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
  134. <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'Y'}" th:text="${'외 택1'}"></th:block></span>
  135. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  136. </dd>
  137. </dl>
  138. <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
  139. <dt>카드혜택</dt>
  140. <dd>
  141. <th:block th:each="cardInfo, status : ${cardInfoList}">
  142. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
  143. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  144. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  145. </th:block>
  146. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  147. </dd>
  148. </dl>
  149. </div>
  150. </div>
  151. </div>
  152. <!-- //***** 상품소개영역 ***** -->
  153. <th:block th:include="~{mob/goods/GoodsIncludeFormMob:: goodsDealComposeForm}"></th:block>
  154. <div class="inner" >
  155. <div class="recommendedArea">
  156. <!-- 이상품과 함께 본 상품영역-->
  157. <div class="pd_clickother" id="goodsTogetherbArea">
  158. </div>
  159. <!-- //이상품과 함께 본 상품영역-->
  160. </div>
  161. </div>
  162. <!-- 팝업영역 -->
  163. <div>
  164. <!-- 구매하기팝업 -->
  165. <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
  166. <a href="javascript:void(0);" class="btn btPop_close">Close </a>
  167. <div class="header btPop_head btPopAuto_head">
  168. 구매하기팝업
  169. </div>
  170. <div class="body btPop_body btPopAuto_body">
  171. <div class="option_result op1">
  172. <!-- 옵션 -->
  173. <div class="option_box">
  174. <div class="opt_select">
  175. <div class="form_wrap">
  176. <div class="form_field">
  177. <div class="select_custom option_open">
  178. <div class="combo">
  179. <div class="select">옵션을 선택해주세요.</div>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="opt_result">
  186. </div>
  187. </div>
  188. <div style="margin-top:10px;">
  189. <th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
  190. <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
  191. <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
  192. <script th:inline="javascript">
  193. if(!wcs_add) var wcs_add = {};
  194. wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
  195. wcs.inflow("style24.com");
  196. wcs_do();
  197. </script>
  198. <script type="text/javascript" >
  199. /*버튼설정*/
  200. naver.NaverPayButton.apply({
  201. BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
  202. TYPE : "MA", // 버튼 모음 종류 설정
  203. COLOR : 1, // 버튼 모음의 색 설정
  204. COUNT : 2, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
  205. ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
  206. BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
  207. WISHLIST_BUTTON_HANDLER : wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
  208. "":""
  209. });
  210. /*네이버구매하기*/
  211. function buy_nc(url) {
  212. // 자사 일반 상품 정보
  213. let compsList = [];
  214. $("#cartForm .result_item input[name=cea]").each(function() {
  215. let dealGoodsCd = "[[${goodsInfo.goodsCd}]]";
  216. let goodsType = "[[${goodsInfo.goodsType}]]";
  217. let goodsCd = $(this).parent().find("input[name=coption]").attr("goodscd");
  218. let optCd = $(this).attr("optcd");
  219. let goodsQty = $(this).val();
  220. if (!goodsCd) {
  221. mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
  222. return false;
  223. }
  224. if (!goodsQty || goodsQty < 1) {
  225. mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
  226. return false;
  227. }
  228. if (!optCd) {
  229. mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
  230. return false;
  231. }
  232. var obj = new Object();
  233. obj.cartGb = "N";
  234. obj.goodsType = goodsType;
  235. obj.goodsCd = goodsCd;
  236. obj.optCd = optCd;
  237. obj.goodsQty = goodsQty;
  238. obj.dealGoodsCd = $("#cartForm input[name=goodsCd]").val();
  239. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  240. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  241. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  242. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  243. compsList.push(obj);
  244. });
  245. // 장바구니담기
  246. cfnAddCart(compsList);
  247. return false;
  248. }
  249. function buy_nc_req(cartSqArr) {
  250. let data = { cartSqArr : cartSqArr
  251. , backUrl : location.href
  252. , goodsUrl : _PAGE_GOODS_DETAIL
  253. };
  254. let jsonData = JSON.stringify(data);
  255. $.ajax( {
  256. type : "POST",
  257. url : "/pg/nPayReq",
  258. dataType : 'json',
  259. data : jsonData,
  260. beforeSend : function(xhr, settings) {
  261. xhr.setRequestHeader("AJAX" , "true");
  262. xhr.setRequestHeader('Accept' , 'application/json');
  263. xhr.setRequestHeader('Content-Type' , 'application/json');
  264. },
  265. error: function(xhr, status, error) {
  266. mcxDialog.alert(status + '; ' + error);
  267. },
  268. success : function(result) {
  269. if (result.state == "sucess") {
  270. enp('create', 'conversion', 'is24', { device: 'M', paySys: 'naverPay' }); // 모비온 네이버주문형 클릭시
  271. document.nPayForm.action = result.npayOrderUrl + "/" + result.orderKey + "/" + result.resultNo;
  272. document.nPayForm.submit();
  273. } else {
  274. mcxDialog.alert(result.message);
  275. }
  276. }
  277. });
  278. }
  279. <!-- 구매불가 -->
  280. function not_buy_nc() {
  281. mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
  282. return false;
  283. }
  284. <!-- 찜하기 -->
  285. function wishlist_nc() {
  286. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  287. let goodsNm = "[[${goodsInfo.goodsNm}]]";
  288. let colorCd = "[[${goodsInfo.colorCd}]]";
  289. let currPrice = "[[${goodsInfo.currPrice}]]";
  290. let sysImgNm = "[[${goodsInfo.sysImgNm}]]";
  291. let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
  292. let data = {};
  293. data.goodsCd = goodsCd;
  294. data.goodsNm = goodsNm;
  295. data.colorCd = colorCd;
  296. data.currPrice = currPrice;
  297. data.sysImgNm = sysImgNm;
  298. data.selfGoodsYn = selfGoodsYn;
  299. let jsonData = JSON.stringify(data);
  300. $.ajax({
  301. type: "POST",
  302. url: "/pg/create/npay/zzim",
  303. dataType: 'json',
  304. data: jsonData,
  305. beforeSend: function (xhr, settings) {
  306. xhr.setRequestHeader("AJAX", "true");
  307. xhr.setRequestHeader('Accept', 'application/json');
  308. xhr.setRequestHeader('Content-Type', 'application/json');
  309. },
  310. error: function (xhr, status, error) {
  311. mcxDialog.alert(status + '; ' + error);
  312. },
  313. success: function (result) {
  314. if (result.state == "success") {
  315. $('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
  316. $('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);
  317. document.nPayWishForm.action = result.actionMobile;
  318. document.nPayWishForm.submit();
  319. } else {
  320. mcxDialog.alert(result.message);
  321. }
  322. }
  323. });
  324. }
  325. </script>
  326. </th:block>
  327. </th:block>
  328. </div>
  329. </div>
  330. </div>
  331. <div class="body btPop_foot btPopAuto_foot">
  332. <!-- 총 결재금액, 하단버튼 -->
  333. <div class="pay_box">
  334. <div class="price_box" style="display:none;">
  335. <p class="number">
  336. 총&nbsp;<span id="goodsTotalQty">0</span>개
  337. </p>
  338. <p class="price">
  339. <span><b id="goodsTotalPrice">0</b><em>원</em></span>
  340. </p>
  341. </div>
  342. <div class="btn_box">
  343. <button type="button" class="gift" id="btnGift" onclick="fnAddCart('G','Up');" style="display:none;">
  344. <span><span>선물해보세요!</span></span>
  345. </button>
  346. <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  347. <button type="button" class="cart" id="btnGoodsWish" onclick="fnAddCart('C','Up');" >쇼핑백</button>
  348. <button type="button" class="buyNow" id="btnGoodsCart" onclick="fnAddCart('O','Up');">바로구매</button>
  349. </th:block>
  350. <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  351. <button class="cantbuying" style="display:block;">SOLD OUT</button>
  352. </th:block>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. <!-- 구매하기팝업 -->
  358. <!-- 210528_옵션선택팝업 분리 -->
  359. <!-- 옵션선택팝업 -->
  360. <div class="pop_option_select">
  361. <div class="close">닫기</div>
  362. <div class="pp_body">
  363. <div class="pp_cont">
  364. <div class="opt_select">
  365. <div class="opt_header">
  366. <span class="title">옵션선택</span>
  367. <div class="check_excluding form_field">
  368. <div>
  369. <input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnDealCompsGoods('Up',[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
  370. </div>
  371. <div class="guidance" >
  372. <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
  373. <p>품절 옵션이 제외되었습니다</p>
  374. </div>
  375. <script>
  376. function getGuidance() {
  377. if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
  378. $(".guidance").addClass("ontoast");
  379. setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
  380. }
  381. }
  382. </script>
  383. </div>
  384. </div>
  385. <div class="form_wrap">
  386. <div class="form_field mb10" id="form_field_item_Up">
  387. <div class="select_custom deal_opt_item"> <!-- active -->
  388. <div class="combo">
  389. <div class="select">선택</div>
  390. <ul class="list">
  391. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  392. <li th:each="goodsInfo, status : ${goodsDealComposeList}"
  393. th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
  394. th:onclick="fnOption1('Up', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
  395. class="">
  396. <div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
  397. <div class="item_state">
  398. <a href="javascript:void(0);" class="itemLink">
  399. <div class="itemPic">
  400. <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=44'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  401. </div>
  402. <div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
  403. <p class="itemPrice">
  404. <th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
  405. <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
  406. <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
  407. </p>
  408. </a>
  409. <input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
  410. </div>
  411. </div>
  412. </li>
  413. </ul>
  414. </div>
  415. </div>
  416. </div>
  417. <div class="form_field" id="form_field1_Up">
  418. <div class="select_custom item_opt1" disabled>
  419. <div class="combo">
  420. <div class="select">선택</div>
  421. <ul class="list" id="goodsDealOptUp1">
  422. <!-- 옵션 1 -->
  423. </ul>
  424. </div>
  425. </div>
  426. </div>
  427. <div class="form_field" id="form_field2_Up">
  428. <div class="select_custom item_opt2" disabled>
  429. <div class="combo">
  430. <div class="select">선택</div>
  431. <ul class="list" id="goodsDealOptUp2">
  432. <!-- 옵션 2 -->
  433. </ul>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. <!-- //옵션선택팝업 -->
  443. </div>
  444. <!-- 팝업영역 -->
  445. </section>
  446. <!-- ★ 컨텐츠 종료 -->
  447. <!-- 바닥메뉴 -->
  448. <div class="product_floormenu" th:classappend="${(goodsInfo.stockQty <= 0 or goodsInfo.goodsStat != 'G008_90')? 'soldout':''}"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
  449. <div class="share_like">
  450. <button type="button" class="share">공유하기</button>
  451. <button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''"
  452. onclick="cfnPutWishList(this);"
  453. th:attr="goodsCd=${params.goodsCd}, goodsNm=${goodsInfo.goodsFullNm}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">위시리스트</button>
  454. </div>
  455. <div class="prd_buy">
  456. <button type="button" class="buying btPop_auto" id="btn_purchase">구매하기</button>
  457. <button type="button" class="cantbuying" >SOLD OUT</button>
  458. </div>
  459. <!-- (공통) 공유팝업 -->
  460. <div class="modal fade" id="tglShare" tabindex="-1" role="dialog" aria-labelledby="aModalLabel" aria-hidden="true">
  461. <div class="modal-dialog" role="document">
  462. <div class="modal-content">
  463. <div class="modal-header">
  464. <h5 class="modal-title" id="aModalLabel">공유하기</h5>
  465. </div>
  466. <th:block th:include="~{mob/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block>
  467. </div>
  468. </div>
  469. </div>
  470. <script>
  471. // 공유팝업
  472. $('.product_floormenu .share').click(function(e){
  473. e.preventDefault();
  474. $('#tglShare').modal("show");
  475. });
  476. </script>
  477. </div>
  478. <!-- //바닥메뉴 -->
  479. </main>
  480. </form>
  481. <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
  482. <form id="directOrderForm" method="POST" action="/order/noMember"></form>
  483. <script th:inline="javascript">
  484. /*<![CDATA[*/
  485. var cateNm = "";
  486. // 함께본 상품
  487. var fnGoodsTogetherSearch = function(params) {
  488. //gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);
  489. $.ajax( {
  490. type : "POST",
  491. url : '/goods/detail/together/frame',
  492. data : JSON.stringify(params),
  493. dataType : 'html',
  494. beforeSend : function(xhr, settings) {
  495. xhr.setRequestHeader("AJAX" , "true");
  496. xhr.setRequestHeader('Accept' , 'application/json');
  497. xhr.setRequestHeader('Content-Type' , 'application/json');
  498. },
  499. success : function(result) {
  500. if (result != null) {
  501. $("#goodsTogetherbArea").css("display", "block");
  502. $("#goodsTogetherbArea").html(result);
  503. // 위시처리- 로그인 되어 있을시
  504. if (cfCheckLogin()) {
  505. //이상품과 함께본 상품
  506. let targetT = $('#goodsTogetherbArea').find('.item_state').find('button');
  507. //let targetTSize = targetT.length;
  508. targetT.each(function(){
  509. let goodsCd = $(this).attr('goodscd');
  510. var $this = $(this);
  511. let url = "/mypage/wish/list/check/"+goodsCd;
  512. var result = '';
  513. $.ajax({
  514. type: 'get'
  515. , async: false
  516. , url: url
  517. , success: function (data) {
  518. //likeit active
  519. if ("Y" == data){
  520. $this.addClass('likeit').addClass('active');
  521. }
  522. }
  523. });
  524. });
  525. }
  526. }
  527. }
  528. });
  529. }
  530. //구성상품 조회
  531. var fnDealCompsGoods = function(flag, goodsCd){
  532. // 품절제외 여부
  533. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  534. let data = {goodsCd : goodsCd
  535. ,optionSoldoutSkip : optionSoldoutSkip
  536. };
  537. let jsonData = JSON.stringify(data);
  538. $('.form_field .select_custom.item_opt1').attr('disabled', true);
  539. $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
  540. $('.form_field .select_custom.item_opt2').attr('disabled', true);
  541. $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
  542. gagajf.ajaxJsonSubmit('/goods/detail/compsGoods/list', jsonData, function(result) {
  543. if (result.dataList != null && result.dataList.length > 0) {
  544. let tagUpS = "";
  545. $.each(result.dataList, function(idx, item) {
  546. let tagUp = "";
  547. let tag1 = "";
  548. if (idx == 0){
  549. $objUp = $('.pd_detail .opt_select .select_custom.deal_opt_item');
  550. $objUp.remove();
  551. //------
  552. tag1 += '<div class="select_custom deal_opt_item">\n';
  553. tag1 += '<div class="combo">\n';
  554. tag1 += '<div class="select">선택</div>\n';
  555. tag1 += '<ul class="list">\n';
  556. //------
  557. }
  558. let soldoutYn = "";
  559. let disabledYn = "";
  560. if (item.stockQty <= 0) soldoutYn = "true";
  561. if (soldoutYn == "true" || item.goodsStat != 'G008_90') disabledYn = "true";
  562. tagUp += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption1(\'Up\', \''+ item.compsGoodsCd+'\', '+ item.currPrice+ ', \''+ item.selfGoodsYn+'\')">\n';
  563. tagUp += ' <div class="item_prod" goodsCd='+item.compsGoodsCd+'">\n';
  564. tagUp += ' <div class="item_state">\n';
  565. tagUp += ' <a href="javascript:void(0);" class="itemLink">\n';
  566. tagUp += ' <div class="itemPic">\n';
  567. tagUp += ' <img alt="" class="vLHTC pd_img" src="'+_uploadGoodsUrl+'/'+item.sysImgNm+'?RS=44" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png" >\n';
  568. tagUp += ' </div>\n';
  569. tagUp += ' <div class="itemName" ><span class="tit_option">[상품'+(idx+1)+']</span> '+ item.goodsFullNm +'</div>\n';
  570. tagUp += ' <p class="itemPrice">\n';
  571. tagUp += ' '+item.currPrice.addComma()+'\n';
  572. if (Number(item.listPrice) > Number(item.currPrice)){
  573. tagUp += ' <span class="itemPrice_original">'+item.listPrice.addComma()+'</span>\n';
  574. }
  575. if (Number(item.dcRate) > 0){
  576. tagUp += ' <span class="itemPercent">'+item.dcRate+'%</span>\n';
  577. }
  578. tagUp += ' </p>\n';
  579. tagUp += ' </a>\n';
  580. tagUp += ' <input type="hidden" name="selectGoods" goodsNm="[상품'+(idx+1)+']'+item.goodsFullNm +'" currPrice="'+ item.currPrice +'" goodsCd="'+ item.compsGoodsCd +'" />\n';
  581. tagUp += ' </div>\n';
  582. tagUp += ' </div>\n';
  583. tagUp += '</li>\n';
  584. tagUpS += tag1+tagUp
  585. });
  586. if (!gagajf.isNull(tagUpS)){
  587. //------
  588. tagUpS += '</ul>\n';
  589. tagUpS += '</div>\n';
  590. tagUpS += '</div>\n';
  591. //------
  592. }
  593. $('#form_field_item_'+flag).append(tagUpS);
  594. var detail_deal_option = new sCombo('.pd_detail .opt_select .select_custom.deal_opt_item');
  595. }
  596. });
  597. //품절 제외 메세지 처리
  598. getGuidance();
  599. }
  600. // 옵션1 조회
  601. var fnOption1 = function(flag, goodsCd, currPrice, selfGoodsYn){
  602. // 품절제외 여부
  603. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  604. let data = {goodsCd : goodsCd
  605. ,optionSoldoutSkip : optionSoldoutSkip
  606. };
  607. let jsonData = JSON.stringify(data);
  608. $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
  609. $('.form_field .select_custom.item_opt2').attr('disabled', true);
  610. $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
  611. gagajf.ajaxJsonSubmit('/goods/detail/option1/list', jsonData, function(result) {
  612. if (result.dataList != null && result.dataList.length > 0) {
  613. let tagUpS = "";
  614. let tagUp = "";
  615. let $objUp = null;
  616. let qty = 1;
  617. $.each(result.dataList, function(idx, item) {
  618. let tag1 = "";
  619. let tag2 = "";
  620. if (idx == 0){
  621. $objUp = $('.pd_detail .opt_select .select_custom.item_opt1');
  622. $objUp.remove();
  623. //------
  624. tag1 += '<div class="select_custom item_opt1">\n';
  625. tag1 += '<div class="combo">\n';
  626. tag1 += '<div class="select">선택</div>\n';
  627. tag1 += '<ul class="list">\n';
  628. //------
  629. //tag1 += '<li class="selected" id="goodsOpt1">옵션1선택</li>\n';
  630. }
  631. let soldoutYn = "";
  632. let disabledYn = "";
  633. if (item.stockQty <= 0) soldoutYn = "true";
  634. if (soldoutYn == "true" || item.goodsStat != 'G008_90') disabledYn = "true";
  635. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2(this, \'Up\')">\n';
  636. tag2 += '<div class="opt_name">'+ item.optCd1Nm+'</div>\n';
  637. if (item.addPrice > 0){
  638. tag2 += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
  639. }
  640. tag2 += '<input type="hidden" name="opt1" value="'+ goodsCd +'" currPrice="'+ currPrice+'" optCd1="'+item.optCd1+'" minOrdQty="'+item.minOrdQty+'" maxOrdQty="'+item.maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'" />\n';
  641. tag2 += '</li>\n';
  642. tagUpS += tag1+tagUp+tag2;
  643. });
  644. if (!gagajf.isNull(tagUpS)){
  645. //------
  646. tagUpS += '</ul>\n';
  647. tagUpS += '</div>\n';
  648. tagUpS += '</div>\n';
  649. //------
  650. }
  651. $('#form_field1_'+flag).append(tagUpS);
  652. var detail_deal_option02 = new sCombo('.pd_detail .opt_select .select_custom.item_opt1');
  653. }
  654. });
  655. }
  656. // 옵션2 조회
  657. var fnOption2 = function(obj, flag){
  658. let $obj = $(obj);
  659. let $target = $obj.find('input[name="opt1"]');
  660. let goodsCd = $target.val();
  661. let currPrice = $target.attr("currPrice");
  662. let optCd1 = $target.attr("optCd1");
  663. let minOrdQty = $target.attr("minOrdQty");
  664. let maxOrdQty = $target.attr("maxOrdQty");
  665. let selfGoodsYn = $target.attr("selfGoodsYn");
  666. // 품절제외 여부
  667. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  668. let data = {goodsCd : goodsCd
  669. ,optCd1 : optCd1
  670. ,optionSoldoutSkip : optionSoldoutSkip
  671. ,mastrGoodsCd : $('#cartFprm input[name=goodsCd]').val()
  672. };
  673. let jsonData = JSON.stringify(data);
  674. gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
  675. if (result.dataList != null && result.dataList.length > 0) {
  676. let tagUpS = "";
  677. let tagUp = "";
  678. let $objUp = null;
  679. $.each(result.dataList, function(idx, item) {
  680. let tag1 = "";
  681. let tag2 = "";
  682. if (idx == 0){
  683. $objUp = $('.pd_detail .opt_select .select_custom.item_opt2');
  684. // $objUp.html('');
  685. $objUp.remove();
  686. //$('.form_field .select_custom.deal_opt2').attr('disabled', false);
  687. //------
  688. tag1 += '<div class="select_custom item_opt2">\n';
  689. tag1 += '<div class="combo">\n';
  690. tag1 += '<div class="select">선택</div>\n';
  691. tag1 += '<ul class="list">\n';
  692. //------
  693. //tag1 += '<li class="selected" id="goodsOpt2">옵션2</li>\n';
  694. }
  695. let soldoutYn = "";
  696. let disabledYn = "";
  697. if ("Y" == item.soldoutYn || item.stockQty <= 0) soldoutYn = "true";
  698. if (soldoutYn == "true") disabledYn = "true";
  699. tagUp = '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStock(this, \'Up\' )">\n';
  700. tag2 += '<div class="opt_name">'+ item.optCd2+'</div>\n';
  701. if (item.addPrice > 0){
  702. tag2 += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
  703. }
  704. 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+'" giftPackYn="'+item.giftPackYn+'"/>\n';
  705. tag2 += '</li>\n';
  706. tagUpS += tag1+tagUp+tag2;
  707. });
  708. if (!gagajf.isNull(tagUpS)){
  709. //------
  710. tagUpS += '</ul>\n';
  711. tagUpS += '</div>\n';
  712. tagUpS += '</div>\n';
  713. //------
  714. }
  715. $('#form_field2_'+flag).append(tagUpS);
  716. var detail_deal_option03 = new sCombo('.pd_detail .opt_select .select_custom.item_opt2');
  717. }
  718. });
  719. }
  720. //사이즈 클릭시 - 단품
  721. var fnViewStock = function(obj, flag ) {
  722. let $obj = $(obj);
  723. let $target = $obj.find('input[name="opt2"]');
  724. let goodsCd = $target.val();
  725. let currPrice = $target.attr("currPrice");
  726. let optCd = $target.attr("optCd");
  727. let optCd1 = $target.attr("optCd1");
  728. let optCd1Nm = $target.attr("optCd1Nm");
  729. let optCd2 = $target.attr("optCd2");
  730. let minOrdQty = $target.attr("minOrdQty");
  731. let maxOrdQty = $target.attr("maxOrdQty");
  732. let addPrice = $target.attr("addPrice");
  733. let selfGoodsYn = $target.attr("selfGoodsYn");
  734. let giftPackYn = $target.attr("giftPackYn");
  735. let optQty = minOrdQty;
  736. let params = new Object();
  737. params.goodsCd = goodsCd;
  738. params.optCd = optCd;
  739. params.optCd1 = optCd1;
  740. params.optCd2 = optCd2;
  741. params.selfGoodsYn = selfGoodsYn;
  742. // 중복선택 확인 opt_result
  743. var overlap = 0;
  744. $('.pd_detail .opt_result .number_count').each(function() {
  745. if ($('input[name="coption"]', this).val() == optCd) {
  746. ++overlap;
  747. }
  748. });
  749. if (overlap > 0) {
  750. mcxDialog.alert("이미 선택하신 옵션입니다.");
  751. return false;
  752. }
  753. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  754. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  755. if (maxOrdQty > itemCnt) {
  756. maxOrdQty = itemCnt;
  757. }
  758. if (minOrdQty > itemCnt) {
  759. mcxDialog.alert("주문 가능한 옵션이 아닙니다. 옵션을 다시 선택해 주세요.");
  760. return false;
  761. }
  762. //상품정보
  763. let $selObj = null;
  764. $selObj = $('.pd_detail .opt_select .select_custom.deal_opt_item');
  765. let $goodsObj =$selObj.find('.combo .select').find('input[name=selectGoods]');
  766. let goodsNm = $goodsObj.attr('goodsnm');
  767. let goodsCd = $goodsObj.attr('goodscd');
  768. let price = parseInt(currPrice)+ parseInt(addPrice);
  769. let tag = "";
  770. tag += '<div class="result_item result_'+optCd+'">\n';
  771. tag += ' <div class="opt_header">\n';
  772. tag += ' <div class="bundle">\n';
  773. tag += ' <span class="item_name">'+goodsNm+'</span>\n';
  774. tag += ' <span class="item_option">'+optCd1Nm+'/'+optCd2+'</span>\n';
  775. tag += ' </div>\n';
  776. tag += ' </div>\n';
  777. tag += ' <div class="number_count">\n';
  778. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  779. tag += ' <input type="text" name="cea" optCd="'+optCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" giftPackYn="'+giftPackYn+'">\n';
  780. tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  781. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  782. tag += ' </div>\n';
  783. tag += ' <div class="item_price">\n';
  784. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  785. tag += ' </div>\n';
  786. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
  787. tag += '</div>\n';
  788. let $objUp = null;
  789. $objUp = $('.pd_detail .opt_result');
  790. $objUp.prepend(tag);
  791. //선물 주문관련 처리
  792. if ("Y" == giftPackYn) $('#btnGift').show();
  793. $('.price_box').show();
  794. fnSetTotalPrice();
  795. var dTag = '';
  796. dTag += '';
  797. dTag += '<div class="item_prod">\n';
  798. dTag += '<div class="item_state">\n';
  799. dTag += ' <a href="javascript:void(0);" class="itemLink">\n';
  800. dTag += ' <div class="itemPic">\n';
  801. dTag +=' <img class="vLHTC pd_img" src="'+_uploadGoodsUrl +'/'+[[${goodsInfo.sysImgNm}]]+'?RS=285" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png" />\n';
  802. dTag += ' </div>\n';
  803. dTag += ' <div class="itemName">상품선택</div>\n';
  804. dTag += ' </a>\n';
  805. dTag += '</div>\n';
  806. dTag += '</div>\n';
  807. //$('.pd_detail .opt_select .select_custom.deal_opt_item').find('.combo .select').html(dTag);
  808. //var opt_selecter_item = new sCombo('.opt_select .select_custom.deal_opt_item');
  809. $('.form_field .select_custom.deal_opt_item').find('.combo .select').html('선택');
  810. $('.form_field .select_custom.item_opt1').attr('disabled', true);
  811. $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
  812. $('.form_field .select_custom.item_opt2').attr('disabled', true);
  813. $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
  814. $('.pop_option_select').css("display", "none");
  815. }, "text");
  816. }
  817. // 수량 변경 클릭
  818. var fnAdjustOrderEa = function(obj) {
  819. let $obj = $(obj);
  820. let $target = $obj.parent().children('input[name="cea"]');
  821. let ea =parseInt($target.val());
  822. let minOrdQty = 0;
  823. let maxOrdQty = 0;
  824. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  825. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  826. mcxDialog.alert("사이즈를 선택해 주세요.");
  827. return false;
  828. }
  829. minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  830. maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  831. }else{
  832. minOrdQty = parseInt( $target.attr('minOrdQty'));
  833. maxOrdQty = parseInt( $target.attr('maxOrdQty'));
  834. }
  835. if ($obj.attr('adjust') == '-') --ea;
  836. else ++ea;
  837. //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
  838. //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
  839. if (ea.toString().length > maxOrdQty) --ea;
  840. if (ea < 1) ea = minOrdQty;
  841. $target.val(ea);
  842. $target.attr('value', ea);
  843. fnChangeOrderEa($target[0]);
  844. }
  845. //옵션 갯수 변경
  846. var fnChangeOrderEa = function(obj) {
  847. let $obj = $(obj);
  848. let $target = $obj.parent().children('input[name="cea"]');
  849. let ea = parseInt($obj.val());
  850. let optCd = $(obj).attr('optCd');
  851. let minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  852. let maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  853. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  854. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  855. mcxDialog.alert("사이즈를 선택해 주세요.");
  856. return false;
  857. }
  858. }else{
  859. maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
  860. minOrdQty = parseInt($(obj).attr('minOrdQty'));
  861. optCd = $(obj).attr('optCd');
  862. }
  863. let alertMsg = '';
  864. if (ea < minOrdQty) {
  865. alertMsg = minOrdQty+"개 부터 구매 가능합니다.";
  866. ea = minOrdQty;
  867. }
  868. if (ea > maxOrdQty) {
  869. alertMsg = maxOrdQty+"개 까지만 구매 가능합니다.";
  870. ea = maxOrdQty;
  871. }
  872. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  873. $("#cartForm input[name=cea]").val(ea);
  874. $("#cartForm input[name=ordQty]").val(ea);
  875. }
  876. //obj.value = ea;
  877. $target.val(ea);
  878. $target.attr('value', ea);
  879. if (alertMsg != ''){
  880. mcxDialog.alert(alertMsg);
  881. return false;
  882. }
  883. if (ea <= 1){
  884. $('.number_count').find('.minus').addClass('min_val');
  885. }else{
  886. $('.number_count').find('.minus').removeClass('min_val');
  887. }
  888. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  889. }else{
  890. let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
  891. let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
  892. let totalPrice = ((goodsPrice+addPrice) * ea);
  893. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
  894. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
  895. $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
  896. }
  897. fnSetTotalPrice();
  898. }
  899. //합계 계산
  900. var fnSetTotalPrice = function() {
  901. $('.price_box').show();
  902. //let f = document.cartForm;
  903. let totalEa = 0;
  904. let totalPrice = 0;
  905. $('input[name="cea"]', document.cartForm).each(function() {
  906. let ea = parseInt($(this).val());
  907. let target=$('.select_custom.item_opt2');
  908. let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  909. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  910. totalEa += ea;
  911. if (goodsPrice > 0) {
  912. totalPrice += ((goodsPrice+addPrice) * ea);
  913. }
  914. });
  915. $('.price_box .number span').html(totalEa.addComma());
  916. $('.price_box .price > span').html(totalPrice.addComma());
  917. if ($('input[name="cea"]', document.cartForm).length <= 0 ) {
  918. $('.price_box').hide();
  919. }
  920. }
  921. // 선택상품 삭제
  922. var fnSelectGoodsDel = function(optCd){
  923. $('.result_'+optCd).remove();
  924. fnSetTotalPrice();
  925. //선물주문관련 처리
  926. let $target = $('#cartForm input[name=cea]');
  927. let giftPackFlag = false;
  928. $target.each(function() {
  929. let giftPackYn = $(this).attr('giftPackYn');
  930. if ("Y" == giftPackYn ) giftPackFlag = true;
  931. });
  932. if (giftPackFlag){
  933. $('#btnGift').show();
  934. }else{
  935. $('#btnGift').hide();
  936. }
  937. }
  938. //장바구니담기
  939. var fnAddCart = function(btnType, flag){
  940. let compsList = [];
  941. let $target = $('#cartForm input[name=cea]');
  942. let targetSize = $target.length; //선택성품 갯수
  943. if (targetSize <= 0){
  944. mcxDialog.alert("옵션을 선택해 주세요.");
  945. return false;
  946. }
  947. if (btnType == "G" && targetSize > 1){
  948. mcxDialog.alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.");
  949. return false;
  950. }
  951. $target.each(function() {
  952. let ea = parseInt($(this).val());
  953. let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
  954. let optCd = $(this).parent().find('input[name="coption"]').val();
  955. //let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  956. //let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  957. var obj = new Object();
  958. obj.cartGb = btnType;
  959. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  960. obj.goodsCd = goodsCd;
  961. obj.optCd = optCd;
  962. obj.goodsQty = ea;
  963. obj.dealGoodsCd = $("#cartForm input[name=goodsCd]").val();
  964. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  965. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  966. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  967. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  968. compsList.push(obj);
  969. });
  970. // 장바구니담기
  971. cfnAddCart(compsList);
  972. }
  973. //팝업 - 딜상세팝업 구매하기버튼 > 옵션셀렉트팝업
  974. var fnGoodsDealSaleOpen = function(goodsCd){
  975. $("#pdDescrpPop .close-modal ").click();
  976. $('.container').addClass('btPop_open');
  977. $(".pop_option_select").show();
  978. $('body').css('overflow', 'hidden'); // 210819_ 스크롤 강제 제어
  979. $('body').css('height', '100%'); // 210819_ 스크롤 강제 제어
  980. popOpenScroll();
  981. let selIdx = 0;
  982. $('.pop_option_select').find('#form_field_item_Up .list li').each(function() {
  983. if (goodsCd == $(this).find('.item_prod').attr('goodscd')){
  984. return false;
  985. }
  986. selIdx ++;
  987. });
  988. $('.pop_option_select').find('#form_field_item_Up .list li').eq(selIdx).trigger("click");
  989. return false;
  990. }
  991. //팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업
  992. var fnGoodsDealOptionOpen = function(goodsCd){
  993. $('.container').addClass('btPop_open');
  994. $(".pop_option_select").show();
  995. $('body').css('overflow', 'hidden'); // 210819_ 스크롤 강제 제어
  996. $('body').css('height', '100%'); // 210819_ 스크롤 강제 제어
  997. popOpenScroll();
  998. let selIdx = 0;
  999. $('.pop_option_select').find('#form_field_item_Up .list li').each(function() {
  1000. if (goodsCd == $(this).find('.item_prod').attr('goodscd')){
  1001. return false;
  1002. }
  1003. selIdx ++;
  1004. });
  1005. $('.pop_option_select').find('#form_field_item_Up .list li').eq(selIdx).trigger("click");
  1006. return false;
  1007. }
  1008. // pop open
  1009. function popOpenScroll(){
  1010. $('html, body').css({'overflow': 'hidden', 'height': '100%'});
  1011. $('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
  1012. event.preventDefault();
  1013. event.stopPropagation();
  1014. return false;
  1015. });
  1016. }
  1017. // pop close
  1018. function popClsScroll(){
  1019. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  1020. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  1021. return false;
  1022. }
  1023. // pop close
  1024. function popClsScroll2(){
  1025. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  1026. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  1027. return false;
  1028. }
  1029. // 상품평 상세 레이어 호출후 콜백에서 호출하므로 여기에 있어야함
  1030. var fnReviewDetailLayerCollBack = function(){
  1031. }
  1032. $(document).ready( function() {
  1033. $('.timer_box').css('display', 'none');
  1034. var params = new Object();
  1035. params.goodsCd = [[${params.goodsCd}]];
  1036. params.colorCd = [[${params.colorCd}]];
  1037. params.viewDt = [[${params.viewDt}]];
  1038. params.preview = [[${params.preview}]];
  1039. params.adminYn = [[${params.adminYn}]];
  1040. params.goodsType = [[${params.goodsType}]];
  1041. params.supplyCompCd = [[${params.supplyCompCd}]];
  1042. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  1043. // 함께본 상품(ajax html)
  1044. params.goodsOtherGb = "together";
  1045. params.ithrCd = "tmtb";
  1046. params.contentsLoc = "tmtb";
  1047. fnGoodsTogetherSearch(params);
  1048. if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
  1049. $('.timer_box').css('display', 'block');
  1050. /* 행사 남은시간 */
  1051. function promotionTimer() {
  1052. var endTime = new Date([[${goodsInfo.socialEddt}]]); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
  1053. endTime = (Date.parse(endTime) / 1000);
  1054. var now = new Date();
  1055. now = (Date.parse(now) / 1000);
  1056. var timeLeft = endTime - now;
  1057. var days = Math.floor(timeLeft / 86400);
  1058. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  1059. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  1060. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  1061. if (hours < '10') { hours = '0' + hours; }
  1062. if (minutes < '10') { minutes = '0' + minutes; }
  1063. if (seconds < '10') { seconds = '0' + seconds; }
  1064. if (Number(days) > 0 ){
  1065. // hours = Number(hours) + (Number(days) * 24);
  1066. $('#d-days').html(days);
  1067. }else{
  1068. $('#d-days').hide();
  1069. }
  1070. $('#d-hours').html(hours);
  1071. $('#d-minutes').html(minutes);
  1072. $('#d-seconds').html(seconds);
  1073. }
  1074. setInterval(function() { promotionTimer(); }, 1000);
  1075. }
  1076. var opt_selecter_item = new sCombo('.opt_select .select_custom.deal_opt_item');
  1077. //var item_opt01 = new sCombo('.pd .pop_option_select .item_opt1');
  1078. //var item_opt02 = new sCombo('.pd .pop_option_select .item_opt2');
  1079. var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
  1080. //옵션변경 셀렉트
  1081. var opt_selecter01 = new sCombo('.pd .pop_option_select .item_opt1');
  1082. $('.pd .pop_option_select .select_custom .combo .list > li').click(function(e) {
  1083. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  1084. return false;
  1085. });
  1086. var opt_selecter02 = new sCombo('.pd .pop_option_select .item_opt2');
  1087. //슬라이드 - 베스트리뷰
  1088. var riviewSwiper = new Swiper('.pd .riview_box .area_slider .swiper-container', {
  1089. slidesPerView: 1,
  1090. spaceBetween: 8,
  1091. speed: 1000,
  1092. loop: true,
  1093. pagination: {
  1094. el: '.swiper-pagination',
  1095. type: 'fraction',
  1096. },
  1097. });
  1098. //슬라이드 - 제품사진
  1099. var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  1100. slidesPerView:1,
  1101. speed: 1000,
  1102. pagination: {
  1103. el: '.swiper-pagination',
  1104. type: 'fraction',
  1105. },
  1106. });
  1107. //슬라이드 - 함께하면 할인되는 다다익선 상품
  1108. var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
  1109. slidesPerView: 3,
  1110. spaceBetween: 8,
  1111. speed: 1000,
  1112. });
  1113. //슬라이드 - 이 상품과 함께 본 상품
  1114. var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
  1115. slidesPerView: 2,
  1116. spaceBetween: 8,
  1117. speed: 1000,
  1118. });
  1119. //슬라이드 - STYLE24의 스타일링 추천
  1120. var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
  1121. slidesPerView: 1,
  1122. spaceBetween: 0,
  1123. speed: 1000,
  1124. pagination: {
  1125. el: '.swiper-pagination',
  1126. type: 'fraction',
  1127. },
  1128. });
  1129. var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
  1130. observer: true,
  1131. observeParents: true,
  1132. slidesPerView: 3,
  1133. spaceBetween: 8,
  1134. speed: 1000,
  1135. });
  1136. $(".pic_list > div").hide();
  1137. $(".pic_list > div").eq(0).fadeIn();
  1138. rcmdPicimgSwiper.on('slideChange', function () {
  1139. var pic_index=this.activeIndex;
  1140. $(".pic_list > div").hide();
  1141. $(".pic_list > div").eq(pic_index).fadeIn();
  1142. });
  1143. //슬라이드 - 동일브랜드 상품 추천
  1144. var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {
  1145. slidesPerView: 3,
  1146. spaceBetween: 8,
  1147. speed: 1000,
  1148. });
  1149. //슬라이드 - 이 상품과 비슷한 상품
  1150. var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
  1151. slidesPerView: 3,
  1152. spaceBetween: 8,
  1153. speed: 1000,
  1154. });
  1155. //슬라이드 - 베스트리뷰팝업
  1156. var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
  1157. observer: true,
  1158. observeParents: true,
  1159. speed: 1000,
  1160. slidesPerView: 1,
  1161. pagination: {
  1162. el: '.swiper-pagination',
  1163. type: 'fraction',
  1164. },
  1165. });
  1166. //슬라이드 - 포토,영상리뷰팝업
  1167. var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
  1168. observer: true,
  1169. observeParents: true,
  1170. speed: 1000,
  1171. slidesPerView: 1,
  1172. pagination: {
  1173. el: '.swiper-pagination',
  1174. type: 'fraction',
  1175. },
  1176. });
  1177. //탭 - 사이즈정보 > 탭
  1178. $(document).on('click','#infoSizePop .tab_nav ul li',function(e){
  1179. $(this).addClass('active').siblings().removeClass('active');
  1180. $('#infoSizePop .tab_cont_wrap .tab_cont').hide();
  1181. $('#infoSizePop .tab_cont_wrap .tab_cont').eq($(this).index()).show();
  1182. return false;
  1183. });
  1184. //탭 - 사이즈정보 > 서브탭
  1185. $(document).on('click','#infoSizePop .sub_tab_nav ul li',function(e){
  1186. var value=$(this).find("a").text();
  1187. var catTxt=$(".category_open").text();
  1188. console.log(value)
  1189. $(this).addClass('active').siblings().removeClass('active');
  1190. $(this).parents('.tab_cont').find('.sub_tab_cont').hide();
  1191. $(this).parents('.tab_cont').find('.sub_tab_cont').eq($(this).index()).show();
  1192. $(this).parents().parents().parents().parents().parents(".category_box").hide();
  1193. $(this).parents().parents().parents().parents().parents(".category_box").prev(".category_open").text(value);
  1194. return false;
  1195. });
  1196. //팝업 - 사이즈정보 > 서브탭 - 카테고리팝오픈
  1197. $(document).on('click','#infoSizePop .category_open',function(e){
  1198. $(this).siblings().show();
  1199. return false;
  1200. });
  1201. $(document).on('click','#infoSizePop .category_close',function(e){
  1202. $(this).parents().parents(".category_box").hide();
  1203. return false;
  1204. });
  1205. //팝업 - 상품문의 리스트
  1206. $(document).on('click','#btn_pdQnaList_pop',function(e){
  1207. $("#pdQnaListPop").modal("show");
  1208. return false;
  1209. });
  1210. //팝업 - 상품문의 작성
  1211. $(document).on('click','#btn_pdQnaWrite_pop',function(e){
  1212. $("#pdQnaWritePop").modal("show");
  1213. return false;
  1214. });
  1215. /*
  1216. //팝업 - 제품리뷰 > 카테고리팝오픈
  1217. // 오픈
  1218. $(document).on('click','.pd_review .category_open > li',function(e){
  1219. var dataName=$(this).attr("data_name");
  1220. $(".pd_review .category_box").show();
  1221. $(".pd_review .category_list").find(".category").hide();
  1222. $(".pd_review .category_list").find("#"+dataName).show();
  1223. return false;
  1224. });
  1225. // 닫기
  1226. $(document).on('click','.pd_review .category_box .category_close',function(e){
  1227. $(".pd_review .category_box").hide();
  1228. return false;
  1229. });
  1230. // 변경
  1231. $(document).on('click','.pd_review .category ul > li',function(e){
  1232. var num=$(".pd_review .category_open > li").length;
  1233. var value=$(this).find("a").attr("data");
  1234. var name=$(this).parent().parent().attr("id");
  1235. $(this).parent().find("li").removeClass("active");
  1236. $(this).addClass("active");
  1237. for(var i=0; i < num; i++){
  1238. var dataname=$(".pd_review .category_open > li").eq(i).attr("data_name");
  1239. if(name==dataname){
  1240. $(".pd_review .category_open > li").eq(i).find("span").text(value);
  1241. }
  1242. }
  1243. return false;
  1244. }); */
  1245. // 포토,베스트리뷰숨김
  1246. var review_open=$(".btn_review_open");
  1247. $(document).on('click','.btn_review_open',function(e){
  1248. $(this).toggleClass('active');
  1249. $(this).next(".review_list").toggleClass('active');
  1250. return false;
  1251. });
  1252. // =============구매하기팝업========================================================
  1253. //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
  1254. $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
  1255. $(".pop_option_select").show();
  1256. $('body').css('overflow', 'hidden'); // 210819_ 스크롤 강제 제어
  1257. $('body').css('height', '100%'); // 210819_ 스크롤 강제 제어
  1258. return false;
  1259. });
  1260. $(document).on('click','.pop_option_select .close',function(e){
  1261. $(".pop_option_select").hide();
  1262. $(".option_open").removeClass("on");
  1263. $('.form_field .select_custom.deal_opt_item').find('.combo .select').html('선택');
  1264. $('.form_field .select_custom.item_opt1').attr('disabled', true);
  1265. $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
  1266. $('.form_field .select_custom.item_opt2').attr('disabled', true);
  1267. $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
  1268. return false;
  1269. })
  1270. // //팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업 ==> fnGoodsDealOptionOpen()대체
  1271. // $(document).on('click','.pd_dealitem .item_prod .btn_default',function(e){
  1272. // $('.container').addClass('btPop_open');
  1273. // $(".Purchase_pop .pop_option_select").show();
  1274. // popOpenScroll();
  1275. // return false;
  1276. // });
  1277. //팝업 - 딜상세팝업 구매하기버튼 > 옵션셀렉트팝업 ==> fnGoodsDealSaleOpen()대체
  1278. // $(document).on('click','#pdDescrpPop .modal-footer button',function(e){
  1279. // $("#pdDescrpPop .close-modal ").click();
  1280. // $('.container').addClass('btPop_open');
  1281. // $(".Purchase_pop .pop_option_select").show();
  1282. // popOpenScroll();
  1283. // return false;
  1284. // });
  1285. // ============================================================================//
  1286. // =============딜리스트팝업========================================================
  1287. //팝업 - 딜리뷰상품 리스트팝업
  1288. $(document).on('click','.deal_listReview_open',function(e){
  1289. $("#listReviewPop").show();
  1290. return false;
  1291. }).on('click','#listReviewPop .close, #listReviewPop .deal_list_select ul > li',function(e){
  1292. $("#listReviewPop").hide();
  1293. return false;
  1294. });
  1295. //팝업 - 딜문의상품 리스트팝업
  1296. $(document).on('click','.deal_listQna_open',function(e){
  1297. $("#listQnaPop").show();
  1298. return false;
  1299. }).on('click','#listQnaPop .close, #listQnaPop .deal_list_select ul > li',function(e){
  1300. $("#listQnaPop").hide();
  1301. return false;
  1302. });
  1303. //팝업 - 딜배송상품 리스트팝업
  1304. $(document).on('click','.deal_listDelivery_open',function(e){
  1305. $("#listDeliveryPop").show();
  1306. return false;
  1307. }).on('click','#listDeliveryPop .close, #listDeliveryPop .deal_list_select ul > li',function(e){
  1308. $("#listDeliveryPop").hide();
  1309. return false;
  1310. });
  1311. //팝업 - 딜상세정보 리스트팝업
  1312. $(document).on('click','#pdDescrpPop .deal_listDescrp_open',function(e){
  1313. $(this).toggleClass("active");
  1314. $("#listDescrpPop").toggle();
  1315. return false;
  1316. }).on('click','#listDescrpPop .deal_list_select ul > li',function(e){
  1317. $("#pdDescrpPop .deal_listDescrp_open").removeClass("active");
  1318. $("#listDescrpPop").hide();
  1319. return false;
  1320. });
  1321. // ============================================================================//
  1322. //탭 - 딜상품 > 상품상세정보 탭
  1323. $(document).on('click','.pd.deal .tab_detail_nav ul li',function(e){
  1324. $(this).addClass('active').siblings().removeClass('active');
  1325. $('.pd.deal .tab_detail_cont').hide();
  1326. $('.pd.deal .tab_detail_cont').eq($(this).index()).show();
  1327. /* //상품상세정보 호출
  1328. $('.pd_review .cont_body').load('pd_review_pop.html');
  1329. $('.pd_qnalist .cont_body').load('pd_qnalist_pop.html');
  1330. $('.pd_delivery .cont_body').load('pd_delivery_pop.html');
  1331. return false; */
  1332. });
  1333. //탭 - 딜상품 > 상세정보 탭 고정
  1334. $(window).scroll(function(){
  1335. var scrollTop= $(window).scrollTop();
  1336. var tabTop=$('.pd_desc_wrap').offset().top;
  1337. if (scrollTop >= tabTop){
  1338. $('.tab_detail_nav').addClass('fix');
  1339. } else {
  1340. $('.tab_detail_nav').removeClass('fix');
  1341. }
  1342. });
  1343. $('.Purchase_pop .btPop_close').click(function(){
  1344. $('html, body').css({'overflow': 'visible', 'height': '100%'});
  1345. $('.container').removeClass('btPop_open');
  1346. autome.style.top = 100 + "%";
  1347. return false;
  1348. });
  1349. //관심상품 등록
  1350. $(document).on('click','.pd .itemLike',function(e){
  1351. $(this).toggleClass('active');
  1352. return false;
  1353. });
  1354. //pd전용 - 썸네일/헤더 블라인드 생성 : 210520_ 추가
  1355. $('.pd .thumb_box .thumb_list .swiper-slide').prepend('<span></span>');
  1356. // pd전용 - 스크롤 스크립트
  1357. //탭 - 딜상품 > 상세정보 탭 고정
  1358. $(window).scroll(function(){
  1359. var scrollTop= $(window).scrollTop();
  1360. var tabTop=$('.pd_desc_wrap').offset().top;
  1361. if (scrollTop >= tabTop){
  1362. $('.tab_detail_nav').addClass('fix');
  1363. } else {
  1364. $('.tab_detail_nav').removeClass('fix');
  1365. }
  1366. var lastScrollTop = 0;
  1367. var st = $(this).scrollTop();
  1368. if($('header').hasClass("main") !== true){
  1369. if (st > lastScrollTop){
  1370. $(".app .gnb").css("position", "fixed");
  1371. $(".htop").css("background", "#fff");
  1372. $(".app .gnb .btn-expand").css("position", "fixed");
  1373. $(".tabbar").removeClass("fixed");
  1374. $(".thumb_list .swiper-slide span").animate({"opacity": 0}, 30);
  1375. } else {
  1376. $(".app .gnb").css("position", "fixed");
  1377. $(".htop").css("background", "#fff");
  1378. $(".app .gnb .btn-expand").css("position", "fixed");
  1379. $(".tabbar").addClass("fixed");
  1380. $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 30);
  1381. setTimeout(function(){
  1382. if($(window).scrollTop() === 0){
  1383. $(".app .gnb").css("position", "relative");
  1384. $(".app .gnb .btn-expand").css("position", "absolute");
  1385. }
  1386. },300)
  1387. }
  1388. if(st < 10) {
  1389. $(".htop").css("background", "transparent");
  1390. $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 0);
  1391. }
  1392. lastScrollTop = st;
  1393. }
  1394. });
  1395. $(document).on('click','.pop_open_btn',function(){
  1396. $('.modal.photo_comment_popup .pop_detail').toggleClass('active');
  1397. });
  1398. let vh = window.innerHeight * 0.01;
  1399. document.documentElement.style.setProperty('--vh', `${vh}px`);
  1400. // 210407_스크롤감지 헤더 그림자
  1401. $('.pd_delivery_pop').scroll(function(){
  1402. $(".pd_delivery_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  1403. $(".pd_delivery_pop .modal-header").css("border-bottom", "0px none");
  1404. if($(".pd_delivery_pop").scrollTop() === 0){
  1405. $(".pd_delivery_pop .modal-header").css("box-shadow", "none");
  1406. $(".pd_delivery_pop .modal-header").css("border-bottom", "1px solid #eee");
  1407. }
  1408. });
  1409. $('.pd_review_pop').scroll(function(){
  1410. $(".pd_review_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  1411. $(".pd_review_pop .modal-header").css("border-bottom", "0px none");
  1412. if($(".pd_review_pop").scrollTop() === 0){
  1413. $(".pd_review_pop .modal-header").css("box-shadow", "none");
  1414. $(".pd_review_pop .modal-header").css("border-bottom", "1px solid #eee");
  1415. }
  1416. });
  1417. $('.pd_qnalist_pop').scroll(function(){
  1418. $(".pd_qnalist_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  1419. $(".pd_qnalist_pop .modal-header").css("border-bottom", "0px none");
  1420. if($(".pd_qnalist_pop").scrollTop() === 0){
  1421. $(".pd_qnalist_pop .modal-header").css("box-shadow", "none");
  1422. $(".pd_qnalist_pop .modal-header").css("border-bottom", "1px solid #eee");
  1423. }
  1424. });
  1425. // 탭별 선택시 기본 상품 설정
  1426. let selIdx = 0;
  1427. $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').each(function() {
  1428. if (typeof ($(this).attr('aria-disabled')) == 'undefined' || !$(this).attr('aria-disabled')){
  1429. return false;
  1430. }
  1431. selIdx ++;
  1432. });
  1433. $('.pd_pop.pd_listReview_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  1434. $('.pd_pop.pd_listQna_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  1435. $('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').eq(selIdx).trigger("click");
  1436. });
  1437. // 광고 스크립트용
  1438. var goodsNavigation = [[${goodsNavigation}]];
  1439. var cate1No = "";
  1440. var cate2No = "";
  1441. var cate3No = "";
  1442. var cate4No = "";
  1443. var cate5No = "";
  1444. var cate1Nm = "";
  1445. var cate2Nm = "";
  1446. var cate3Nm = "";
  1447. var cate4Nm = "";
  1448. var cate5Nm = "";
  1449. if (!gagajf.isNull(goodsNavigation)) {
  1450. cate1No = goodsNavigation.cate1No;
  1451. cate2No = goodsNavigation.cate2No;
  1452. cate3No = goodsNavigation.cate3No;
  1453. cate4No = goodsNavigation.cate4No;
  1454. cate5No = goodsNavigation.cate5No;
  1455. cateNm = cate3No;
  1456. cate1Nm = goodsNavigation.cate1Nm;
  1457. cate2Nm = goodsNavigation.cate2Nm;
  1458. cate3Nm = goodsNavigation.cate3Nm;
  1459. cate4Nm = goodsNavigation.cate4Nm;
  1460. cate5Nm = goodsNavigation.cate5Nm;
  1461. }
  1462. // 광고 스크립트용
  1463. var snsGoodsImg = _uploadGoodsUrl + "/"+ [[${goodsInfo.sysImgNm}]];
  1464. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + [[${params.goodsCd}]];// +'&colorCd =' + params.colorCd
  1465. if (typeof ([[${params.colorCd}]]) != 'undefined') snsUrl += "&colorCd=" + [[${params.colorCd}]];
  1466. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  1467. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  1468. $("meta[property='og:url']").attr('content', snsUrl);
  1469. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  1470. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  1471. $("meta[property='og:image']").attr('content', snsGoodsImg);
  1472. <!-- 트위터 관련 메타태그 -->
  1473. $("meta[name='twitter:url']").attr('content', snsUrl);
  1474. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  1475. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  1476. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  1477. // 추천솔류션 meta 설정
  1478. $("meta[property='eg:type']").attr('content',"product");
  1479. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  1480. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  1481. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  1482. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  1483. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  1484. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  1485. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  1486. $("meta[property='eg:category1']").attr('content',cate1No);
  1487. $("meta[property='eg:category2']").attr('content',cate2No);
  1488. $("meta[property='eg:category3']").attr('content',cate3No);
  1489. $("meta[property='eg:category4']").attr('content',cate4No);
  1490. $("meta[property='eg:category5']").attr('content',cate5No);
  1491. $("meta[property='eg:category1_name']").attr('content',cate1Nm);
  1492. $("meta[property='eg:category2_name']").attr('content',cate2Nm);
  1493. $("meta[property='eg:category3_name']").attr('content',cate3Nm);
  1494. $("meta[property='eg:category4_name']").attr('content',cate4Nm);
  1495. $("meta[property='eg:category5_name']").attr('content',cate5Nm);
  1496. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  1497. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  1498. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1499. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1500. $("meta[property='eg:stock']").attr('content',[[${goodsInfo.goodsStockQty}]]);
  1501. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStat}]]);
  1502. $("meta[property='eg:description']").attr('content',null);
  1503. $("meta[property='eg:extraImage']").attr('content',null);
  1504. $("meta[property='eg:locale']").attr('content',"KR");
  1505. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  1506. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  1507. /*]]>*/
  1508. </script>
  1509. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  1510. <!-- 네이버페이 랜딩페이지 -->
  1511. <script th:inline="javascript">
  1512. if(!wcs_add) var wcs_add = {};
  1513. wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
  1514. wcs.inflow("style24.com");
  1515. wcs_do();
  1516. </script>
  1517. <!-- 광고 스크립트 -->
  1518. <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
  1519. <!-- //광고 스크립트 -->
  1520. </th:block>
  1521. </body>
  1522. </html>