GoodsDetailFormMob.html 142 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238
  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 : GoodsDetailFormMob.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.02 eskim 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
  22. <form id="nPayForm" name="nPayForm"></form>
  23. <form id="nPayWishForm" name="nPayWishForm" method="get">
  24. <input type="hidden" name="SHOP_ID" />
  25. <input type="hidden" name="ITEM_ID" />
  26. </form>
  27. <form name="cartForm" id="cartForm" method="post">
  28. <input type="hidden" name="mode">
  29. <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
  30. <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
  31. <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
  32. <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
  33. <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
  34. <input type="hidden" name="optCd" />
  35. <input type="hidden" name="optCd1" />
  36. <input type="hidden" name="optCd2" />
  37. <input type="hidden" name="addPrice" />
  38. <input type="hidden" name="ordQty" />
  39. <input type="hidden" name="stock" />
  40. <input type="hidden" name="minOrdQty" th:value="${goodsInfo.minOrdQty}"/>
  41. <input type="hidden" name="maxOrdQty" th:value="${goodsInfo.maxOrdQty}"/>
  42. <input type="hidden" name="currPrice" th:value="${goodsInfo.currPrice}"/>
  43. <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
  44. <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
  45. <main role="" id="" class="container pd" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
  46. <!-- ★ 컨텐츠 시작 -->
  47. <section class="pd_detail">
  48. <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
  49. <div class="pd_info">
  50. <div class="pd_info1" data-speed="10">
  51. <div class="inner wide" th:if="${(goodsImgList != null and !goodsImgList.empty) or (goodsVideoList != null and !goodsVideoList.empty)}">
  52. <div class="thumb_box">
  53. <div class="area_slider">
  54. <div class="swiper-container thumb_list">
  55. <div class="swiper-wrapper">
  56. <th:block th:each="goodsVideo, status : ${goodsVideoList}">
  57. <div class="swiper-slide">
  58. <div class="movbox">
  59. <th:block th:if="${goodsVideo.videoGb == 'Y'}">
  60. <iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  61. <!-- <div id="utbplayer"></div>
  62. <script src="https://www.youtube.com/iframe_api"></script>아래 원문에서 복잡하게 기술되었던 부분
  63. <script th:inline="javascript">
  64. /*<![CDATA[*/
  65. var player;
  66. function onYouTubeIframeAPIReady(){
  67. player = new YT.Player('utbplayer',{
  68. width:'100%',
  69. videoId:[[${goodsVideo.kmcKey}]],
  70. playerVars:{'autoplay':1,'playsinline':1},
  71. events:{ 'onReady':onPlayerReady,
  72. 'onStateChange': onPlayerStateChange
  73. }
  74. });
  75. }
  76. function onPlayerReady(e){
  77. e.target.mute();
  78. e.target.playVideo();
  79. }
  80. var done = false;
  81. function onPlayerStateChange(event) {
  82. if (event.data == YT.PlayerState.PLAYING && !done) {
  83. setTimeout(stopVideo, 6000);
  84. done = true;
  85. }
  86. }
  87. function stopVideo() {
  88. player.stopVideo();
  89. }
  90. /*]]>*/
  91. </script> -->
  92. </th:block>
  93. <th:block th:unless="${goodsVideo.videoGb == 'Y'}">
  94. <button id="prodMovBtn" type="button" class="btn_play" data-setplay="play">동영상보기</button>
  95. <iframe id="child" class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey}" frameborder="0" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe>
  96. </th:block>
  97. </div>
  98. </div>
  99. </th:block>
  100. <th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')? (status.count +1): status.count }">
  101. <div class="swiper-slide" th:id="${'navLocate'+ count}"
  102. th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1')
  103. or #strings.contains(goodsImg.sysImgNm,'_L1')
  104. or #strings.contains(goodsImg.sysImgNm,'_L2'))}">
  105. <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 -->
  106. </th:block>
  107. </div>
  108. <!-- Add Pagination -->
  109. <div class="swiper-pagination"></div>
  110. <!-- 210728_ 수정 : 팝업 좌우버튼 추가. -->
  111. <div class="swiper-button-next"></div>
  112. <div class="swiper-button-prev"></div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="inner">
  119. <!-- 210409_ 구조변경 : .covered 추가 -->
  120. <div class="covered">
  121. <div class="timer_box" style="display:none;">
  122. <p>
  123. <span class="tt">남은시간</span>
  124. <span class="timer">
  125. <em id="d-days">0</em>
  126. <em id="d-hours">0</em>
  127. <em id="d-minutes">0</em>
  128. <em id="d-seconds">0</em>
  129. </span>
  130. </p>
  131. </div>
  132. <div class="descript_box">
  133. <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
  134. <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
  135. <p class="price_blk">
  136. <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
  137. <span class="org_price" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" ><del><em th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</em>원</del></span>
  138. <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
  139. </p>
  140. <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
  141. <div class="btn_group_flex" th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  142. <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
  148. <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
  149. </div>
  150. <div class="inner" th:if="${goodsInfo.selfGoodsYn =='Y' and goodsInfo.goodsType =='G056_N'}"> <!-- 자사상품,일반상품 -->
  151. <div class="option_box">
  152. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  153. <div class="opt_header">
  154. <span class="title">컬러</span>
  155. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  156. </div>
  157. <ul>
  158. <li th:each="goodsOption1, status : ${goodsOption1List}">
  159. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]],'IN15_01')"> <!-- 해당 컬러 상품페이지로 이동 -->
  160. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  161. </a>
  162. </li>
  163. </ul>
  164. </div>
  165. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
  166. <div class="opt_header">
  167. <span class="title">사이즈</span>
  168. <span class="size">
  169. <em class="selectOptCd1"></em>
  170. <em class="selectOptCd1addPrice"></em>
  171. </span>
  172. </div>
  173. <div class="form_field">
  174. <div th:each="goodsOption2, status : ${goodsOption2List}">
  175. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  176. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
  177. <th:block th:if="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
  178. <label th:for="${goodsOption2.optCd}"><span th:text="${goodsOption2.optCd2}" >90</span></label>
  179. </th:block>
  180. <th:block th:unless="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
  181. <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )"><span th:text="${goodsOption2.optCd2}">90</span></label>
  182. </th:block>
  183. </div>
  184. </div>
  185. </div>
  186. <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
  187. </div>
  188. </div>
  189. <div class="inner" th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
  190. <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
  191. <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
  192. <script type="text/javascript" >
  193. /*버튼설정*/
  194. naver.NaverPayButton.apply({
  195. BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
  196. TYPE : "MA", // 버튼 모음 종류 설정
  197. COLOR : 1, // 버튼 모음의 색 설정
  198. COUNT : 2, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
  199. ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
  200. BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
  201. WISHLIST_BUTTON_HANDLER : wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
  202. "":""
  203. });
  204. /*네이버구매하기*/
  205. function buy_nc(url) {
  206. $(".container").addClass('btPop_open');
  207. }
  208. <!-- 구매불가 -->
  209. function not_buy_nc() {
  210. mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
  211. return false;
  212. }
  213. <!-- 찜하기 -->
  214. function wishlist_nc() {
  215. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  216. let goodsNm = "[[${goodsInfo.goodsNm}]]";
  217. let colorCd = "[[${goodsInfo.colorCd}]]";
  218. let currPrice = "[[${goodsInfo.currPrice}]]";
  219. let sysImgNm = "[[${goodsInfo.sysImgNm}]]";
  220. let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
  221. let data = {};
  222. data.goodsCd = goodsCd;
  223. data.goodsNm = goodsNm;
  224. data.colorCd = colorCd;
  225. data.currPrice = currPrice;
  226. data.sysImgNm = sysImgNm;
  227. data.selfGoodsYn = selfGoodsYn;
  228. let jsonData = JSON.stringify(data);
  229. $.ajax( {
  230. type : "POST",
  231. url : "/pg/create/npay/zzim",
  232. dataType : 'json',
  233. data : jsonData,
  234. beforeSend : function(xhr, settings) {
  235. xhr.setRequestHeader("AJAX" , "true");
  236. xhr.setRequestHeader('Accept' , 'application/json');
  237. xhr.setRequestHeader('Content-Type' , 'application/json');
  238. },
  239. error: function(xhr, status, error) {
  240. mcxDialog.alert(status + '; ' + error);
  241. },
  242. success : function(result) {
  243. if (result.state == "success") {
  244. $('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
  245. $('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);
  246. document.nPayWishForm.action = result.actionMobile;
  247. document.nPayWishForm.submit();
  248. } else {
  249. mcxDialog.alert(result.message);
  250. }
  251. }
  252. });
  253. }
  254. </script>
  255. </th:block>
  256. </div>
  257. <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  258. (goodsCouponList != null and !goodsCouponList.empty) or
  259. (tmtbList != null and !tmtbList.empty) or
  260. (freeGoodsList != null and !freeGoodsList.empty) or
  261. (goodsCoupon1List != null and !goodsCoupon1List.empty)}" >
  262. <div class="benefit_box">
  263. <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or
  264. (tmtbList != null and !tmtbList.empty) or
  265. (freeGoodsList != null and !freeGoodsList.empty) or
  266. (goodsCoupon1List != null and !goodsCoupon1List.empty)}" >
  267. <dt>쇼핑혜택</dt>
  268. <dd>
  269. <th:block th:if="${goodsCoupon1List != null and !goodsCoupon1List.empty}">
  270. <span th:each="goodsCoupon, status : ${goodsCoupon1List}" th:if="${status.first}"><em>
  271. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  272. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  273. </em> 즉시할인</span>
  274. </th:block>
  275. <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  276. <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
  277. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  278. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  279. </em> 쿠폰 할인</span>
  280. </th:block>
  281. <th:block th:if="${tmtbList != null and !tmtbList.empty}">
  282. <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
  283. <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'원'}"></th:block></em> 이상 구매 시
  284. <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> 할인
  285. </span>
  286. </th:block>
  287. <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
  288. <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
  289. <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'N'}" th:text="${'외 택1'}"></th:block></span>
  290. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  291. </dd>
  292. </dl>
  293. <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
  294. <dt>카드혜택</dt>
  295. <dd>
  296. <th:block th:each="cardInfo, status : ${cardInfoList}">
  297. <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>
  298. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  299. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  300. </th:block>
  301. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  302. </dd>
  303. </dl>
  304. </div>
  305. </div>
  306. </div>
  307. <div class="inner tmtb" th:if="${goodsList != null and !goodsList.empty}" >
  308. <div class="pd_together" id="goodsTmtbArea">
  309. <h3 class="tit">
  310. 함께하면 할인되는 다다익선 상품
  311. </h3>
  312. <div class="area_slider">
  313. <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
  314. <div class="swiper-wrapper">
  315. <div class="swiper-slide" th:each="goodsInfo, status : ${goodsList}">
  316. <div class="item_prod">
  317. <div class="item_state">
  318. <button type="button" class="itemLike enp_mobon_wish" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsInfo.goodsCd}, goodsNm=${goodsInfo.goodsFullNm}, ithrCd='IN15_02', contentsLoc='', planDtlSq=''">관심상품 추가</button>
  319. <a href="javascript:void(0);" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], '','IN15_02','','','pc_detail');" class="itemLink" >
  320. <div class="itemPic">
  321. <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=156'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  322. </div>
  323. <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
  324. <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
  325. <p class="itemPrice">
  326. <th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"></th:block>
  327. </p>
  328. </a>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. <div class="inner wide">
  338. <div class="brand_home">
  339. <a href="javascript:void(0);" class="link_go" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" th:text="|${goodsInfo.brandGroupNm} 브랜드홈|" >NBA 브랜드홈</a>
  340. </div>
  341. </div>
  342. <div class="inner wide">
  343. <div class="content pd_descrp">
  344. <div class="cont_head">
  345. <h3 class="sr-only">상품상세정보</h3>
  346. </div>
  347. <div class="cont_body">
  348. <!-- 상품설명 노출 -->
  349. <div class="descrp_box" th:if="${goodsInfo.tobeFormYn == 'Y'}">
  350. <div class="desc_simple"> <!-- 상품 간략설명-->
  351. <span class="tit_desc" th:if="${goodsInfo.goodsTitle != null and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
  352. <p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
  353. 슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다.
  354. </p>
  355. </div>
  356. <div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
  357. <span class="tit_desc">상품특징</span>
  358. <p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
  359. - 지퍼플러 장식을 더해 완성도를 높여줌
  360. </p>
  361. </div>
  362. </div>
  363. <!-- //상품설명 노출 -->
  364. <!-- 공지사항 노출 -->
  365. <div class="mdhtml_box bnnoti" th:if="${goodsNoticeList != null and !goodsNoticeList.empty}">
  366. <th:block th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
  367. </div>
  368. <!-- 상세 동영상 노출 -->
  369. <div class="mdhtml_box" th:if="${goodsDescVideoList != null and !goodsDescVideoList.empty}">
  370. <!-- 관리자 에디터입력 내용 공지 html -->
  371. <th:block th:each="goodsVideo, status : ${goodsDescVideoList}">
  372. <div class="movblock">
  373. <th:block th:if="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
  374. <div style="height:4rem"></div><!-- 여백용 html -->
  375. <iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  376. </th:block>
  377. <th:block th:unless="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
  378. <div style="height:4rem"></div><!-- 여백용 html -->
  379. <iframe th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey+'?player_version=html5' }" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
  380. </th:block>
  381. </div>
  382. </th:block>
  383. </div>
  384. <!-- 상세 베너 -->
  385. <div class="mdhtml_box bnnoti" th:if="${goodsDescBannerList != null and !goodsDescBannerList.empty}">
  386. <th:block th:each="goodsBanner, status : ${goodsDescBannerList}" th:with="target=${(goodsBanner.linkTarget == 'N')? '_blank': '_self'}">
  387. <th:block th:if="${goodsBanner.linkUrl != null and not #strings.equals(goodsBanner.linkUrl, '#')}">
  388. <div style="height:4rem"></div><!-- 여백용 html -->
  389. <p><a th:href="${goodsBanner.linkUrl}" th:target="${target}"><img th:src="${imgUrl+goodsBanner.imgPath}" alt=""></a></p>
  390. </th:block>
  391. <th:block th:unless="${goodsBanner.linkUrl != null and not #strings.equals(goodsBanner.linkUrl, '#')}" >
  392. <div style="height:4rem"></div><!-- 여백용 html -->
  393. <p><img th:src="${imgUrl+goodsBanner.imgPath}" alt=""></p>
  394. </th:block>
  395. </th:block>
  396. </div>
  397. <!-- 관리자 에디터입력 내용 노출 -->
  398. <div class="mdhtml_box bnnoti" th:if="${goodsInfo.goodsTopDesc != null and !goodsInfo.goodsTopDesc.empty }" >
  399. <div style="height:4rem"></div><!-- 여백용 html -->
  400. <th:block th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block>
  401. </div>
  402. <th:block th:if="${goodsInfo.tobeFormYn == 'N' and goodsInfo.goodsDesc != null and !goodsInfo.goodsDesc.empty}" >
  403. <div style="height:4rem"></div><!-- 여백용 html -->
  404. <div class="mdhtml_box" >
  405. <div id="goodsDescHtml"></div>
  406. </div>
  407. </th:block>
  408. <th:block th:if="${goodsInfo.tobeFormYn == 'Y'}">
  409. <!-- 착용컷 노출 -->
  410. <div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_C1')
  411. or #strings.contains(goodsImgList,'_C2')
  412. or #strings.contains(goodsImgList,'_C3')
  413. or #strings.contains(goodsImgList,'_C4')
  414. or #strings.contains(goodsImgList,'_C5')}">
  415. <span class="tit_view">OUTFIT VIEW</span>
  416. <span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
  417. <div class="view">
  418. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
  419. or #strings.contains(goodsImg.sysImgNm,'_C2')
  420. or #strings.contains(goodsImg.sysImgNm,'_C3')
  421. or #strings.contains(goodsImg.sysImgNm,'_C4')
  422. or #strings.contains(goodsImg.sysImgNm,'_C5')}">
  423. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  424. </th:block>
  425. </div>
  426. </div>
  427. <!-- //착용컷 노출 -->
  428. <!-- 상품컷 노출 -->
  429. <div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
  430. or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
  431. or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
  432. or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
  433. or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
  434. or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
  435. or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
  436. or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
  437. or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
  438. or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
  439. or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
  440. <span class="tit_view">PRODUCT VIEW</span>
  441. <div class="view">
  442. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01') or #strings.contains(goodsImg.sysImgNm,'_02')
  443. or #strings.contains(goodsImg.sysImgNm,'_D1') or #strings.contains(goodsImg.sysImgNm,'_D2')
  444. or #strings.contains(goodsImg.sysImgNm,'_D3') or #strings.contains(goodsImg.sysImgNm,'_D4')
  445. or #strings.contains(goodsImg.sysImgNm,'_D5') or #strings.contains(goodsImg.sysImgNm,'_D6')
  446. or #strings.contains(goodsImg.sysImgNm,'_D7') or #strings.contains(goodsImg.sysImgNm,'_D8')
  447. or #strings.contains(goodsImg.sysImgNm,'_D9') or #strings.contains(goodsImg.sysImgNm,'_D10')
  448. or #strings.contains(goodsImg.sysImgNm,'_D11') or #strings.contains(goodsImg.sysImgNm,'_D12')
  449. or #strings.contains(goodsImg.sysImgNm,'_D13') or #strings.contains(goodsImg.sysImgNm,'_D14')
  450. or #strings.contains(goodsImg.sysImgNm,'_D15') or #strings.contains(goodsImg.sysImgNm,'_D16')
  451. or #strings.contains(goodsImg.sysImgNm,'_D17') or #strings.contains(goodsImg.sysImgNm,'_D18')
  452. or #strings.contains(goodsImg.sysImgNm,'_D19') or #strings.contains(goodsImg.sysImgNm,'_D20')}">
  453. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  454. </th:block>
  455. </div>
  456. </div>
  457. <!-- //상품컷 노출 -->
  458. <!-- 원단 노출 -->
  459. <div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_F1')}">
  460. <span class="tit_view">FABRIC</span>
  461. <div class="view">
  462. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}" >
  463. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  464. </th:block>
  465. </div>
  466. </div>
  467. <!-- //원단 노출 -->
  468. <!-- 라벨 노출 -->
  469. <div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1')
  470. or #strings.contains(goodsImgList,'_L2')}">
  471. <span class="tit_view">LABEL INFO</span>
  472. <div class="view">
  473. <span>
  474. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
  475. or #strings.contains(goodsImg.sysImgNm,'_L2')}">
  476. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  477. </th:block>
  478. </span>
  479. </div>
  480. </div>
  481. <!-- //네이밍룰 안맞는 이미지 노출 -->
  482. <div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01')}">
  483. <div class="view">
  484. <th:block th:each="goodsImg, status : ${goodsImgList}" >
  485. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  486. </th:block>
  487. </div>
  488. </div>
  489. </th:block>
  490. <!-- 세트상품일 경우구상상품의 정보도 노출 -START -->
  491. <th:block th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
  492. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  493. <th:block th:if="${ goodsCompose.tobeFormYn == 'N' and goodsCompose.goodsDesc != null and !goodsCompose.goodsDesc.empty}" >
  494. <div style="height:4rem"></div><!-- 여백용 html -->
  495. <div class="mdhtml_box" >
  496. <div class="mdhtml_box" >
  497. <div th:id="${'goodsDescHtml_' + goodsCompose.compsGoodsCd}"></div>
  498. </div>
  499. </div>
  500. </th:block>
  501. <th:block th:if="${goodsCompose.tobeFormYn == 'Y'}">
  502. <!-- 상품명 -->
  503. <div class="mdhtml_box">
  504. <span class="tit_view" th:text="${goodsCompose.compsGoodsNm}">상품명</span>
  505. </div>
  506. <!-- 착용컷 노출 -->
  507. <div class="view_outfit_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_C1')
  508. or #strings.contains(goodsCompose.goodsImgList,'_C2')
  509. or #strings.contains(goodsCompose.goodsImgList,'_C3')
  510. or #strings.contains(goodsCompose.goodsImgList,'_C4')
  511. or #strings.contains(goodsCompose.goodsImgList,'_C5')}">
  512. <span class="tit_view">OUTFIT VIEW</span>
  513. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${status.first}">
  514. <span class="model_info" th:text="${goodsImg.modelInfo}">(모델정보 : 185cm / 78kg / XL 착용)</span>
  515. </th:block>
  516. <div class="view">
  517. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
  518. or #strings.contains(goodsImg.sysImgNm,'_C2')
  519. or #strings.contains(goodsImg.sysImgNm,'_C3')
  520. or #strings.contains(goodsImg.sysImgNm,'_C4')
  521. or #strings.contains(goodsImg.sysImgNm,'_C5')}">
  522. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  523. </th:block>
  524. </div>
  525. </div>
  526. <!-- //착용컷 노출 -->
  527. <!-- 상품컷 노출 -->
  528. <div class="view_detail_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_01') or #strings.contains(goodsCompose.goodsImgList,'_02')
  529. or #strings.contains(goodsCompose.goodsImgList,'_D1') or #strings.contains(goodsCompose.goodsImgList,'_D2')
  530. or #strings.contains(goodsCompose.goodsImgList,'_D3') or #strings.contains(goodsCompose.goodsImgList,'_D4')
  531. or #strings.contains(goodsCompose.goodsImgList,'_D5') or #strings.contains(goodsCompose.goodsImgList,'_D6')
  532. or #strings.contains(goodsCompose.goodsImgList,'_D7') or #strings.contains(goodsCompose.goodsImgList,'_D8')
  533. or #strings.contains(goodsCompose.goodsImgList,'_D9') or #strings.contains(goodsCompose.goodsImgList,'_D10')
  534. or #strings.contains(goodsCompose.goodsImgList,'_D11') or #strings.contains(goodsCompose.goodsImgList,'_D12')
  535. or #strings.contains(goodsCompose.goodsImgList,'_D13') or #strings.contains(goodsCompose.goodsImgList,'_D14')
  536. or #strings.contains(goodsCompose.goodsImgList,'_D15') or #strings.contains(goodsCompose.goodsImgList,'_D16')
  537. or #strings.contains(goodsCompose.goodsImgList,'_D17') or #strings.contains(goodsCompose.goodsImgList,'_D18')
  538. or #strings.contains(goodsCompose.goodsImgList,'_D19') or #strings.contains(goodsCompose.goodsImgList,'_D20')}">
  539. <span class="tit_view">PRODUCT VIEW</span>
  540. <div class="view">
  541. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01') or #strings.contains(goodsImg.sysImgNm,'_02')
  542. or #strings.contains(goodsImg.sysImgNm,'_D1') or #strings.contains(goodsImg.sysImgNm,'_D2')
  543. or #strings.contains(goodsImg.sysImgNm,'_D3') or #strings.contains(goodsImg.sysImgNm,'_D4')
  544. or #strings.contains(goodsImg.sysImgNm,'_D5') or #strings.contains(goodsImg.sysImgNm,'_D6')
  545. or #strings.contains(goodsImg.sysImgNm,'_D7') or #strings.contains(goodsImg.sysImgNm,'_D8')
  546. or #strings.contains(goodsImg.sysImgNm,'_D9') or #strings.contains(goodsImg.sysImgNm,'_D10')
  547. or #strings.contains(goodsImg.sysImgNm,'_D11') or #strings.contains(goodsImg.sysImgNm,'_D12')
  548. or #strings.contains(goodsImg.sysImgNm,'_D13') or #strings.contains(goodsImg.sysImgNm,'_D14')
  549. or #strings.contains(goodsImg.sysImgNm,'_D15') or #strings.contains(goodsImg.sysImgNm,'_D16')
  550. or #strings.contains(goodsImg.sysImgNm,'_D17') or #strings.contains(goodsImg.sysImgNm,'_D18')
  551. or #strings.contains(goodsImg.sysImgNm,'_D19') or #strings.contains(goodsImg.sysImgNm,'_D20')}">
  552. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  553. </th:block>
  554. </div>
  555. </div>
  556. <!-- //상품컷 노출 -->
  557. <!-- 원단 노출 -->
  558. <div class="view_fabric_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_F1')}">
  559. <span class="tit_view">FABRIC</span>
  560. <div class="view">
  561. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}">
  562. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  563. </th:block>
  564. </div>
  565. </div>
  566. <!-- //원단 노출 -->
  567. <!-- 라벨 노출 -->
  568. <div class="view_label_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_L1')
  569. or #strings.contains(goodsCompose.goodsImgList,'_L2')}">
  570. <span class="tit_view">LABEL INFO</span>
  571. <div class="view">
  572. <span>
  573. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
  574. or #strings.contains(goodsImg.sysImgNm,'_L2')}">
  575. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=250'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  576. </th:block>
  577. </span>
  578. </div>
  579. </div>
  580. <!-- //네이밍룰 안맞는 이미지 노출 -->
  581. <div class="view_detail_box" th:if="${not #strings.contains(goodsCompose.goodsImgList,'_01')}">
  582. <div class="view">
  583. <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" >
  584. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  585. </th:block>
  586. </div>
  587. </div>
  588. <!-- //라벨 노출 -->
  589. </th:block>
  590. </th:block>
  591. </th:block>
  592. <!-- 세트상품일 경우구상상품의 정보도 노출 -END -->
  593. <!-- 관리자 에디터입력 내용 노출 하다단 html -->
  594. <div class="mdhtml_box bnnoti" th:if="${goodsInfo.goodsDownDesc != null and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
  595. <!-- 브랜드 노출 -->
  596. <div class="brand_box">
  597. <p class="name" th:text="${goodsInfo.brandGroupNm}">TBJ 티비제이</p>
  598. <a href="javascript:void(0);" class="brend_home" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" ><span>브랜드 홈 바로가기</span></a>
  599. </div>
  600. <!-- //브랜드 노출 -->
  601. <!-- 상품필수정보 노출 -->
  602. <div class="required_box">
  603. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
  604. <span class="title">상품고시정보</span>
  605. <div class="tbl type1">
  606. <table>
  607. <tbody>
  608. <tr th:each="goodsNoti, status : ${goodsNotiList}" >
  609. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  610. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  611. </tr>
  612. </tbody>
  613. </table>
  614. </div>
  615. </div>
  616. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
  617. <span class="title">상품고시정보</span>
  618. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  619. <div class="tbl type1">
  620. <table>
  621. <tbody>
  622. <tr th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
  623. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  624. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  625. </tr>
  626. </tbody>
  627. </table>
  628. </div>
  629. </th:block>
  630. </div>
  631. <th:block th:if="${goodsInfo.goodsType == 'G056_N' and goodsSafeNo != null}" >
  632. <th:block th:if="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
  633. <div class="area_kcl no-mark">
  634. <div>
  635. <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
  636. <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 제품 상세정보 내 별도 표기</p>
  637. <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
  638. </div>
  639. </div>
  640. </th:block>
  641. <th:block th:unless="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
  642. <th:block th:if="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
  643. <div class="area_kcl">
  644. <div><i class="ico ico_kcl"></i></div>
  645. <div>
  646. <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
  647. <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 공급자적합성확인</p>
  648. <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
  649. </div>
  650. </div>
  651. </th:block>
  652. <th:block th:unless="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
  653. <div class="area_kcl" >
  654. <div><i class="ico ico_kcl"></i></div>
  655. <div>
  656. <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  657. <p class="tit normal">
  658. <th:block th:if="${goodsSafeNo.certDiv}" th:text="${goodsSafeNo.certDiv}"></th:block>
  659. <th:block th:if="${goodsSafeNo.certOrganName}" th:text="${' /' + goodsSafeNo.certOrganName}"></th:block>
  660. </p>
  661. </th:block>
  662. <th:block th:unless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  663. <p class="tit normal" >
  664. <th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
  665. <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block>
  666. </p>
  667. </th:block>
  668. <p class="normal" th:if="${goodsSafeNo.certNum}">
  669. <th:block th:if="${goodsSafeNo.certFormGb == 'G084_4' or goodsSafeNo.certFormGb == 'G084_5' }">
  670. <span>인증번호:</span> <th:block th:text="${goodsSafeNo.certNum}">CB123A123-1234</th:block>
  671. </th:block>
  672. <th:block th:unless="${goodsSafeNo.certFormGb == 'G084_4' or goodsSafeNo.certFormGb == 'G084_5' }">
  673. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.certNum}">CB123A123-1234</a>
  674. </th:block>
  675. </p>
  676. </div>
  677. </div>
  678. </th:block>
  679. </th:block>
  680. <p class="t_info dot_info mt10">
  681. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  682. </p>
  683. </th:block>
  684. <th:block th:if="${goodsInfo.goodsType == 'G056_S'}">
  685. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  686. <th:block th:if="${goodsCompose.goodsSafeNo != null}">
  687. <th:block th:if="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
  688. <div class="area_kcl no-mark">
  689. <div>
  690. <p class="tit normal"><th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
  691. <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block> / 제품 상세정보 내 별도 표기</p>
  692. <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
  693. </div>
  694. </div>
  695. </th:block>
  696. <th:block th:unless="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
  697. <th:block th:if="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
  698. <div class="area_kcl">
  699. <div><i class="ico ico_kcl"></i></div>
  700. <div>
  701. <p class="tit normal"><th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
  702. <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block> / 공급자적합성확인</p>
  703. <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
  704. </div>
  705. </div>
  706. </th:block>
  707. <th:block th:unless="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
  708. <div class="area_kcl" >
  709. <div><i class="ico ico_kcl"></i></div>
  710. <div>
  711. <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  712. <p class="tit normal" >
  713. <th:block th:if="${goodsCompose.goodsSafeNo.certDiv}" th:text="${goodsCompose.goodsSafeNo.certDiv}"></th:block>
  714. <th:block th:if="${goodsCompose.goodsSafeNo.certOrganName}" th:text="${' /' + goodsCompose.goodsSafeNo.certOrganName}"></th:block>
  715. </p>
  716. </th:block>
  717. <th:block th:unless="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  718. <p class="tit normal">
  719. <th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
  720. <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block>
  721. </p>
  722. </th:block>
  723. <p class="normal" th:if="${goodsCompose.goodsSafeNo.certNum}">
  724. <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb == 'G084_4' or goodsCompose.goodsSafeNo.certFormGb == 'G084_5' }">
  725. <span>인증번호:</span> <th:block th:text="${goodsCompose.goodsSafeNo.certNum}">CB123A123-1234</th:block>
  726. </th:block>
  727. <th:block th:unless="${goodsCompose.goodsSafeNo.certFormGb == 'G084_4' or goodsCompose.goodsSafeNo.certFormGb == 'G084_5' }">
  728. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsCompose.goodsSafeNo.certNum})}"
  729. target="_blank" th:text="${goodsCompose.goodsSafeNo.certNum}">CB123A123-1234</a>
  730. </th:block>
  731. </p>
  732. </div>
  733. </div>
  734. </th:block>
  735. </th:block>
  736. <p class="t_info dot_info mt10" >
  737. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  738. </p>
  739. </th:block>
  740. </th:block>
  741. </th:block>
  742. <div class="area_infotbl">
  743. <span class="title">상품기본정보</span>
  744. <th:block th:if="${goodsInfo.goodsType == 'G056_N'} ">
  745. <div class="tbl type1">
  746. <table>
  747. <tbody>
  748. <tr>
  749. <th>상품코드</th>
  750. <td th:text="${goodsInfo.goodsCd}">14443216</td>
  751. </tr>
  752. <tr>
  753. <th>상품구분</th>
  754. <td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
  755. </tr>
  756. <tr>
  757. <th>브랜드</th>
  758. <td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
  759. </tr>
  760. <tr>
  761. <th>상품명</th>
  762. <td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  763. </tr>
  764. <th:block th:if="${goodsNotiList != null and !goodsNotiList.empty}">
  765. <th:block th:each="goodsNoti, status : ${goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  766. <tr>
  767. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  768. <td th:text="${goodsNoti.niContent}"></td>
  769. </tr>
  770. </th:block>
  771. </th:block>
  772. <tr>
  773. <th>제조국</th>
  774. <td th:text="${goodsInfo.originNm}">베트남</td>
  775. </tr>
  776. </tbody>
  777. </table>
  778. </div>
  779. </th:block>
  780. <th:block th:unless="${goodsInfo.goodsType == 'G056_N'} ">
  781. <th:block th:if="${goodsComposeList != null and !goodsComposeList.empty}">
  782. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  783. <div class="tbl type1">
  784. <table>
  785. <tbody>
  786. <tr>
  787. <th>상품코드</th>
  788. <td th:text="${goodsCompose.compsGoodsCd}">14443216</td>
  789. </tr>
  790. <tr>
  791. <th>상품구분</th>
  792. <td th:text="${goodsCompose.goodsGbNm}">병행수입</td>
  793. </tr>
  794. <tr>
  795. <th>브랜드</th>
  796. <td th:text="${goodsCompose.brandGroupNm}">TBJ</td>
  797. </tr>
  798. <tr>
  799. <th>상품명</th>
  800. <td th:text="${goodsCompose.compsGoodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  801. </tr>
  802. <th:block th:if="${goodsCompose.goodsNotiList != null and !goodsCompose.goodsNotiList.empty}">
  803. <th:block th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  804. <tr>
  805. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  806. <td th:text="${goodsNoti.niContent}"></td>
  807. </tr>
  808. </th:block>
  809. </th:block>
  810. <tr>
  811. <th>제조국</th>
  812. <td th:text="${goodsCompose.originNm}">베트남</td>
  813. </tr>
  814. </tbody>
  815. </table>
  816. </div>
  817. </th:block>
  818. </th:block>
  819. </th:block>
  820. <p class="t_info dot_info mt10">
  821. 주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
  822. </p>
  823. </div>
  824. </div>
  825. <!-- //상품필수정보 노출 -->
  826. </div>
  827. <div class="btn_more_box covered">
  828. <div class="btn_group_flex">
  829. <div>
  830. <button type="button" class="btn btn_default">
  831. <span>상세정보 더보기</span>
  832. </button>
  833. </div>
  834. </div>
  835. </div>
  836. </div>
  837. </div>
  838. <div class="inner">
  839. <!-- 리뷰영역 -->
  840. <div class="riview_box" th:if="${reviewDisplayYn == 'Y'}">
  841. <div class="ex_review">
  842. <a href="javascript:void(0);" id="btn_pdReview_pop" th:onclick="cfGoodsReview([[${goodsInfo.goodsCd}]])">
  843. <span class="tit">리뷰<em class="number">(<th:block th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></span>
  844. <div class="star_score" th:if="${goodsInfo.reviewRegCnt > 0 }">
  845. <span class="star" th:with="starScore=${#numbers.formatDecimal((goodsInfo.score*100/5), 0,0)}">
  846. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  847. </span>
  848. <span class="score" th:text="|${goodsInfo.score}점|">4.3점</span>
  849. </div>
  850. <div class="star_score" th:unless="${goodsInfo.reviewRegCnt > 0 }">
  851. <span class="star">
  852. <em class="progbar" style="width:0%;"></em> <!-- 평점 style로 표기 -->
  853. </span>
  854. <span class="score">0점</span>
  855. </div>
  856. </a>
  857. </div>
  858. <div class="area_slider" id="btn_pdBestReview_pop" th:if="${bestReviewList != null and !bestReviewList.empty}">
  859. <div class="swiper-container">
  860. <div class="swiper-wrapper">
  861. <div class="swiper-slide" th:each="bestReview, status : ${bestReviewList}" >
  862. <!-- 베스트 리뷰 등록시 노출 -->
  863. <div class="best_review">
  864. <a href="javascript:void(0);" th:onclick="cfGoodsReviewDetail([[${goodsInfo.goodsCd}]],'Y', '',[[${bestReview.reviewSq}]])">
  865. <div class="star_score" th:with="starScore=${#numbers.formatDecimal((bestReview.iscore*100/5), 0,0)}">
  866. <span class="star">
  867. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  868. </span>
  869. <em class="ico ico_besttag"></em>
  870. </div>
  871. <div class="lap">
  872. <th:block th:if="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
  873. <div class="pic" >
  874. <th:block th:each="reviewAttach, attachStatus : ${bestReview.reviewAttachList}" th:if="${attachStatus.first}">
  875. <th:block th:if="${reviewAttach.fileGb == 'M'}" >
  876. <span class="thumb mov" th:style="${'background-image:url('+kollusMediaUrl+'/poster/'+reviewAttach.kmcKey+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
  877. </th:block>
  878. <th:block th:unless="${reviewAttach.fileGb == 'M'}" >
  879. <span class="thumb" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span>
  880. </th:block>
  881. </th:block>
  882. </div>
  883. </th:block>
  884. <th:block th:unless="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
  885. <div class="pic none" >
  886. </div>
  887. </th:block>
  888. <div class="txt_best_review">
  889. <p th:text="${bestReview.reviewContent}">옷</p>
  890. </div>
  891. </div>
  892. </a>
  893. </div>
  894. <!-- //베스트 리뷰 등록시 노출 -->
  895. </div>
  896. </div>
  897. <!-- Add Pagination -->
  898. <div class="swiper-pagination"></div>
  899. </div>
  900. </div>
  901. </div>
  902. <!-- //리뷰영역 -->
  903. <!-- 문의,사이즈정보,배송/교환/반품 -->
  904. <div class="exinfo_box">
  905. <ul>
  906. <li>
  907. <div class="ex_qna">
  908. <a href="javascript:void(0);" id="btn_pdQnaList_pop" th:onclick="cfGoodsQng([[${goodsInfo.goodsCd}]])">
  909. <span class="tit">문의<em class="number">(<th:block th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></span>
  910. </a>
  911. </div>
  912. </li>
  913. <li>
  914. <div class="ex_size">
  915. <a href="javascript:void(0)" id="btn_pdSizeInfo_pop" th:onclick="cfGoodsSizeInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.colorCd}]] )">
  916. <span class="tit">사이즈 정보</span>
  917. </a>
  918. </div>
  919. </li>
  920. <li>
  921. <div class="ex_shipping">
  922. <a href="javascript:void(0)" id="btn_pdDelivery_Pop" th:onclick="cfGoodsDelivery([[${goodsInfo.goodsCd}]])">
  923. <span class="tit">배송/교환/반품</span>
  924. </a>
  925. <!-- 해당 배송정보 선택노출 -->
  926. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee > 0}">배송비 <th:block th:text="${#numbers.formatInteger(goodsInfo.delvFee, 0,'COMMA')}" ></th:block>원
  927. <th:block th:if="${goodsInfo.minOrdAmt > 0}">(<th:block th:text="${#numbers.formatInteger(goodsInfo.minOrdAmt, 0,'COMMA')}" ></th:block>원 이상 무료배송)</th:block>
  928. </span>
  929. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee <= 0}">무료배송</span>
  930. <span class="txt_shippingfee" th:if="${goodsInfo.quikDelvYn == 'Y'}">총알배송(오전 10시까지 주문 시)</span>
  931. <!-- //해당 배송정보 선택노출 -->
  932. </div>
  933. </li>
  934. </ul>
  935. </div>
  936. <!-- //문의,사이즈정보,배송/교환/반품 -->
  937. </div>
  938. <div class="inner" id="otherGoodsArea" style="display:none;">
  939. <div class="recommendedArea">
  940. <!-- 이상품과 함께 본 상품영역-->
  941. <div class="pd_clickother" id="goodsTogetherbArea">
  942. </div>
  943. <!-- //이상품과 함께 본 상품영역-->
  944. <!-- STYLE24의 스타일링 추천 -->
  945. <div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}" th:with="ithrCd=aa , contentsLoc=bb" >
  946. <h3 class="tit">STYLE24의 스타일링 추천</h3>
  947. <!-- 상품이미지pic -->
  948. <div class="area_slider pic_img" >
  949. <div class="swiper-container">
  950. <div class="swiper-wrapper">
  951. <div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
  952. <div class="page">
  953. <div class="pic">
  954. <span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
  955. <!-- 상품피커 -->
  956. <th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
  957. th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
  958. <div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
  959. <div>
  960. <button type="button" th:onclick="fnLookbookPicker(this,[[${lookbookGoods.goodsCd}]]);"><span class="ico ico_picker"></span></button>
  961. <div class="pick_descr">
  962. <a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
  963. </div>
  964. </div>
  965. </div>
  966. <!-- //상품피커 -->
  967. </th:block>
  968. </div>
  969. </div>
  970. </div>
  971. </div>
  972. <!-- Add Pagination -->
  973. <div class="swiper-pagination"></div>
  974. </div>
  975. </div>
  976. <!-- //상품이미지pic -->
  977. <!-- 상품이미지pic 리스트 -->
  978. <div class="area_slider pic_list" >
  979. <div class="box" th:each="lookbook, status : ${lookbookList}">
  980. <div class="swiper-container" th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
  981. <div class="swiper-wrapper">
  982. <div class="swiper-slide" th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}" >
  983. <div class="item_prod" th:classappend="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}? 'unable' : ''"
  984. th:attr="goodsCd=${lookbookGoods.goodsCd}, optCdInfo=${lookbookGoods.optCdInfo},
  985. minOrdQty=${lookbookGoods.minOrdQty}, goodsType=${lookbookGoods.goodsType},
  986. ithrCd=${ithrCd}, contentsLoc=${contentsLoc}"> <!-- 판매불가 상품에 unable 추가 -->
  987. <div class="item_state">
  988. <th:block th:each="optCd : ${#strings.arraySplit(lookbookGoods.optCdInfo,',')}">
  989. <input type="hidden" name="lookbookGoodsOptCd" th:value="${optCd}"/>
  990. </th:block>
  991. <button type="button" class="itemLike" th:classappend="${lookbookGoods.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${lookbookGoods.goodsCd}, goodsNm=${lookbookGoods.goodsFullNm}, ithrCd=${ithrCd}, contentsLoc='', planDtlSq=''">관심상품 추가</button>
  992. <th:block th:if="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
  993. <a href="javascript:void(0);" class="itemLink" >
  994. </th:block>
  995. <th:block th:unless="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
  996. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${lookbookGoods.goodsCd}]], '','IN15_06','' )">
  997. </th:block>
  998. <div class="itemPic">
  999. <img class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+lookbookGoods.sysImgNm+'?RS=96'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  1000. </div>
  1001. <p class="itemBrand" th:text="${lookbookGoods.brandGroupNm}">BRAND NAME</p>
  1002. <div class="itemName" th:text="${lookbookGoods.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
  1003. <p class="itemPrice" th:text="${#numbers.formatInteger(lookbookGoods.currPrice, 0,'COMMA')}">80,100</p>
  1004. </a>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. </div>
  1009. </div>
  1010. <div class="btn_group_flex">
  1011. <div>
  1012. <button type="button" class="btn btn_default" onclick="fnAddCartLookBookGoods(this);"><span>모두 쇼핑백 담기</span></button>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. </div>
  1017. <!-- //상품이미지pic 리스트 -->
  1018. <script>
  1019. $('#otherGoodsArea').css('display','block');
  1020. </script>
  1021. </div>
  1022. <!-- //STYLE24의 스타일링 추천 -->
  1023. <!-- 동일브랜드 추천상품 -->
  1024. <div class="pd_clickother" id="goodsRecommendbArea">
  1025. </div>
  1026. <!-- //동일브랜드 추천상품 -->
  1027. <!-- 이 상품과 비슷한 상품영역 -->
  1028. <div class="pd_clickother" id="goodsLikebArea">
  1029. </div>
  1030. <!-- //이 상품과 비슷한 상품영역 -->
  1031. </div>
  1032. </div>
  1033. <!-- 구매하기팝업 -->
  1034. <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
  1035. <a href="javascript:void(0);" class="btn btPop_close">Close </a>
  1036. <div class="header btPop_head btPopAuto_head">
  1037. 구매하기팝업
  1038. </div>
  1039. <div class="body btPop_body btPopAuto_body">
  1040. <div class="option_result op1">
  1041. <!-- 옵션 -->
  1042. <div class="option_box">
  1043. <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
  1044. <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
  1045. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  1046. <div class="opt_header">
  1047. <span class="title">컬러</span>
  1048. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  1049. </div>
  1050. <ul>
  1051. <li th:each="goodsOption1, status : ${goodsOption1List}">
  1052. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]], 'IN15_01')"> <!-- 해당 컬러 상품페이지로 이동 -->
  1053. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="">
  1054. </a>
  1055. </li>
  1056. </ul>
  1057. </div>
  1058. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
  1059. <div class="opt_header">
  1060. <span class="title">사이즈</span>
  1061. <span class="size">
  1062. <em class="selectOptCd1"></em>
  1063. <em class="selectOptCd1addPrice"></em>
  1064. </span>
  1065. </div>
  1066. <div class="form_field">
  1067. <th:block th:each="goodsOption2, status : ${goodsOption2List}">
  1068. <div>
  1069. <th:block th:if="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}" >
  1070. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  1071. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
  1072. <label th:for="${goodsOption2.optCd}" ><span th:text="${goodsOption2.optCd2}">90</span></label>
  1073. </th:block>
  1074. <th:block th:unless="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}" >
  1075. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  1076. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
  1077. <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" ><span th:text="${goodsOption2.optCd2}">90</span></label>
  1078. </th:block>
  1079. </div>
  1080. </th:block>
  1081. </div>
  1082. </div>
  1083. <!-- 해당상품 품절시 노출 -->
  1084. <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
  1085. <!-- //해당상품 품절시 노출 -->
  1086. <div class="opt_count">
  1087. <div class="opt_header">
  1088. <span class="title">수량</span>
  1089. </div>
  1090. <div class="number_count">
  1091. <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
  1092. <input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" readonly>
  1093. <input type="hidden" name="coption" value="" th:attr="price=${goodsInfo.currPrice}">
  1094. <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
  1095. </div>
  1096. </div>
  1097. </th:block>
  1098. </th:block>
  1099. <th:block th:if="${goodsInfo.selfGoodsYn =='N' or goodsInfo.goodsType =='G056_S'}"> <!-- 입점상품 -->
  1100. <div class="opt_select">
  1101. <div class="form_wrap">
  1102. <div class="form_field">
  1103. <div class="select_custom option_open">
  1104. <div class="combo">
  1105. <div class="select">옵션을 선택해주세요.</div>
  1106. </div>
  1107. </div>
  1108. </div>
  1109. </div>
  1110. </div>
  1111. <div class="opt_result">
  1112. </div>
  1113. </th:block>
  1114. </div>
  1115. <div style="margin-top:10px;">
  1116. <th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
  1117. <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
  1118. <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
  1119. <script th:inline="javascript">
  1120. if(!wcs_add) var wcs_add = {};
  1121. wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
  1122. wcs.inflow("style24.com");
  1123. wcs_do();
  1124. </script>
  1125. <script type="text/javascript" >
  1126. /*버튼설정*/
  1127. naver.NaverPayButton.apply({
  1128. BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
  1129. TYPE : "MA", // 버튼 모음 종류 설정
  1130. COLOR : 1, // 버튼 모음의 색 설정
  1131. COUNT : 2, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
  1132. ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
  1133. BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
  1134. WISHLIST_BUTTON_HANDLER : wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
  1135. "":""
  1136. });
  1137. /*네이버구매하기*/
  1138. function buy_nc(url) {
  1139. let goodsType = "[[${goodsInfo.goodsType}]]";
  1140. let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
  1141. if(goodsType == "G056_N") {
  1142. if(selfGoodsYn == "Y") {
  1143. // 자사 일반 상품 정보
  1144. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  1145. let optCd = $(".opt_size .form_field input[type=radio]:checked").attr("optcd");
  1146. let goodsQty = $(".opt_count .number_count input[name=cea]").val();
  1147. if (!goodsQty || goodsQty < 1) {
  1148. mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
  1149. return false;
  1150. }
  1151. if (!optCd) {
  1152. mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
  1153. return false;
  1154. }
  1155. let compsList = [];
  1156. let obj = new Object();
  1157. obj.goodsCd = goodsCd;
  1158. obj.optCd = optCd;
  1159. obj.goodsQty = goodsQty;
  1160. obj.goodsType = goodsType;
  1161. obj.cartGb = "N";
  1162. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1163. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1164. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1165. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1166. compsList.push(obj);
  1167. // 장바구니담기
  1168. cfnAddCart(compsList);
  1169. } else {
  1170. // 입점 일반 상품 정보
  1171. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  1172. let compsList = [];
  1173. if (!goodsCd) {
  1174. mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
  1175. return false;
  1176. }
  1177. $(".opt_result .number_count input[name=cea]").each(function() {
  1178. let optCd = $(this).attr("optcd");
  1179. let goodsQty = $(this).val();
  1180. if (!optCd) {
  1181. mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
  1182. return false;
  1183. }
  1184. if (!goodsQty || goodsQty < 1) {
  1185. mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
  1186. return false;
  1187. }
  1188. let obj = new Object();
  1189. obj.goodsCd = goodsCd;
  1190. obj.optCd = optCd;
  1191. obj.goodsQty = goodsQty;
  1192. obj.goodsType = goodsType;
  1193. obj.cartGb = "N";
  1194. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1195. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1196. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1197. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1198. compsList.push(obj);
  1199. });
  1200. // 장바구니담기
  1201. cfnAddCart(compsList);
  1202. }
  1203. } else {
  1204. // 세트 상품 정보
  1205. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  1206. let cartGoodsList = [];
  1207. $(".option_result .opt_result .result_item").each(function() {
  1208. let compsList = [];
  1209. let goodsList = {
  1210. cartCompsList : new Array()
  1211. }
  1212. let goodsQty = $(this).find(".number_count input[name=cea]").val();
  1213. $(this).find(".bundle").each(function() {
  1214. var obj = new Object();
  1215. obj.cartGb = "N";
  1216. obj.goodsType = goodsType;
  1217. obj.goodsCd = goodsCd;
  1218. obj.itemCd = $(this).find("input[name=selOption]").attr("goodscd");
  1219. obj.optCd = $(this).find("input[name=selOption]").attr("optcd");
  1220. obj.goodsQty = goodsQty;
  1221. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1222. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1223. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1224. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1225. compsList.push(obj);
  1226. });
  1227. goodsList.cartCompsList = compsList;
  1228. cartGoodsList.push(goodsList);
  1229. });
  1230. // 장바구니담기
  1231. cfnAddCart(cartGoodsList);
  1232. }
  1233. return false;
  1234. }
  1235. function buy_nc_req(cartSqArr) {
  1236. let data = { cartSqArr : cartSqArr
  1237. , backUrl : location.href
  1238. , goodsUrl : _PAGE_GOODS_DETAIL
  1239. };
  1240. let jsonData = JSON.stringify(data);
  1241. $.ajax( {
  1242. type : "POST",
  1243. url : "/pg/nPayReq",
  1244. dataType : 'json',
  1245. data : jsonData,
  1246. beforeSend : function(xhr, settings) {
  1247. xhr.setRequestHeader("AJAX" , "true");
  1248. xhr.setRequestHeader('Accept' , 'application/json');
  1249. xhr.setRequestHeader('Content-Type' , 'application/json');
  1250. },
  1251. error: function(xhr, status, error) {
  1252. mcxDialog.alert(status + '; ' + error);
  1253. },
  1254. success : function(result) {
  1255. if (result.state == "sucess") {
  1256. enp('create', 'conversion', 'is24', { device: 'M', paySys: 'naverPay' }); // 모비온 네이버주문형 클릭시
  1257. document.nPayForm.action = result.npayOrderUrl + "/" + result.orderKey + "/" + result.resultNo;
  1258. document.nPayForm.submit();
  1259. } else {
  1260. mcxDialog.alert(result.message);
  1261. }
  1262. }
  1263. });
  1264. }
  1265. <!-- 구매불가 -->
  1266. function not_buy_nc() {
  1267. mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
  1268. return false;
  1269. }
  1270. <!-- 찜하기 -->
  1271. function wishlist_nc() {
  1272. let goodsCd = "[[${goodsInfo.goodsCd}]]";
  1273. let goodsNm = "[[${goodsInfo.goodsNm}]]";
  1274. let colorCd = "[[${goodsInfo.colorCd}]]";
  1275. let currPrice = "[[${goodsInfo.currPrice}]]";
  1276. let sysImgNm = "[[${goodsInfo.sysImgNm}]]";
  1277. let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
  1278. let data = {};
  1279. data.goodsCd = goodsCd;
  1280. data.goodsNm = goodsNm;
  1281. data.colorCd = colorCd;
  1282. data.currPrice = currPrice;
  1283. data.sysImgNm = sysImgNm;
  1284. data.selfGoodsYn = selfGoodsYn;
  1285. let jsonData = JSON.stringify(data);
  1286. $.ajax( {
  1287. type : "POST",
  1288. url : "/pg/create/npay/zzim",
  1289. dataType : 'json',
  1290. data : jsonData,
  1291. beforeSend : function(xhr, settings) {
  1292. xhr.setRequestHeader("AJAX" , "true");
  1293. xhr.setRequestHeader('Accept' , 'application/json');
  1294. xhr.setRequestHeader('Content-Type' , 'application/json');
  1295. },
  1296. error: function(xhr, status, error) {
  1297. mcxDialog.alert(status + '; ' + error);
  1298. },
  1299. success : function(result) {
  1300. if (result.state == "success") {
  1301. $('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
  1302. $('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);
  1303. document.nPayWishForm.action = result.actionMobile;
  1304. document.nPayWishForm.submit();
  1305. } else {
  1306. mcxDialog.alert(result.message);
  1307. }
  1308. }
  1309. });
  1310. }
  1311. </script>
  1312. </th:block>
  1313. </th:block>
  1314. </div>
  1315. </div>
  1316. <!-- 총 결재금액 -->
  1317. <div class="price_box">
  1318. <p class="number">
  1319. 총&nbsp;<span id="goodsTotalQty">0</span>개
  1320. </p>
  1321. <p class="price">
  1322. <span>
  1323. <b id="goodsTotalPrice">0</b><em>원</em>
  1324. </span>
  1325. </p>
  1326. </div>
  1327. </div>
  1328. <div class="body btPop_foot btPopAuto_foot">
  1329. <!-- 하단버튼 -->
  1330. <div class="btn_box">
  1331. <button type="button" class="gift" onclick="fnAddCart('G');" th:if="${goodsInfo.giftPackYn == 'Y'}"><span><span>선물해보세요!</span></span></button>
  1332. <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  1333. <button type="button" class="cart enp_mobon_cart" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
  1334. <button type="button" class="buyNow" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
  1335. </th:block>
  1336. <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  1337. <button class="cantbuying" style="display:block;">SOLD OUT</button>
  1338. </th:block>
  1339. </div>
  1340. </div>
  1341. </div>
  1342. <!-- 구매하기팝업 -->
  1343. <!-- 옵션선택팝업 -->
  1344. <div class="pop_option_select">
  1345. <div class="close">닫기</div>
  1346. <div class="pp_body">
  1347. <div class="pp_cont">
  1348. <div class="opt_select">
  1349. <div class="opt_header">
  1350. <span class="title">옵션선택</span>
  1351. <div class="check_excluding form_field">
  1352. <div>
  1353. <input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnOption1(1,[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
  1354. </div>
  1355. <div class="guidance" >
  1356. <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
  1357. <p>품절 옵션이 제외되었습니다</p>
  1358. </div>
  1359. <script>
  1360. function getGuidance() {
  1361. if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
  1362. $(".guidance").addClass("ontoast");
  1363. setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
  1364. }
  1365. }
  1366. </script>
  1367. </div>
  1368. </div>
  1369. <!-- 일반상품일때 -->
  1370. <th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!-- 입점상품 -->
  1371. <div class="nomOption">
  1372. <div class="form_wrap">
  1373. <div class="form_field" th:id="${'form_field1_'+goodsInfo.goodsCd}">
  1374. <div class="select_custom item_opt1 item_opt1_1" th:classappend="${goodsInfo.goodsCd}" th:attr="id=${goodsInfo.goodsCd}" >
  1375. <div class="combo">
  1376. <div class="select">선택</div>
  1377. <ul class="list" style="display: none;">
  1378. <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li> -->
  1379. <th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
  1380. <li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
  1381. th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}">
  1382. <div th:text="${goodsOption.optCd1}">상품옵션</div>
  1383. <div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
  1384. <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="selfGoodsYn=${goodsOption.selfGoodsYn}"/>
  1385. </li>
  1386. </th:block>
  1387. </ul>
  1388. </div>
  1389. </div>
  1390. </div>
  1391. <div class="form_field" th:id="${'form_field2_'+goodsInfo.goodsCd}">
  1392. <div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}" disabled th:attr="qty=${goodsInfo.minOrdQty}">
  1393. <div class="combo">
  1394. <div class="select">선택</div>
  1395. <ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
  1396. <!-- 옵션2 -->
  1397. </ul>
  1398. </div>
  1399. </div>
  1400. </div>
  1401. </div>
  1402. </div>
  1403. </th:block>
  1404. <!-- //일반상품일때 -->
  1405. <!-- 셋트상품일때 -->
  1406. <th:block th:if="${goodsInfo.goodsType =='G056_S' }"> <!-- 세트상품 -->
  1407. <div class="setOption" th:if="${goodsComposeList != null and !goodsComposeList.empty}" >
  1408. <div class="form_wrap" th:each="goodsCompose, status : ${goodsComposeList}">
  1409. <div class="form_field" th:id="${'form_field1_'+goodsCompose.compsGoodsCd}">
  1410. <p class="title" th:text="${goodsCompose.compsGoodsFullNm}">슬림핏</p>
  1411. <div class="select_custom item_opt1" th:classappend="${'item_opt1_'+status.count +' '+goodsCompose.compsGoodsCd}" th:attr="id=${goodsCompose.compsGoodsCd}, qty=${goodsCompose.qty}"
  1412. th:if="${goodsCompose.goodsOption1List != null and !goodsCompose.goodsOption1List.empty}" >
  1413. <div class="combo">
  1414. <div class="select">선택</div>
  1415. <ul class="list" style="display: none;">
  1416. <th:block th:each="goodsOption, optionStatus : ${goodsCompose.goodsOption1List}" >
  1417. <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsCompose.compsGoodsCd}|" th:if=${optionStatus.first}>선택</li> -->
  1418. <li th:onclick="fnOption2([[${status.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
  1419. th:attr="aria-disabled=${(goodsCompose.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.stockQty <= 0)? 'true':''}"
  1420. ><th:block th:text="${goodsOption.optCd1Nm}"></th:block>
  1421. <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="optCd1=${goodsOption.optCd1},optCd1Nm=${goodsOption.optCd1Nm},optCd2=${goodsOption.optCd2},optCd=${goodsOption.optCd}"/>
  1422. </li>
  1423. </th:block>
  1424. </ul>
  1425. </div>
  1426. </div>
  1427. </div>
  1428. <div class="form_field" th:id="${'form_field2_'+goodsCompose.compsGoodsCd}">
  1429. <div class="select_custom item_opt2" th:classappend="${'item_opt2_'+status.count +' '+goodsCompose.compsGoodsCd}" disabled>
  1430. <div class="combo">
  1431. <div class="select">선택</div>
  1432. <ul class="list" th:id="|goodsOpt2${goodsCompose.compsGoodsCd}|">
  1433. </ul>
  1434. </div>
  1435. </div>
  1436. </div>
  1437. </div>
  1438. </div>
  1439. </th:block>
  1440. </div>
  1441. </div>
  1442. </div>
  1443. </div>
  1444. <!-- //옵션선택팝업 -->
  1445. </section>
  1446. <!-- ★ 컨텐츠 종료 -->
  1447. <!-- 바닥메뉴 -->
  1448. <div class="product_floormenu" th:classappend="${(goodsInfo.stockQty <= 0 or goodsInfo.goodsStat != 'G008_90')? 'soldout':''}"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
  1449. <div class="share_like">
  1450. <button type="button" class="share">공유하기</button>
  1451. <!-- <th:block th:include="~{web/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block> -->
  1452. <button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''"
  1453. onclick="cfnPutWishList(this);"
  1454. th:attr="goodsCd=${params.goodsCd}, goodsNm=${goodsInfo.goodsFullNm}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">위시리스트</button>
  1455. </div>
  1456. <div class="prd_buy">
  1457. <button type="button" class="buying btPop_auto" id="btn_purchase">구매하기</button>
  1458. <button type="button" class="cantbuying">SOLD OUT</button>
  1459. </div>
  1460. <!-- (공통) 공유팝업 -->
  1461. <div class="modal fade" id="tglShare" tabindex="-1" role="dialog" aria-labelledby="aModalLabel" aria-hidden="true">
  1462. <div class="modal-dialog" role="document">
  1463. <div class="modal-content">
  1464. <div class="modal-header">
  1465. <h5 class="modal-title" id="aModalLabel">공유하기</h5>
  1466. </div>
  1467. <th:block th:include="~{mob/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block>
  1468. </div>
  1469. </div>
  1470. </div>
  1471. <script>
  1472. // 공유팝업
  1473. $('.product_floormenu .share').click(function(e){
  1474. e.preventDefault();
  1475. $('#tglShare').modal("show");
  1476. });
  1477. </script>
  1478. </div>
  1479. <!-- //바닥메뉴 -->
  1480. <div class="pd_pop full_pop pd_itemthumb_pop" id="pdItemThumbPop" style="display: none;" th:if="${goodsImgList != null and !goodsImgList.empty}" >
  1481. <div class="full_popup_wrap">
  1482. <h5 class="sr-only">상품썸네일 크게보기</h5>
  1483. <div class="btn_close">
  1484. <a href="javascript:void(0);" id="btn_close_itemThumbPop" onclick="cfCloseLayer('pdItemThumbPop')">닫기버튼</a>
  1485. </div>
  1486. <div class="full_pop_container">
  1487. <th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')? (status.count +1): status.count }">
  1488. <div th:id="${'popThumb'+ count}" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.')
  1489. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  1490. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  1491. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  1492. </div>
  1493. </th:block>
  1494. </div>
  1495. </div>
  1496. </div>
  1497. </main>
  1498. </form>
  1499. <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
  1500. <form id="directOrderForm" method="POST" action="/order/noMember"></form>
  1501. <script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
  1502. <script th:inline="javascript">
  1503. /*<![CDATA[*/
  1504. var cateNm = "";
  1505. // 다다익선 상품
  1506. //var fnGoodsTmtbSearch = function(params) {
  1507. // gagajf.ajaxSubmit("/goods/detail/tmtb/frame", "html", "goodsTmtbArea", params);
  1508. //}
  1509. // 품절처리
  1510. var fnOptionSoldout = function(){
  1511. let $target=$("#cartForm").find('.form_field');
  1512. let soldout = false;
  1513. for(var i=0;i<$target.find('input[name="opt"]').length;i++){
  1514. if($target.find('input[name="opt"]').eq(i).attr('disabled')) {
  1515. soldout = true;
  1516. }
  1517. }
  1518. let goodsType = [[${goodsInfo.goodsType}]];
  1519. if (soldout && goodsType == 'G056_N'&& $("#cartForm input[name=selfGoodsYn]").val() == 'Y') {
  1520. $(".info_restock").show();
  1521. }
  1522. }
  1523. //사이즈 클릭시 - 단품
  1524. var fnViewStock = function(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
  1525. let $obj = $(obj);
  1526. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1527. let $target = null;
  1528. if (selfGoodsYn == "Y"){
  1529. //$target = $obj;
  1530. $target = $obj.parent().find('input[name=opt]');
  1531. $target.prop("checked",true);
  1532. $(".selectOptCd1").html(optCd2);
  1533. }else{
  1534. $target = $obj.find('input[name="opt2"]');
  1535. }
  1536. let addPrice = $target.attr("addPrice");
  1537. $(".selectOptCd1addPrice").html('');
  1538. if (Number(addPrice) > 0) $(".selectOptCd1addPrice").html("(+" + addPrice.addComma() + "원)");
  1539. $("#cartForm input[name=optCd]").val(optCd);
  1540. $("#cartForm input[name=optCd1]").val(optCd1);
  1541. $("#cartForm input[name=optCd2]").val(optCd2);
  1542. $("#cartForm input[name=addPrice]").val(addPrice);
  1543. $("#cartForm input[name=ordQty]").val("");
  1544. let maxCnt = maxOrdQty;
  1545. let params = new Object();
  1546. params.goodsCd = goodsCd;
  1547. params.optCd = optCd;
  1548. params.optCd1 = optCd1;
  1549. params.optCd2 = optCd2;
  1550. params.selfGoodsYn = selfGoodsYn;
  1551. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  1552. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1553. if (maxCnt > itemCnt) {
  1554. maxCnt = itemCnt;
  1555. }
  1556. if (minOrdQty > itemCnt) {
  1557. $target.prop("disabled", true);
  1558. }else{
  1559. $("#cartForm input[name=ordQty]").val(minOrdQty);
  1560. $("#cartForm input[name=maxOrdQty]").val(maxCnt);
  1561. $("#cartForm input[name=minOrdQty]").val(minOrdQty);
  1562. $("#cartForm input[name=cea]").val(minOrdQty);
  1563. //$("#cartForm input[name=cea]").attr("readonly",false);
  1564. $("#cartForm input[name=stock]").val(itemCnt);
  1565. $('.price_box').show();
  1566. fnSetTotalPrice();
  1567. // 모바일에서 작업해야함
  1568. if ('P' != _frontGb) {
  1569. $("#cartForm input[name=opt]").parent().find('label').removeClass('on');
  1570. $("#cartForm input[name=opt]").each(function(){
  1571. if ($(this).attr('optCd') == optCd){
  1572. $(this).parent().find('label').addClass('on');
  1573. }
  1574. });
  1575. }
  1576. }
  1577. }, "text");
  1578. }
  1579. //사이즈 클릭시 - 입점단품
  1580. var fnViewStockSelfNo = function(obj) {
  1581. let $obj = $(obj);
  1582. let $target = $obj.find('input[name="opt2"]');
  1583. let goodsCd = $target.attr("goodsCd");
  1584. //let currPrice = $target.attr("currPrice");
  1585. let currPrice = $('#cartForm input[name=currPrice]').val();
  1586. let optCd = $target.attr("optCd");
  1587. let optCd1 = $target.attr("optCd1");
  1588. let optCd1Nm = $target.attr("optCd1Nm");
  1589. let optCd2 = $target.attr("optCd2");
  1590. let minOrdQty = $target.attr("minOrdQty");
  1591. let maxOrdQty = $target.attr("maxOrdQty");
  1592. let addPrice = $target.attr("addPrice");
  1593. let selfGoodsYn = $target.attr("selfGoodsYn");
  1594. let optQty = minOrdQty;
  1595. let params = new Object();
  1596. params.goodsCd = goodsCd;
  1597. params.optCd = optCd;
  1598. params.optCd1 = optCd1;
  1599. params.optCd2 = optCd2;
  1600. params.selfGoodsYn = selfGoodsYn;
  1601. // 중복선택 확인 opt_result
  1602. var overlap = 0;
  1603. $('.pd_detail .opt_result .number_count').each(function() {
  1604. if ($('input[name="coption"]', this).val() == optCd) {
  1605. ++overlap;
  1606. }
  1607. });
  1608. if (overlap > 0) {
  1609. mcxDialog.alert("이미 선택하신 옵션입니다.");
  1610. return false;
  1611. }
  1612. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  1613. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1614. if (maxOrdQty > itemCnt) {
  1615. maxOrdQty = itemCnt;
  1616. }
  1617. if (minOrdQty > itemCnt) {
  1618. mcxDialog.alert("주문 가능한 옵션이 아닙니다. 옵션을 다시 선택해 주세요.");
  1619. return false;
  1620. }
  1621. //상품정보
  1622. let price = parseInt(currPrice)+ parseInt(addPrice);
  1623. let tag = "";
  1624. tag += '<div class="result_item result_'+optCd+'">\n';
  1625. tag += ' <div class="opt_header">\n';
  1626. tag += ' <div class="bundle">\n';
  1627. tag += ' <span class="item_option">'+optCd1Nm+'/'+optCd2+'</span>\n';
  1628. tag += ' </div>\n';
  1629. tag += ' </div>\n';
  1630. tag += ' <div class="number_count">\n';
  1631. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  1632. tag += ' <input type="text" name="cea" optCd="'+optCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'">\n';
  1633. tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  1634. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  1635. tag += ' </div>\n';
  1636. tag += ' <div class="item_price">\n';
  1637. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  1638. tag += ' </div>\n';
  1639. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
  1640. tag += '</div>\n';
  1641. let $objUp = $('.pd_detail .opt_result');
  1642. $objUp.prepend(tag);
  1643. fnSetTotalPrice();
  1644. $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
  1645. $('.form_field .select_custom.item_opt2').attr('disabled', true);
  1646. $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
  1647. $('.pop_option_select').css("display", "none");
  1648. }, "text");
  1649. }
  1650. //세트 사이즈 클릭시
  1651. function fnViewStockSet(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
  1652. let target=$('.select_custom.item_opt2');
  1653. let targetSize = target.length; //구성품 갯수
  1654. let goodsOption = [];
  1655. let cnt = 0;
  1656. let itemSize = 0;
  1657. let resultOptCd = "";
  1658. target.each(function(){
  1659. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  1660. if (goodsCd != $(this).find('.select').find('input[name=opt2]').attr('goodscd')){
  1661. itemSize ++;
  1662. resultOptCd += $(this).find('.select').find('input[name=opt2]').attr('optcd') + "_";
  1663. goodsOption.push($(this).find('input[name=opt2]').val()); //goodsCd|optCd|qty
  1664. }
  1665. }
  1666. });
  1667. //내가 선택한 상품
  1668. if (typeof ($(obj).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(obj).find('input[name=opt2]').val())){
  1669. itemSize ++;
  1670. }
  1671. //내가 선택하 옵션
  1672. resultOptCd += $(obj).find('input[name=opt2]').attr('optcd') + "_";
  1673. goodsOption.push($(obj).find('input[name=opt2]').val()); //goodsCd|optCd|qty
  1674. // 중복선택 확인 opt_result
  1675. let arrSelOpt = resultOptCd.split("_"); // 내가 선택한 옵션목록
  1676. let selCnt = 0;
  1677. let overlap = 0;
  1678. $('.pd_detail .opt_result .number_count').each(function() {
  1679. let val = $('input[name="coption"]', this).val();
  1680. val = val.replaceAll('result_', '');
  1681. let arrOpt = val.split("_");
  1682. for(var i=0;i<arrOpt.length;i++){
  1683. for(var j=0;j<arrSelOpt.length;j++){
  1684. if (gagajf.isNull(arrOpt[i]) || gagajf.isNull(arrSelOpt[j])) continue;
  1685. if (arrOpt[i] == arrSelOpt[j]){
  1686. selCnt++;
  1687. }
  1688. }
  1689. }
  1690. if (Number(itemSize) == Number(selCnt)) {
  1691. ++overlap;
  1692. }
  1693. });
  1694. if (overlap > 0) {
  1695. mcxDialog.alert("이미 선택하신 옵션입니다.");
  1696. return false;
  1697. }
  1698. let mGoodsCd = $("#cartForm input[name=goodsCd]").val();
  1699. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1700. if (targetSize == itemSize){
  1701. let optQty = minOrdQty;
  1702. let data = {arrGoodsOption : goodsOption
  1703. ,minOrdQty : $("#cartForm input[name=minOrdQty]").val()
  1704. ,maxOrdQty : $("#cartForm input[name=maxOrdQty]").val()
  1705. ,goodsCd : mGoodsCd
  1706. ,selfGoodsYn : selfGoodsYn
  1707. };
  1708. let jsonData = JSON.stringify(data);
  1709. gagajf.ajaxJsonSubmit('/goods/detail/ajaxGoodsSetStockQty', jsonData, function(result) {
  1710. var itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1711. if (maxOrdQty > itemCnt) {
  1712. maxOrdQty = itemCnt;
  1713. }
  1714. if (minOrdQty > itemCnt) {
  1715. mcxDialog.alert("주문 가능한 옵션이 아닙니다. 옵션을 다시 선택해 주세요.");
  1716. return false;
  1717. }
  1718. //상품정보
  1719. let $selObj = $('.pop_option_select .setOption .form_wrap');
  1720. let currPrice = Number($('#cartForm input[name=currPrice]').val());
  1721. let price = currPrice;
  1722. let addPrice = 0;
  1723. resultOptCd = "";
  1724. $selObj.each(function() {
  1725. resultOptCd += $(this).find('input[name=opt2]').attr('optcd') + "_";
  1726. });
  1727. let tag = "";
  1728. tag += '<div class="result_item result_'+resultOptCd+'">\n';
  1729. tag += ' <div class="opt_header">\n';
  1730. $selObj.each(function() {
  1731. tag += ' <div class="bundle">\n';
  1732. tag += ' <span class="item_name">'+$(this).find('.title').text()+'</span>\n';
  1733. tag += ' <span class="item_option">'+$(this).find('input[name=opt2]').attr('optcd1Nm')+'/'+$(this).find('input[name=opt2]').attr('optcd2')+'</span>\n';
  1734. tag += ' <input type="hidden" name="selOption" goodsCd="'+$(this).find('input[name=opt2]').attr('goodsCd')+'" optCd="'+$(this).find('input[name=opt2]').attr('optCd')+'" qty="'+$(this).find('.item_opt1 ').attr('qty')+'" /> \n';
  1735. tag += ' </div>\n';
  1736. addPrice += Number($(this).find('input[name=opt2]').attr('addprice'));
  1737. });
  1738. price = Number(currPrice) + Number(addPrice);
  1739. tag += ' </div>\n';
  1740. tag += ' <div class="number_count">\n';
  1741. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  1742. tag += ' <input type="text" name="cea" optCd="'+resultOptCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'">\n';
  1743. tag += ' <input type="hidden" name="coption" value="'+resultOptCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  1744. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  1745. tag += ' </div>\n';
  1746. tag += ' <div class="item_price">\n';
  1747. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  1748. tag += ' </div>\n';
  1749. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+resultOptCd+'\')"><span>삭제</span></button>\n';
  1750. tag += '</div>\n';
  1751. let $objUp = null;
  1752. $objUp = $('.pd_detail .opt_result');
  1753. $objUp.prepend(tag);
  1754. fnSetTotalPrice();
  1755. target=$('.select_custom.item_opt1');
  1756. target.each(function(){
  1757. $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
  1758. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
  1759. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
  1760. });
  1761. $('.pop_option_select').css("display", "none");
  1762. });
  1763. }
  1764. }
  1765. // 옵션1 조회
  1766. var fnOption1 = function(ridx,goodsCd){
  1767. // 품절제외 여부
  1768. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  1769. // 입점
  1770. if("N" == $("#cartForm input[name=selfGoodsYn]").val() ){
  1771. let data = {goodsCd : goodsCd
  1772. ,optionSoldoutSkip : optionSoldoutSkip
  1773. ,mastrGoodsCd : goodsCd
  1774. };
  1775. let jsonData = JSON.stringify(data);
  1776. $('.form_field .select_custom.item_opt2.' +goodsCd ).attr('disabled', true);
  1777. $('.form_field .select_custom.item_opt2.' +goodsCd ).find('.combo .select').html('선택');
  1778. fnOption1Display(ridx, jsonData, goodsCd );
  1779. }else if("G056_S" == $("#cartForm input[name=goodsType]").val() ){
  1780. let idx = 1;
  1781. target=$('.select_custom.item_opt1');
  1782. target.each(function(){
  1783. $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
  1784. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
  1785. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
  1786. });
  1787. target.each(function(){
  1788. let data = {goodsCd : $(this).attr('id')
  1789. ,optionSoldoutSkip : optionSoldoutSkip
  1790. ,mastrGoodsCd : $('#cartForm input[name=goodsCd]').val()
  1791. };
  1792. let jsonData = JSON.stringify(data);
  1793. fnOption1Display(idx, jsonData, $(this).attr('id') );
  1794. idx++;
  1795. });
  1796. }
  1797. }
  1798. // 옵션1 노출처리
  1799. var fnOption1Display = function(ridx, jsonData, goodsCd ){
  1800. gagajf.ajaxJsonSubmit('/goods/detail/option1/list', jsonData, function(result) {
  1801. if (result.dataList != null && result.dataList.length > 0) {
  1802. let tag = "";
  1803. let $obj = null;
  1804. let selfGoodsYn = 'N';
  1805. $.each(result.dataList, function(idx, item) {
  1806. if (idx == 0){
  1807. //$('.form_field .select_custom.item_opt1.' +item.goodsCd ).attr('disabled', false)
  1808. //------
  1809. tag += '<div class="select_custom item_opt1 item_opt1_'+ridx+ ' '+goodsCd+'" id="'+goodsCd+'" qty="'+item.qty+'">\n';
  1810. tag += '<div class="combo">\n';
  1811. tag += '<div class="select">선택</div>\n';
  1812. tag += '<ul class="list" style="display: none;">\n';
  1813. //------
  1814. //tag += '<li class="selected" id="selfGoodsOpt'+item.goodsCd+'">선택</li>\n';
  1815. selfGoodsYn = item.selfGoodsYn;
  1816. }
  1817. let soldoutYn = "";
  1818. let disabledYn = "";
  1819. if (item.stockQty <= 0) soldoutYn = "true";
  1820. if (soldoutYn == "true" || item.goodsStat != 'G008_90') disabledYn = "true";
  1821. tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2('+ ridx+', \''+ item.goodsCd+'\' , \''+ item.optCd1+'\', \''+ item.minOrdQty+'\', \''+ item.maxOrdQty+'\' )">\n';
  1822. tag += '<div>' +item.optCd1Nm +'</div>';
  1823. tag += '<input type="hidden" name="opt" value="'+ item.goodsCd+'" optCd1="'+ item.optCd1 +'" qty="'+ item.qty +'" />\n';
  1824. tag += '</li>\n';
  1825. });
  1826. if (!gagajf.isNull(tag)){
  1827. //------
  1828. tag += '</ul>\n';
  1829. tag += '</div>\n';
  1830. tag += '</div>\n';
  1831. //------
  1832. }
  1833. if (selfGoodsYn == "Y"){
  1834. if (ridx == 1){
  1835. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1836. }else if (ridx == 2){
  1837. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  1838. }else if (ridx == 3){
  1839. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  1840. }else if (ridx == 4){
  1841. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  1842. }else{
  1843. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  1844. }
  1845. }else{
  1846. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1847. ridx = 1; // 입점은 1로 고정
  1848. }
  1849. // $obj.html('');
  1850. // $obj.append(tag);
  1851. $obj.remove();
  1852. $('#form_field1_'+ goodsCd).append(tag);
  1853. if (selfGoodsYn == "Y"){
  1854. if (ridx == 1){
  1855. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1856. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1 .combo .list > li').eq(0).trigger("click");
  1857. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
  1858. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
  1859. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
  1860. }else if (ridx == 2){
  1861. var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  1862. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2 .combo .list > li').eq(0).trigger("click");
  1863. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').attr('disabled',true);
  1864. }else if (ridx == 3){
  1865. var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  1866. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3 .combo .list > li').eq(0).trigger("click");
  1867. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').attr('disabled',true);
  1868. }else if (ridx == 4){
  1869. var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  1870. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
  1871. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
  1872. }else{
  1873. var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  1874. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
  1875. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
  1876. }
  1877. }else{
  1878. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1879. //$('.pop_option_select .select_custom.item_opt2 .combo .list > li').eq(0).trigger("click");
  1880. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
  1881. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
  1882. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
  1883. }
  1884. }
  1885. //품절 제외 메세지 처리
  1886. getGuidance();
  1887. });
  1888. }
  1889. // 옵션2 조회
  1890. var fnOption2 = function(ridx, goodsCd, optCd1, minOrdQty, maxOrdQty){
  1891. // 품절제외 여부
  1892. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  1893. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1894. let data = {goodsCd : goodsCd
  1895. ,optCd1 : optCd1
  1896. ,optionSoldoutSkip : optionSoldoutSkip
  1897. ,mastrGoodsCd : $('#cartForm input[name=goodsCd]').val()
  1898. };
  1899. let jsonData = JSON.stringify(data);
  1900. gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
  1901. if (result.dataList != null && result.dataList.length > 0) {
  1902. let tag = "";
  1903. let $obj = null;
  1904. let qty = 0; // 구성수량
  1905. if (selfGoodsYn == "Y"){
  1906. if (ridx == 1){
  1907. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1908. }else if (ridx == 2){
  1909. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_2');
  1910. }else if (ridx == 3){
  1911. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_3');
  1912. }else if (ridx == 4){
  1913. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_4');
  1914. }else{
  1915. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_5');
  1916. }
  1917. qty = $obj.parent().parent().find('.select_custom').attr('qty'); // 구성수량
  1918. }else{
  1919. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1920. qty = $obj.attr('qty'); // 구성수량
  1921. ridx = 1; // 입점은 1로 고정
  1922. }
  1923. $.each(result.dataList, function(idx, item) {
  1924. if (idx == 0){
  1925. //$obj = $('#goodsOpt2'+item.goodsCd);
  1926. //$obj = $('.form_field .select_custom.item_opt2.item_opt2_1');
  1927. // $obj.html('');
  1928. $obj.remove();
  1929. // $('.form_field .select_custom.item_opt2.' +item.goodsCd ).attr('disabled', false)
  1930. //------
  1931. tag += '<div class="select_custom item_opt2 item_opt2_'+ridx+ ' '+goodsCd+'" qty="'+minOrdQty+'">\n';
  1932. tag += '<div class="combo">\n';
  1933. tag += '<div class="select">선택</div>\n';
  1934. tag += '<ul class="list">\n';
  1935. //------
  1936. //tag += '<li class="selected" id="goodsOpt2'+item.goodsCd+'">선택</li>\n';
  1937. }
  1938. let soldoutYn = "";
  1939. let disabledYn = "";
  1940. let saleQty = (Number(qty) * Number(minOrdQty));
  1941. if ("Y" == item.soldoutYn || Number(item.stockQty) < Number(saleQty)) soldoutYn = "true";
  1942. if (soldoutYn == "true") disabledYn= "true";
  1943. if (selfGoodsYn == "Y"){
  1944. tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSet(this, \''+ item.goodsCd+'\' , \''+ item.optCd+'\' , \''+ item.optCd1+'\' , \''+ item.optCd2+'\', \''+ minOrdQty+'\', \''+ maxOrdQty+'\')">\n';
  1945. }else{
  1946. tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSelfNo(this)">\n';
  1947. }
  1948. tag += '<div class="opt_name">'+ item.optCd2+'</div>\n';
  1949. if (item.addPrice > 0){
  1950. tag += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
  1951. }
  1952. tag += '<input type="hidden" name="opt2" value="'+ item.goodsCd+'|'+item.optCd +'|'+qty +'" goodsCd="'+item.goodsCd+'" currPrice="'+ item.currPrice +'" addPrice="'+item.addPrice+'" optCd="'+item.optCd+'" optCd1="'+item.optCd1+'" optCd1Nm="'+item.optCd1Nm+'" optCd2="'+item.optCd2+'" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'"/>\n';
  1953. tag += '</li>\n';
  1954. });
  1955. if (!gagajf.isNull(tag)){
  1956. //------
  1957. tag += '</ul>\n';
  1958. tag += '</div>\n';
  1959. tag += '</div>\n';
  1960. //------
  1961. }
  1962. // $obj.append(tag);
  1963. $('#form_field2_'+ goodsCd).prepend(tag);
  1964. if (selfGoodsYn == "Y"){
  1965. if (ridx == 1){
  1966. var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1967. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
  1968. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
  1969. }else if (ridx == 2){
  1970. var opt_selecter02_2 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_2');
  1971. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').addClass('on');
  1972. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').find('.list').css('display','block');
  1973. }else if (ridx == 3){
  1974. var opt_selecter02_3 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_3');
  1975. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').addClass('on');
  1976. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').find('.list').css('display','block');
  1977. }else if (ridx == 4){
  1978. var opt_selecter02_4 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_4');
  1979. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').addClass('on');
  1980. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').find('.list').css('display','block');
  1981. }else{
  1982. var opt_selecter02_5 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_5');
  1983. //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').addClass('on');
  1984. //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').find('.list').css('display','block');
  1985. }
  1986. }else{
  1987. var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1988. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
  1989. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
  1990. }
  1991. }
  1992. });
  1993. }
  1994. // 수량 변경 클릭
  1995. var fnAdjustOrderEa = function(obj) {
  1996. let $obj = $(obj);
  1997. let $target = $obj.parent().children('input[name="cea"]');
  1998. let ea =parseInt($target.val());
  1999. let minOrdQty = 0;
  2000. let maxOrdQty = 0;
  2001. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  2002. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  2003. mcxDialog.alert("사이즈를 선택해 주세요.");
  2004. return false;
  2005. }
  2006. minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  2007. maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  2008. }else{
  2009. minOrdQty = parseInt( $target.attr('minOrdQty'));
  2010. maxOrdQty = parseInt( $target.attr('maxOrdQty'));
  2011. }
  2012. if ($obj.attr('adjust') == '-') --ea;
  2013. else ++ea;
  2014. //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
  2015. //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
  2016. //if (ea.toString().length > maxOrdQty) --ea;
  2017. if (ea < 1) ea = minOrdQty;
  2018. $target.val(ea);
  2019. $target.attr('value', ea);
  2020. fnChangeOrderEa($target[0]);
  2021. }
  2022. //옵션 갯수 변경
  2023. var fnChangeOrderEa = function(obj) {
  2024. let $obj = $(obj);
  2025. let $target = $obj.parent().children('input[name="cea"]');
  2026. let ea = parseInt($obj.val());
  2027. let optCd = $(obj).attr('optCd');
  2028. let minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  2029. let maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  2030. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  2031. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  2032. mcxDialog.alert("사이즈를 선택해 주세요.");
  2033. return false;
  2034. }
  2035. }else{
  2036. maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
  2037. minOrdQty = parseInt($(obj).attr('minOrdQty'));
  2038. optCd = $(obj).attr('optCd');
  2039. }
  2040. let alertMsg = '';
  2041. if (ea < minOrdQty) {
  2042. alertMsg = minOrdQty+"개 부터 구매 가능합니다.";;
  2043. ea = minOrdQty;
  2044. }
  2045. if (ea > maxOrdQty) {
  2046. alertMsg = maxOrdQty+"개 까지만 구매 가능합니다.";
  2047. ea = maxOrdQty;
  2048. }
  2049. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  2050. $("#cartForm input[name=cea]").val(ea);
  2051. $("#cartForm input[name=ordQty]").val(ea);
  2052. }
  2053. //obj.value = ea;
  2054. $target.val(ea);
  2055. $target.attr('value', ea);
  2056. if (alertMsg != ''){
  2057. mcxDialog.alert(alertMsg);
  2058. return false;
  2059. }
  2060. if (ea <= 1){
  2061. $('.number_count').find('.minus').addClass('min_val');
  2062. }else{
  2063. $('.number_count').find('.minus').removeClass('min_val');
  2064. }
  2065. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  2066. }else{
  2067. let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
  2068. let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
  2069. let totalPrice = ((goodsPrice+addPrice) * ea);
  2070. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
  2071. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
  2072. $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
  2073. }
  2074. fnSetTotalPrice();
  2075. }
  2076. //합계 계산
  2077. var fnSetTotalPrice = function() {
  2078. //let f = document.cartForm;
  2079. let totalEa = 0;
  2080. let totalPrice = 0;
  2081. $('input[name="cea"]').each(function() {
  2082. let ea = parseInt($(this).val());
  2083. let addPrice = 0;
  2084. if("G056_N" == $("#cartForm input[name=goodsType]").val() && "Y" == $("#cartForm input[name=selfGoodsYn]").val()){
  2085. let target=$('.opt_size').find('input[name=opt]');
  2086. target.each(function() {
  2087. if ($(this).is(":checked")){
  2088. addPrice += Number($(this).attr('addPrice'));
  2089. }
  2090. });
  2091. }else{
  2092. addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  2093. }
  2094. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  2095. totalEa += ea;
  2096. if (goodsPrice > 0) {
  2097. totalPrice += ((goodsPrice+addPrice) * ea);
  2098. }
  2099. });
  2100. $('#goodsTotalQty').html(totalEa.addComma());
  2101. $('#goodsTotalPrice').html(totalPrice.addComma());
  2102. }
  2103. // 선택상품 삭제
  2104. var fnSelectGoodsDel = function(optCd){
  2105. $('.result_'+optCd).remove();
  2106. fnSetTotalPrice();
  2107. }
  2108. //장바구니담기
  2109. var fnAddCart = function(btnType){
  2110. let params = [];
  2111. let goodsType = $("#cartForm input[name=goodsType]").val();
  2112. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  2113. if (goodsType == 'G056_N' && selfGoodsYn == 'Y' ){
  2114. if (gagajf.isNull($("#cartForm input[name=optCd2]").val())) {
  2115. mcxDialog.alert("사이즈를 선택해 주세요.");
  2116. return;
  2117. }
  2118. let compsList = [];
  2119. let obj = new Object();
  2120. obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
  2121. obj.optCd = $("#cartForm input[name=optCd]").val();
  2122. obj.goodsQty = $("#cartForm input[name=ordQty]").val();
  2123. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  2124. obj.cartGb = btnType;
  2125. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  2126. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  2127. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  2128. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  2129. compsList.push(obj);
  2130. // 장바구니담기
  2131. cfnAddCart(compsList);
  2132. }else {
  2133. let target = $('#cartForm input[name=cea]');
  2134. let targetSize = target.length;
  2135. if (targetSize <= 0){
  2136. mcxDialog.alert("옵션을 선택해 주세요.");
  2137. return false;
  2138. }
  2139. let cartGoodsList = [];
  2140. if (goodsType == 'G056_N'){
  2141. let compsList = [];
  2142. if(btnType == "G" && targetSize > 1) {
  2143. mcxDialog.alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.");
  2144. return false;
  2145. }
  2146. target.each(function() {
  2147. let ea = parseInt($(this).val());
  2148. let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
  2149. let optCd = $(this).parent().find('input[name="coption"]').val();
  2150. //let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  2151. //let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  2152. var obj = new Object();
  2153. obj.cartGb = btnType;
  2154. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  2155. obj.goodsCd = goodsCd
  2156. obj.optCd = optCd;
  2157. obj.goodsQty = ea;
  2158. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  2159. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  2160. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  2161. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  2162. compsList.push(obj);
  2163. });
  2164. // 장바구니담기
  2165. cfnAddCart(compsList);
  2166. }else{ // 세트
  2167. if(btnType == "G" && targetSize > 1) {
  2168. mcxDialog.alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.");
  2169. return false;
  2170. }
  2171. target.each(function() {
  2172. let compsList = [];
  2173. let goodsList = {
  2174. cartCompsList : new Array()
  2175. }
  2176. let ea = parseInt($(this).val());
  2177. let targetItem = $(this).parent().parent().find('.bundle'); // 구성상품
  2178. targetItem.each(function() {
  2179. var obj = new Object();
  2180. obj.cartGb = btnType;
  2181. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  2182. obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
  2183. obj.itemCd = $(this).find('input[name=selOption]').attr('goodsCd');
  2184. obj.optCd = $(this).find('input[name=selOption]').attr('optCd');
  2185. obj.goodsQty = ea;
  2186. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  2187. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  2188. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  2189. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  2190. compsList.push(obj);
  2191. });
  2192. goodsList.cartCompsList = compsList;
  2193. cartGoodsList.push(goodsList);
  2194. });
  2195. // 장바구니담기
  2196. cfnAddCart(cartGoodsList);
  2197. }
  2198. }
  2199. }
  2200. // 룩북속 상품 쇼핑백 담기
  2201. var fnAddCartLookBookGoods = function(obj){
  2202. let $obj = $(obj);
  2203. let $target = $obj.parent().parent().parent().find('.swiper-container').find('.item_prod');
  2204. let goodsSize = $target.length;
  2205. let btnType = "C";
  2206. let goodsIdx = 0;
  2207. $target.each(function(){
  2208. let params = [];
  2209. goodsIdx ++;
  2210. if ($(this).hasClass('unable')) {
  2211. }else{
  2212. // 옵션확인
  2213. let goodsCnt = $(this).find('input[name=lookbookGoodsOptCd]').length;
  2214. if (goodsCnt == 1){
  2215. let arrOpt = $(this).find('input[name=lookbookGoodsOptCd]').val();
  2216. let arrOptInfo = arrOpt.split(':');
  2217. let obj = new Object();
  2218. obj.goodsCd = $(this).attr("goodsCd");
  2219. //obj.optCd = $(this).attr("optCd");
  2220. obj.optCd = arrOptInfo[1];
  2221. obj.goodsQty = $(this).attr("minOrdQty");
  2222. obj.goodsType = $(this).attr("goodsType");
  2223. obj.cartGb = btnType;
  2224. obj.afLinkCd = '';
  2225. obj.ithrCd = $(this).attr("ithrCd");
  2226. obj.contentsLoc = $(this).attr("contentsLoc");
  2227. obj.planDtlSq = '';
  2228. obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  2229. if (goodsIdx == goodsSize){
  2230. obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  2231. }
  2232. params.push(obj);
  2233. // 장바구니담기
  2234. cfnAddCart(params);
  2235. }else{
  2236. let $goods = $(this);
  2237. let cartGoodsList = [];
  2238. let compsList = [];
  2239. let goodsList = {
  2240. cartCompsList : new Array()
  2241. }
  2242. let arrInfo = $(this).find('input[name=lookbookGoodsOptCd]').val().split(','); // 상품코드단위
  2243. $.each(arrInfo, function(idx, item) {
  2244. let arrOptInfo = item.split(':');
  2245. let obj = new Object();
  2246. obj.cartGb = btnType;
  2247. obj.goodsType = $goods.attr("goodsType");
  2248. obj.goodsCd = $goods.attr("goodsCd");
  2249. obj.itemCd =arrOptInfo[0];
  2250. obj.optCd = arrOptInfo[1];
  2251. obj.goodsQty = $goods.attr("minOrdQty");
  2252. obj.afLinkCd = '';
  2253. obj.ithrCd = $goods.attr("ithrCd");
  2254. obj.contentsLoc = $goods.attr("contentsLoc");
  2255. obj.planDtlSq = ''
  2256. obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  2257. if (goodsIdx == goodsSize){
  2258. obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  2259. }
  2260. compsList.push(obj);
  2261. });
  2262. goodsList.cartCompsList = compsList;
  2263. cartGoodsList.push(goodsList);
  2264. // 장바구니담기
  2265. cfnAddCart(cartGoodsList);
  2266. }
  2267. }
  2268. });
  2269. // 장바구니담기
  2270. /* if (params.length > 0){
  2271. cfnAddCart(params);
  2272. } */
  2273. }
  2274. //룩북 피커 선택시 레이어 노출
  2275. var fnLookbookPicker = function(obj,goodsCd){
  2276. let $obj = $(obj);
  2277. var str = '<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">\n';
  2278. //let $target = $obj.parent().parent().parent().find('.item_prod');
  2279. let $target = $('.pic_list').find('.item_prod');
  2280. let goodsImg = '';
  2281. let brandName = '';
  2282. let goodsName = '';
  2283. let currPrice = '';
  2284. let listPrice = '';
  2285. let dcRate = '';
  2286. let soldout = '';
  2287. $target.each(function(){
  2288. if ($(this).attr('goodsCd') == goodsCd) {
  2289. if ($(this).hasClass('unable')) soldout = 'sold_out';
  2290. goodsImg = $(this).find('.itemPic').children('.pd_img').attr('src');
  2291. brandName = $(this).find('.itemBrand').text();
  2292. goodsName = $(this).find('.itemName').text();
  2293. currPrice = $(this).find('.itemPrice').text();
  2294. return false;
  2295. }
  2296. });
  2297. if (gagajf.isNull(goodsName)){
  2298. return false;
  2299. }
  2300. $("#reco_pop").remove();
  2301. let tag = '';
  2302. tag += ' <div class="modal-dialog" role="document">\n';
  2303. tag += ' <div class="modal-content">\n';
  2304. tag += ' <div class="modal-header">\n';
  2305. tag += ' <h5 class="modal-title"><span class="sr_only">제품정보</span></h5>\n';
  2306. tag += ' </div>\n';
  2307. tag += ' <div class="modal-body">\n';
  2308. tag += ' <div class="itemsGrp rowtype">\n';
  2309. tag += ' <div class="item_prod '+ soldout+'"> <!-- 품절일때 sold_out 클래스 추가 요청 -->\n';
  2310. tag += ' <div class="item_state">\n';
  2311. tag += ' <a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+goodsCd+'\',\'\',\'IN15_06\')">\n';
  2312. tag += ' <div class="itemPic">\n';
  2313. tag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+goodsImg +'?RS=70" onerror="this.src=\'/images/pc/thumb/bg_item_none.png\'">\n';
  2314. tag += ' </div>\n';
  2315. tag += ' <p class="itemBrand">'+brandName+'</p>\n';
  2316. tag += ' <div class="itemName">'+goodsName+'</div>\n';
  2317. tag += ' <p class="itemPrice">\n';
  2318. tag += ' '+currPrice+'\n';
  2319. tag += ' </p>\n';
  2320. tag += ' </a>\n';
  2321. tag += ' </div>\n';
  2322. tag += ' </div>\n';
  2323. tag += ' </div>\n';
  2324. tag += ' </div>\n';
  2325. tag += ' </div>\n';
  2326. tag += ' </div>\n';
  2327. tag += ' <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer(\'recoPop\')" class="close-modal">Close</a>\n';
  2328. if ($('#reco_pop').length == 0) {
  2329. $('body').append(str+tag+'</div>');
  2330. $('#reco_pop').modal("show");
  2331. }
  2332. }
  2333. // 상품평 상세 레이어 호출후 콜백에서 호출하므로 여기에 있어야함
  2334. var fnReviewDetailLayerCollBack = function(){
  2335. }
  2336. $(document).ready( function() {
  2337. // 상품상세 홈버튼 위치 변경
  2338. $("#htopSub .button_wrap").addClass("pd");
  2339. $('.timer_box').css('display', 'none');
  2340. //상품상세 적용
  2341. // 입점 html 에 태그가 정상적이지 않아 스크립트로 처리
  2342. if ("G056_S" == [[${goodsInfo.goodsType}]] ){
  2343. let goodsComposeList = ([[${goodsComposeList}]]);
  2344. if (goodsComposeList.length > 0){
  2345. var titStr = "";
  2346. $.each(goodsComposeList, function(idx, item) {
  2347. if ("N" == item.tobeFormYn && !gagajf.isNull(item.goodsDesc)){
  2348. titStr = '<span class="tit_view">'+item.compsGoodsNm+'</span>';
  2349. $('#goodsDescHtml_'+ item.compsGoodsCd).html(titStr + item.goodsDesc);
  2350. }
  2351. });
  2352. }
  2353. }else{
  2354. let goodsDesc = [[${goodsInfo.goodsDesc}]];
  2355. if ("N" == [[${goodsInfo.tobeFormYn}]] && !gagajf.isNull(goodsDesc)){
  2356. $('#goodsDescHtml').html([[${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}]]);
  2357. }
  2358. }
  2359. //210526_ 추가 : 이미지 style 속성 제거
  2360. $(".mdhtml_box style").remove();$(".mdhtml_box img").removeAttr("style");
  2361. var params = new Object();
  2362. params.goodsCd = [[${params.goodsCd}]];
  2363. params.viewDt = [[${params.viewDt}]];
  2364. params.preview = [[${params.preview}]];
  2365. params.adminYn = [[${params.adminYn}]];
  2366. params.goodsType = [[${params.goodsType}]];
  2367. params.supplyCompCd = [[${params.supplyCompCd}]];
  2368. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  2369. // 함께본 상품(ajax html)
  2370. params.goodsOtherGb = "together";
  2371. params.ithrCd = "IN15_03";
  2372. fnGoodsTogetherSearch(params);
  2373. // 추천 상품(ajax html)
  2374. params.goodsOtherGb = "recommend";
  2375. params.ithrCd = "IN15_04";
  2376. fnGoodsRecommendSearch(params);
  2377. // 비슷한 상품(ajax html)
  2378. params.goodsOtherGb = "like";
  2379. params.ithrCd = "IN15_05";
  2380. fnGoodsLikeSearch(params);
  2381. // selecter
  2382. $(function(){
  2383. var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
  2384. });
  2385. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  2386. $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_1 .combo .list > li').click(function(e) {
  2387. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  2388. return false;
  2389. });
  2390. var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  2391. $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_2 .combo .list > li').click(function(e) {
  2392. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  2393. return false;
  2394. });
  2395. var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  2396. $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_3 .combo .list > li').click(function(e) {
  2397. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  2398. return false;
  2399. });
  2400. var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  2401. $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_4 .combo .list > li').click(function(e) {
  2402. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  2403. return false;
  2404. });
  2405. var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  2406. $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_5 .combo .list > li').click(function(e) {
  2407. $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
  2408. return false;
  2409. });
  2410. if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
  2411. $('.timer_box').css('display', 'block');
  2412. /* 행사 남은시간 */
  2413. function promotionTimer() {
  2414. var endTime = new Date([[${goodsInfo.socialEddt}]]); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
  2415. endTime = (Date.parse(endTime) / 1000);
  2416. var now = new Date();
  2417. now = (Date.parse(now) / 1000);
  2418. var timeLeft = endTime - now;
  2419. var days = Math.floor(timeLeft / 86400);
  2420. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  2421. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  2422. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  2423. if (hours < '10') { hours = '0' + hours; }
  2424. if (minutes < '10') { minutes = '0' + minutes; }
  2425. if (seconds < '10') { seconds = '0' + seconds; }
  2426. if (Number(days) > 0 ){
  2427. // hours = Number(hours) + (Number(days) * 24);
  2428. $('#d-days').html(days);
  2429. }else{
  2430. $('#d-days').hide();
  2431. }
  2432. $('#d-hours').html(hours);
  2433. $('#d-minutes').html(minutes);
  2434. $('#d-seconds').html(seconds);
  2435. }
  2436. setInterval(function() { promotionTimer(); }, 1000);
  2437. }
  2438. //상품상세정보 더보기
  2439. $(document).on('click','.pd_descrp .btn_more_box button',function(e){
  2440. $('.pd_descrp .cont_body').toggleClass('on');
  2441. $(this).toggleClass('active');
  2442. $(this).parents('.btn_more_box').toggleClass('covered');
  2443. var descrpToggle = $(this).find('span');
  2444. $(descrpToggle).text($(descrpToggle).text() == '상세정보 더보기' ? '상세정보 접기' : '상세정보 더보기');
  2445. //210525_더보기 닫을 시 현재 위치로 화면 포커스
  2446. if($('.pd_descrp .btn_more_box').hasClass('covered') === true){
  2447. var offset = $('.pd_descrp .btn_more_box').offset();
  2448. $('html').animate({scrollTop : offset.top - 80}, 400);
  2449. }
  2450. return false;
  2451. });
  2452. //슬라이드 - 함께하면 할인되는 다다익선 상품
  2453. var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
  2454. slidesPerView: 3,
  2455. spaceBetween: 8,
  2456. speed: 1000,
  2457. });
  2458. //슬라이드 - 베스트리뷰
  2459. var riviewSwiper = new Swiper('.riview_box .area_slider .swiper-container', {
  2460. observer: true,
  2461. observeParents: true,
  2462. slidesPerView: 1,
  2463. spaceBetween: 8,
  2464. speed: 1000,
  2465. //loop: true,
  2466. pagination: {
  2467. el: '.swiper-pagination',
  2468. type: 'fraction',
  2469. },
  2470. });
  2471. //슬라이드 - 제품사진
  2472. //210728_ 추가 : 네비게이션 버튼 추가 및 썸네일 영상일 경우, navigation 버튼 노출/비노출 설정.
  2473. //슬라이드 - 제품사진
  2474. var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  2475. slidesPerView:1,
  2476. speed: 1000,
  2477. a11y: {
  2478. enabled: true,
  2479. notificationClass: 'swiper-notification',
  2480. prevSlideMessage: '이전 슬라이드',
  2481. nextSlideMessage: '다음 슬라이드',
  2482. firstSlideMessage: '첫번째 슬라이드 입니다',
  2483. lastSlideMessage: '마지막 슬라이드 입니다',
  2484. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  2485. },
  2486. pagination: {
  2487. el: '.swiper-pagination',
  2488. type: 'fraction',
  2489. },
  2490. navigation: {
  2491. nextEl: ".pd .thumb_box .area_slider .swiper-button-next",
  2492. prevEl: ".pd .thumb_box .area_slider .swiper-button-prev",
  2493. },
  2494. on : {
  2495. slideChangeTransitionEnd : function(){
  2496. if($('.thumb_list .swiper-slide-active iframe').length){
  2497. $('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').show();
  2498. }else{
  2499. $('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').hide();
  2500. }
  2501. }
  2502. }
  2503. });
  2504. /* var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  2505. slidesPerView:1,
  2506. speed: 1000,
  2507. pagination: {
  2508. el: '.swiper-pagination',
  2509. type: 'fraction',
  2510. },
  2511. }); */
  2512. //슬라이드 - STYLE24의 스타일링 추천
  2513. var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
  2514. slidesPerView: 1,
  2515. spaceBetween: 0,
  2516. speed: 1000,
  2517. pagination: {
  2518. el: '.swiper-pagination',
  2519. type: 'fraction',
  2520. },
  2521. });
  2522. var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
  2523. observer: true,
  2524. observeParents: true,
  2525. slidesPerView: 3,
  2526. spaceBetween: 8,
  2527. speed: 1000,
  2528. });
  2529. $(".pic_list > div").hide();
  2530. $(".pic_list > div").eq(0).fadeIn();
  2531. rcmdPicimgSwiper.on('slideChange', function () {
  2532. var pic_index=this.activeIndex;
  2533. $(".pic_list > div").hide();
  2534. $(".pic_list > div").eq(pic_index).fadeIn();
  2535. });
  2536. //슬라이드 - 베스트리뷰팝업
  2537. var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
  2538. observer: true,
  2539. observeParents: true,
  2540. slidesPerView: 1,
  2541. speed: 1000,
  2542. pagination: {
  2543. el: '.swiper-pagination',
  2544. type: 'fraction',
  2545. },
  2546. });
  2547. //슬라이드 - 포토,영상리뷰팝업
  2548. var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
  2549. observer: true,
  2550. observeParents: true,
  2551. slidesPerView: 1,
  2552. speed: 1000,
  2553. pagination: {
  2554. el: '.swiper-pagination',
  2555. type: 'fraction',
  2556. },
  2557. });
  2558. //--상품문의 창 순서 -
  2559. var qnaCount = 0;
  2560. //팝업 - 상품문의 리스트
  2561. $(document).on('click','#btn_pdQnaList_pop',function(e){
  2562. qnaCount = 1;
  2563. return false;
  2564. });
  2565. //팝업 - 상품문의 작성
  2566. $(document).on('click','#btn_pdQnaWrite_pop',function(e){
  2567. qnaCount = 2;
  2568. return false;
  2569. });
  2570. $(document).on('click','.pd_qnawrite_pop .close-modal',function(e){
  2571. if(qnaCount === 2){
  2572. $('#layer_goods_qna').modal('show');
  2573. setTimeout(fnGoodsQnaList, 100); //일반상품상세 용
  2574. qnaCount = 1;
  2575. }
  2576. return false;
  2577. });
  2578. //--상품문의 창 순서 -
  2579. //--상품리뷰 창 순서 -
  2580. var reviewCount = 0;
  2581. //팝업 - 상품상세 베스트리뷰
  2582. $(document).on('click','.pd_detail #btn_pdBestReview_pop a',function(e){
  2583. reviewCount = 1;
  2584. return false;
  2585. })
  2586. //팝업 - 상품상세>리뷰팝업>포토상세(포토영상상세)
  2587. $(document).on('click','.pd_review_pop .area_rv_photo a',function(e){
  2588. $("#layer_review_best").modal("show");
  2589. reviewCount = 2;
  2590. return false;
  2591. })
  2592. //팝업 - 상품상세>리뷰팝업>포토상세(베스트상세)
  2593. $(document).on('click','.pd_review_pop .area_rv_best a',function(e){
  2594. $("#layer_review_best").modal("show");
  2595. reviewCount = 2;
  2596. return false;
  2597. })
  2598. //팝업 - 상품상세>리뷰팝업>포토상세 닫기
  2599. $(document).on('click','#layer_review_best .close-modal',function(e){
  2600. if(reviewCount === 2){
  2601. $('.pd_review_pop').modal('show');
  2602. }
  2603. return false;
  2604. });
  2605. //팝업 - 포토/영상 (list)
  2606. $(document).on('click','.pd_review_pop #btn_more_photoreview',function(e){
  2607. reviewCount = 2;
  2608. return false;
  2609. })
  2610. $(document).on('click','#layer_review_photo .close-modal',function(e){
  2611. if(reviewCount === 2){
  2612. $('.pd_review_pop').modal('show');
  2613. }
  2614. return false;
  2615. });
  2616. //--상품리뷰 창 순서 -
  2617. $(document).on('click','.pd_detail .thumb_box .thumb',function(e){
  2618. $('html, body').addClass('lock'); // 210827_ lock 추가
  2619. $('#pdItemThumbPop').css("display", "block");
  2620. $("#pdItemThumbPop").scrollTop(0);
  2621. var thumbIndex = $(this).parent().attr('id').replace("navLocate", "");
  2622. var scrollThumbPop = $('#popThumb'+thumbIndex).height() * (thumbIndex-1);
  2623. $('#pdItemThumbPop').animate({scrollTop : scrollThumbPop}, 1000);
  2624. return false;
  2625. }).on('click','.full_popup_wrap .btn_close, #btn_close_itemThumbPop',function(e){ // 210827_ lock 해제
  2626. $("#pdItemThumbPop").scrollTop(0);
  2627. $("#pdItemThumbPop").hide();
  2628. $('html, body').removeClass('lock');
  2629. return false;
  2630. });
  2631. // 포토,베스트리뷰숨김
  2632. var review_open=$(".btn_review_open");
  2633. //$(document).on('click','.btn_review_open',function(e){
  2634. // $(this).toggleClass('active');
  2635. // $(this).next(".review_list").toggleClass('active');
  2636. // return false;
  2637. //});
  2638. $(document).on('click','.pd_review .btn_review_open',function(e){
  2639. $(this).toggleClass('active');
  2640. $(this).next(".review_list").toggleClass('active');
  2641. if($(this).hasClass('active')){
  2642. $(".pd_review.best").css("position", "absolute");
  2643. //$(".pd_review.best").css("bottom", "0");
  2644. } else {
  2645. $(".pd_review.best").css("position", "relative");
  2646. //$(".pd_review.best").css("bottom", "auto");
  2647. }
  2648. return false;
  2649. });
  2650. //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
  2651. $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
  2652. $(".pop_option_select").show();
  2653. return false;
  2654. });
  2655. $(document).on('click','.pop_option_select .close',function(e){
  2656. $(".pop_option_select").hide();
  2657. $('.option_result .option_open').removeClass('on');
  2658. let target=$('.select_custom.item_opt1');
  2659. target.each(function(){
  2660. $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
  2661. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
  2662. $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
  2663. });
  2664. return false;
  2665. });
  2666. //관심상품 등록
  2667. $(document).on('click','.pd .itemLike',function(e){
  2668. $(this).toggleClass('active');
  2669. return false;
  2670. });
  2671. fnOptionSoldout();
  2672. // 광고 스크립트용
  2673. var goodsNavigation = [[${goodsNavigation}]];
  2674. var cate1No = "";
  2675. var cate2No = "";
  2676. var cate3No = "";
  2677. var cate4No = "";
  2678. var cate5No = "";
  2679. var cate1Nm = "";
  2680. var cate2Nm = "";
  2681. var cate3Nm = "";
  2682. var cate4Nm = "";
  2683. var cate5Nm = "";
  2684. if (!gagajf.isNull(goodsNavigation)) {
  2685. cate1No = goodsNavigation.cate1No;
  2686. cate2No = goodsNavigation.cate2No;
  2687. cate3No = goodsNavigation.cate3No;
  2688. cate4No = goodsNavigation.cate4No;
  2689. cate5No = goodsNavigation.cate5No;
  2690. cateNm = cate3No;
  2691. cate1Nm = goodsNavigation.cate1Nm;
  2692. cate2Nm = goodsNavigation.cate2Nm;
  2693. cate3Nm = goodsNavigation.cate3Nm;
  2694. cate4Nm = goodsNavigation.cate4Nm;
  2695. cate5Nm = goodsNavigation.cate5Nm;
  2696. }
  2697. // 광고 스크립트용
  2698. var snsGoodsImg = _uploadGoodsUrl + "/" + [[${goodsInfo.sysImgNm}]];
  2699. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
  2700. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  2701. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  2702. $("meta[property='og:url']").attr('content', snsUrl);
  2703. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  2704. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  2705. $("meta[property='og:image']").attr('content', snsGoodsImg);
  2706. <!-- 트위터 관련 메타태그 -->
  2707. $("meta[name='twitter:url']").attr('content', snsUrl);
  2708. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  2709. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  2710. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  2711. // 추천솔류션 meta 설정
  2712. $("meta[property='eg:type']").attr('content',"product");
  2713. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  2714. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  2715. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  2716. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  2717. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  2718. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  2719. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  2720. $("meta[property='eg:category1']").attr('content',cate1No);
  2721. $("meta[property='eg:category2']").attr('content',cate2No);
  2722. $("meta[property='eg:category3']").attr('content',cate3No);
  2723. $("meta[property='eg:category4']").attr('content',cate4No);
  2724. $("meta[property='eg:category5']").attr('content',cate5No);
  2725. $("meta[property='eg:category1_name']").attr('content',cate1Nm);
  2726. $("meta[property='eg:category2_name']").attr('content',cate2Nm);
  2727. $("meta[property='eg:category3_name']").attr('content',cate3Nm);
  2728. $("meta[property='eg:category4_name']").attr('content',cate4Nm);
  2729. $("meta[property='eg:category5_name']").attr('content',cate5Nm);
  2730. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  2731. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  2732. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  2733. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  2734. $("meta[property='eg:stock']").attr('content',[[${goodsInfo.goodsStockQty}]]);
  2735. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStat}]]);
  2736. $("meta[property='eg:description']").attr('content',null);
  2737. $("meta[property='eg:extraImage']").attr('content',null);
  2738. $("meta[property='eg:locale']").attr('content',"KR");
  2739. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  2740. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  2741. // ep 쿠폰확인
  2742. fnEpCouponDown([[${afLinkCd}]], [[${params.goodsCd}]], 1);
  2743. $('.Purchase_pop .btPop_close').click(function(){
  2744. $('html, body').css({'overflow': 'visible', 'height': '100%'});
  2745. $('.container').removeClass('btPop_open');
  2746. autome.style.top = 100 + "%";
  2747. return false;
  2748. });
  2749. // 픽커모달
  2750. $(document).on('click','.item_picker',function(e){
  2751. //$("#reco_pop").modal("show");
  2752. $("body").addClass("recoPop");
  2753. return false;
  2754. });
  2755. $(document).on('click','#reco_pop .close-modal',function(e){
  2756. $("body").removeClass("recoPop");
  2757. return false;
  2758. });
  2759. // 상품평 상세 토글
  2760. $(document).on('click','.pop_open_btn',function(){
  2761. $('.modal.photo_comment_popup .pop_detail').toggleClass('active');
  2762. });
  2763. // 상품상세 asis html 이지미 경로 수정
  2764. $(".pd_descrp .cont_body").find('img').each(function() {
  2765. let tmpImgSrc = $(this).attr('src');
  2766. if (tmpImgSrc.indexOf('Upload') == 1 ){ // /Upload
  2767. $(this).attr('src' , tmpImgSrc.replace('/Upload', _imgUrl+"/Local").replace('/Upload/Local', "/Local"));
  2768. }
  2769. });
  2770. // 현재 색상만 상세노출 처리
  2771. let dpProductNo = [[${arrNoneProductNo}]];
  2772. let selfGoodsYn = [[${goodsInfo.selfGoodsYn}]]
  2773. if (!gagajf.isNull(dpProductNo) && "Y" == selfGoodsYn){
  2774. let arrNoneProductNo = dpProductNo.split(',');
  2775. // for(let i=0; i<arrNoneProductNo.length; i++){
  2776. // $('#'+arrNoneProductNo[i]).css('display', 'none');
  2777. // }
  2778. arrNoneProductNo.forEach(function(item,index, array){
  2779. if(!gagajf.isNull(item)) {
  2780. $('#'+item).css('display', 'none');
  2781. }
  2782. });
  2783. }
  2784. });
  2785. //pd전용 - 썸네일/헤더 블라인드 생성 : 210520_ 추가
  2786. $('.pd .thumb_box .thumb_list .swiper-slide').prepend('<span></span>');
  2787. // pd전용 - 스크롤 스크립트
  2788. $(window).scroll(function(){
  2789. var lastScrollTop = 0;
  2790. var st = $(this).scrollTop();
  2791. if($('header').hasClass("main") !== true){
  2792. if (st > lastScrollTop){
  2793. $(".app .gnb").css("position", "fixed");
  2794. $(".htop").css("background", "#fff");
  2795. $(".app .gnb .btn-expand").css("position", "fixed");
  2796. $(".tabbar").removeClass("fixed");
  2797. $(".thumb_list .swiper-slide span").animate({"opacity": 0}, 30);
  2798. } else {
  2799. $(".app .gnb").css("position", "fixed");
  2800. $(".htop").css("background", "#fff");
  2801. $(".app .gnb .btn-expand").css("position", "fixed");
  2802. $(".tabbar").addClass("fixed");
  2803. $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 30);
  2804. setTimeout(function(){
  2805. if($(window).scrollTop() === 0){
  2806. $(".app .gnb").css("position", "relative");
  2807. $(".app .gnb .btn-expand").css("position", "absolute");
  2808. }
  2809. },300)
  2810. }
  2811. if(st < 10) {
  2812. $(".htop").css("background", "transparent");
  2813. $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 0);
  2814. }
  2815. lastScrollTop = st;
  2816. }
  2817. });
  2818. let vh = window.innerHeight * 0.01;
  2819. document.documentElement.style.setProperty('--vh', `${vh}px`);
  2820. let goodsVideoList = [[${goodsVideoList}]];
  2821. let videoFlag = false;
  2822. if (goodsVideoList != null){
  2823. $.each(goodsVideoList, function(idx, goodsVideo) {
  2824. if ("M" == goodsVideo.videoGb){
  2825. videoFlag = true;
  2826. return false;
  2827. }
  2828. });
  2829. }
  2830. if (videoFlag){
  2831. var player = document.getElementById('child');
  2832. player.onload = function() {
  2833. try {
  2834. var controller = new VgControllerClient({
  2835. target_window: document.getElementById('child').contentWindow
  2836. });
  2837. //console.log(controller.get_screen());
  2838. //controller.enable_fullscreen_button(true);
  2839. // 여기서부터 이벤트 리스너를 등록하거나, 웹페이지 Element에 메소드를 bind하면 됩니다.
  2840. // 클릭 인지 테스트.
  2841. var MovBtn = document.getElementById("prodMovBtn");
  2842. MovBtn.addEventListener("click", function() {
  2843. $(this).hide();
  2844. controller.play();
  2845. });
  2846. controller.on('ready', function() {
  2847. controller.set_ratio('fill');
  2848. controller.play();
  2849. controller.set_controls_inactive_time(1);
  2850. });
  2851. controller.on('play', function() {
  2852. controller.set_controls_inactive_time(1);
  2853. });
  2854. controller.on('pause', function() {
  2855. $("#prodMovBtn").show();
  2856. });
  2857. $(window).scroll(function(){
  2858. var scrollTop= $(window).scrollTop();
  2859. var movHeight = $(".movbox").outerHeight()/2.5;
  2860. //console.log(movHeight);
  2861. //console.log(scrollTop);
  2862. if (scrollTop > movHeight){
  2863. controller.pause();
  2864. return false;
  2865. } else {
  2866. controller.play();
  2867. return false;
  2868. //controller.set_control_visibility(false);
  2869. }
  2870. });
  2871. } catch(e) {
  2872. // Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
  2873. // 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
  2874. // 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
  2875. }
  2876. };
  2877. }
  2878. // 210407_스크롤감지 헤더 그림자
  2879. $('.pd_delivery_pop').scroll(function(){
  2880. $(".pd_delivery_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  2881. $(".pd_delivery_pop .modal-header").css("border-bottom", "0px none");
  2882. if($(".pd_delivery_pop").scrollTop() === 0){
  2883. $(".pd_delivery_pop .modal-header").css("box-shadow", "none");
  2884. $(".pd_delivery_pop .modal-header").css("border-bottom", "1px solid #eee");
  2885. }
  2886. });
  2887. $('.pd_review_pop').scroll(function(){
  2888. $(".pd_review_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  2889. $(".pd_review_pop .modal-header").css("border-bottom", "0px none");
  2890. if($(".pd_review_pop").scrollTop() === 0){
  2891. $(".pd_review_pop .modal-header").css("box-shadow", "none");
  2892. $(".pd_review_pop .modal-header").css("border-bottom", "1px solid #eee");
  2893. }
  2894. });
  2895. $('.pd_qnalist_pop').scroll(function(){
  2896. $(".pd_qnalist_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  2897. $(".pd_qnalist_pop .modal-header").css("border-bottom", "0px none");
  2898. if($(".pd_qnalist_pop").scrollTop() === 0){
  2899. $(".pd_qnalist_pop .modal-header").css("box-shadow", "none");
  2900. $(".pd_qnalist_pop .modal-header").css("border-bottom", "1px solid #eee");
  2901. }
  2902. });
  2903. //window.onscroll = function() {
  2904. // document.getElementsByClassName('.modal.pd_pop.pd_review_pop .pd_review .area_rv_empty .btn_group_flex').style.top =
  2905. // window.pageYOffset + 'px';
  2906. //};
  2907. /*]]>*/
  2908. </script>
  2909. <!-- 광고 스크립트 -->
  2910. <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
  2911. <!-- //광고 스크립트 -->
  2912. </th:block>
  2913. </body>
  2914. </html>