GoodsDealDetailFormWeb.html 69 KB

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