GoodsDealDetailFormMob.html 64 KB

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