GoodsDetailFormWeb.html 133 KB

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