GoodsDetailFormMob.html 100 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="mob/common/layout/GoodsLayoutMob">
  6. <!--
  7. *******************************************************************************
  8. * @source : GoodsDetailFormMob.html
  9. * @desc : 상품상세 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.04.02 eskim 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <form name="cartForm" id="cartForm" method="post">
  22. <input type="hidden" name="mode">
  23. <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
  24. <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
  25. <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
  26. <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
  27. <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
  28. <input type="hidden" name="optCd" />
  29. <input type="hidden" name="optCd1" />
  30. <input type="hidden" name="optCd2" />
  31. <input type="hidden" name="addPrice" />
  32. <input type="hidden" name="ordQty" />
  33. <input type="hidden" name="stock" />
  34. <input type="hidden" name="minOrdQty"/>
  35. <input type="hidden" name="maxOrdQty"/>
  36. <input type="hidden" name="currPrice" th:value="${goodsInfo.currPrice}"/>
  37. <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
  38. <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
  39. <main role="" id="" class="container pd" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
  40. <!-- ★ 컨텐츠 시작 -->
  41. <section class="pd_detail">
  42. <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
  43. <div class="pd_info">
  44. <div class="pd_info1" data-speed="10">
  45. <div class="inner wide" th:if="${(goodsImgList != null and !goodsImgList.empty) or (goodsVideoList != null and !goodsVideoList.empty)}">
  46. <div class="thumb_box">
  47. <div class="area_slider">
  48. <div class="swiper-container thumb_list">
  49. <div class="swiper-wrapper">
  50. <th:block th:each="goodsVideo, status : ${goodsVideoList}">
  51. <div class="swiper-slide">
  52. <div class="movbox">
  53. <th:block th:if="${goodsVideo.videoGb == 'Y'}">
  54. <iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0&autoplay=1&mute=1'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  55. </th:block>
  56. <th:block th:unless="${goodsVideo.videoGb == 'Y'}">
  57. <iframe id="child" class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey +'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  58. </th:block>
  59. </div>
  60. </div>
  61. </th:block>
  62. <th:block th:each="goodsImg, status : ${goodsImgList}">
  63. <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1')
  64. or #strings.contains(goodsImg.sysImgNm,'_L1')
  65. or #strings.contains(goodsImg.sysImgNm,'_L2'))}">
  66. <div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div> <!-- mov -->
  67. </th:block>
  68. </div>
  69. <!-- Add Pagination -->
  70. <div class="swiper-pagination"></div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="inner">
  77. <!-- 210409_ 구조변경 : .covered 추가 -->
  78. <div class="covered">
  79. <div class="timer_box" style="display:none;">
  80. <p>
  81. <span class="tt">남은시간</span>
  82. <span class="timer">
  83. <em id="d-hours">0</em>
  84. <em id="d-minutes">0</em>
  85. <em id="d-seconds">0</em>
  86. </span>
  87. </p>
  88. </div>
  89. <div class="descript_box">
  90. <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
  91. <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
  92. <p class="price_blk">
  93. <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
  94. <span class="org_price" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" ><del><em th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</em>원</del></span>
  95. <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
  96. </p>
  97. <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
  98. <div class="btn_group_flex">
  99. <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:if="${goodsCouponList != null and !goodsCouponList.empty}" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
  105. <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
  106. </div>
  107. <div class="inner" th:if="${goodsInfo.selfGoodsYn =='Y' and goodsInfo.goodsType =='G056_N'}"> <!-- 자사상품,일반상품 -->
  108. <div class="option_box">
  109. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  110. <div class="opt_header">
  111. <span class="title">컬러</span>
  112. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  113. </div>
  114. <ul>
  115. <li th:each="goodsOption1, status : ${goodsOption1List}">
  116. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
  117. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  118. </a>
  119. </li>
  120. </ul>
  121. </div>
  122. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
  123. <div class="opt_header">
  124. <span class="title">사이즈</span>
  125. <span class="size">
  126. <em class="selectOptCd1"></em>
  127. <em class="selectOptCd1addPrice"></em>
  128. </span>
  129. </div>
  130. <div class="form_field">
  131. <div th:each="goodsOption2, status : ${goodsOption2List}">
  132. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  133. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
  134. <th:block th:if="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
  135. <label th:for="${goodsOption2.optCd}">90</span></label>
  136. </th:block>
  137. <th:block th:unless="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
  138. <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )"><span th:text="${goodsOption2.optCd2}">90</span></label>
  139. </th:block>
  140. </div>
  141. </div>
  142. </div>
  143. <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
  144. </div>
  145. </div>
  146. <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  147. (goodsCouponList != null and !goodsCouponList.empty) or
  148. (tmtbList != null and !tmtbList.empty) or
  149. (freeGoodsList != null and !freeGoodsList.empty)}" >
  150. <div class="benefit_box">
  151. <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or
  152. (tmtbList != null and !tmtbList.empty) or
  153. (freeGoodsList != null and !freeGoodsList.empty)}" >
  154. <dt>쇼핑혜택</dt>
  155. <dd>
  156. <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  157. <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
  158. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  159. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  160. </em> 쿠폰 할인</span>
  161. </th:block>
  162. <th:block th:if="${tmtbList != null and !tmtbList.empty}">
  163. <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
  164. <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
  165. <em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
  166. </span>
  167. </th:block>
  168. <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
  169. <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
  170. <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'N'}" th:text="${'외 택1'}"></th:block></span>
  171. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  172. </dd>
  173. </dl>
  174. <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
  175. <dt>카드혜택</dt>
  176. <dd>
  177. <th:block th:each="cardInfo, status : ${cardInfoList}">
  178. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
  179. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  180. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  181. </th:block>
  182. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  183. </dd>
  184. </dl>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="inner tmtb" th:if="${goodsList != null and !goodsList.empty}" >
  189. <div class="pd_together" id="goodsTmtbArea">
  190. <h3 class="tit">
  191. 함께하면 할인되는 다다익선 상품
  192. </h3>
  193. <div class="area_slider">
  194. <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
  195. <div class="swiper-wrapper">
  196. <div class="swiper-slide" th:each="goodsInfo, status : ${goodsList}">
  197. <div class="item_prod">
  198. <div class="item_state">
  199. <button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsInfo.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=''">관심상품 추가</button>
  200. <a href="javascript:void(0);" onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], '',[[${params.ithrCd}]],'[[${params.contentsLoc}]]','','pc_detail');" class="itemLink" >
  201. <div class="itemPic">
  202. <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=156'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  203. </div>
  204. <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
  205. <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
  206. <p class="itemPrice">
  207. <th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"></th:block>
  208. </p>
  209. </a>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="inner wide">
  219. <div class="brand_home">
  220. <a href="javascript:void(0);" class="link_go" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" th:text="|${goodsInfo.brandGroupNm} 브랜드홈|" >NBA 브랜드홈</a>
  221. </div>
  222. </div>
  223. <div class="inner wide">
  224. <div class="content pd_descrp">
  225. <div class="cont_head">
  226. <h3 class="sr-only">상품상세정보</h3>
  227. </div>
  228. <div class="cont_body">
  229. <!-- 상품설명 노출 -->
  230. <div class="descrp_box" th:if="${goodsInfo.tobeFormYn == 'Y'}">
  231. <div class="desc_simple"> <!-- 상품 간략설명-->
  232. <span class="tit_desc" th:if="${goodsInfo.goodsTitle != null and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
  233. <p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
  234. 슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다.
  235. </p>
  236. </div>
  237. <div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
  238. <span class="tit_desc">상품특징</span>
  239. <p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
  240. - 지퍼플러 장식을 더해 완성도를 높여줌
  241. </p>
  242. </div>
  243. </div>
  244. <!-- //상품설명 노출 -->
  245. <!-- 관리자 에디터입력 내용 노출 -->
  246. <div class="mdhtml_box">
  247. <th:block th:if="${goodsNoticeList != null and !goodsNoticeList.empty}" >
  248. <th:block th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
  249. </th:block>
  250. <!-- 관리자 에디터입력 내용 공지 html -->
  251. <th:block th:each="goodsVideo, status : ${goodsVideoList}">
  252. <div class="movblock">
  253. <th:block th:if="${goodsVideo.videoGb == 'Y'}">
  254. <iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  255. </th:block>
  256. <th:block th:unless="${goodsVideo.videoGb == 'Y'}">
  257. <iframe class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey +'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  258. </th:block>
  259. </div>
  260. </th:block>
  261. <!-- 공통상품베너 -->
  262. <th:block th:if="${goodsBannerList != null and !goodsBannerList.empty}">
  263. <th:block th:each="goodsBanner, status : ${goodsBannerList}" >
  264. <th:block th:if="${goodsBanner.strVar1 != null and not #strings.equals(goodsBanner.strVar1, '#')}">
  265. <a th:href="${goodsBanner.strVar1}" target="_blank">
  266. <img th:src="${imgUrl+goodsBanner.imgPath1}" alt="">
  267. </a>
  268. </th:block>
  269. <th:block th:unless="${goodsBanner.strVar1 != null and not #strings.equals(goodsBanner.strVar1, '#')}">
  270. <img th:src="${imgUrl+goodsBanner.imgPath1}" alt="">
  271. </th:block>
  272. </th:block>
  273. </th:block>
  274. <th:block th:if="${goodsInfo.goodsTopDesc != null and !goodsInfo.goodsTopDesc.empty }" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block >
  275. </div>
  276. <div class="view_outfit_box" th:if="${goodsInfo.tobeFormYn == 'N' and goodsInfo.goodsDesc != null and !goodsInfo.goodsDesc.empty}">
  277. <!-- 관리자 에디터입력 내용 노출 상단 html -->
  278. <th:block th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}"></th:block>
  279. </div>
  280. <th:block th:if="${goodsInfo.tobeFormYn == 'Y'}">
  281. <!-- 착용컷 노출 -->
  282. <div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_C1')
  283. or #strings.contains(goodsImgList,'_C2')
  284. or #strings.contains(goodsImgList,'_C3')
  285. or #strings.contains(goodsImgList,'_C4')
  286. or #strings.contains(goodsImgList,'_C5')}">
  287. <span class="tit_view">OUTFIT VIEW</span>
  288. <span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
  289. <div class="view">
  290. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
  291. or #strings.contains(goodsImg.sysImgNm,'_C2')
  292. or #strings.contains(goodsImg.sysImgNm,'_C3')
  293. or #strings.contains(goodsImg.sysImgNm,'_C4')
  294. or #strings.contains(goodsImg.sysImgNm,'_C5')}">
  295. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=360'}" alt="">
  296. </th:block>
  297. </div>
  298. </div>
  299. <!-- //착용컷 노출 -->
  300. <!-- 상품컷 노출 -->
  301. <div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
  302. or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
  303. or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
  304. or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
  305. or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
  306. or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
  307. or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
  308. or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
  309. or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
  310. or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
  311. or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
  312. <span class="tit_view">PRODUCT VIEW</span>
  313. <div class="view">
  314. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
  315. or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
  316. or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
  317. or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
  318. or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
  319. or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
  320. or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
  321. or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
  322. or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
  323. or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
  324. or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
  325. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=360'}" alt="">
  326. </th:block>
  327. </div>
  328. </div>
  329. <!-- //상품컷 노출 -->
  330. <!-- 원단 노출 -->
  331. <div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_F1')}">
  332. <span class="tit_view">FABRIC</span>
  333. <div class="view">
  334. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}">
  335. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  336. </th:block>
  337. </div>
  338. </div>
  339. <!-- //원단 노출 -->
  340. <!-- 라벨 노출 -->
  341. <div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1')
  342. or #strings.contains(goodsImgList,'_L2')}">
  343. <span class="tit_view">LABEL INFO</span>
  344. <div class="view">
  345. <span>
  346. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
  347. or #strings.contains(goodsImg.sysImgNm,'_L2')}">
  348. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  349. </th:block>
  350. </span>
  351. </div>
  352. </div>
  353. <!-- //네이밍룰 안맞는 이미지 노출 -->
  354. <div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01')}">
  355. <div class="view">
  356. <th:block th:each="goodsImg, status : ${goodsImgList}" >
  357. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="">
  358. </th:block>
  359. </div>
  360. </div>
  361. </th:block>
  362. <!-- 관리자 에디터입력 내용 노출 하다단 html -->
  363. <div class="mdhtml_box" th:if="${goodsInfo.goodsDownDesc != null and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
  364. <!-- 브랜드 노출 -->
  365. <div class="brand_box">
  366. <p class="name" th:text="${goodsInfo.brandGroupNm}">TBJ 티비제이</p>
  367. <a href="javascript:void(0);" class="brend_home" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" ><span>브랜드 홈 바로가기</span></a>
  368. </div>
  369. <!-- //브랜드 노출 -->
  370. <!-- 상품필수정보 노출 -->
  371. <div class="required_box">
  372. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
  373. <span class="title">상품고시정보</span>
  374. <div class="tbl type1">
  375. <table>
  376. <tbody>
  377. <tr th:each="goodsNoti, status : ${goodsNotiList}" >
  378. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  379. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  380. </tr>
  381. </tbody>
  382. </table>
  383. </div>
  384. </div>
  385. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
  386. <span class="title">상품고시정보</span>
  387. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  388. <div class="tbl type1">
  389. <table>
  390. <tbody>
  391. <tr th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
  392. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  393. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  394. </tr>
  395. </tbody>
  396. </table>
  397. </div>
  398. </th:block>
  399. </div>
  400. <th:block th:if="${goodsInfo.goodsType == 'G056_N' and goodsSafeNo != null}" >
  401. <th:block th:if="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
  402. <div class="area_kcl no-mark">
  403. <div>
  404. <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm + '/'}"></th:block> 제품 상세정보 내 별도 표기</p>
  405. <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
  406. </div>
  407. </div>
  408. </th:block>
  409. <th:block th:unless="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
  410. <th:block th:if="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
  411. <div class="area_kcl">
  412. <div><i class="ico ico_kcl"></i></div>
  413. <div>
  414. <p class="tit normal"><th:block th:text="${goodsSafeNo.certFormNm}"></th:block> / 공급자적합성확인</p>
  415. <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
  416. </div>
  417. </div>
  418. </th:block>
  419. <th:block th:unless="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
  420. <div class="area_kcl" >
  421. <div><i class="ico ico_kcl"></i></div>
  422. <div>
  423. <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  424. <p class="tit normal" th:text="${goodsSafeNo.certDiv +' '+goodsSafeNo.certTypeNm + ' / ' + goodsSafeNo.certOrganName}">어린이제품 안전인증 / 한국건설생활시험연구원(KCL)</p>
  425. </th:block>
  426. <th:block th:unless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  427. <p class="tit normal" th:text="${goodsSafeNo.certFormNm + ' '+goodsSafeNo.certTypeNm}"></p>
  428. </th:block>
  429. <p class="normal" >
  430. <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  431. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.certNum}">CB123A123-1234</a>
  432. </th:block>
  433. <th:block th:uless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  434. <span>인증번호:</span> <th:block th:text="${goodsSafeNo.certNum}">CB123A123-1234</th:block>
  435. </th:block>
  436. </p>
  437. </div>
  438. </div>
  439. </th:block>
  440. </th:block>
  441. <p class="t_info dot_info mt10">
  442. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  443. </p>
  444. </th:block>
  445. <th:block th:if="${goodsInfo.goodsType == 'G056_S'}">
  446. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  447. <th:block th:if="${goodsCompose.goodsSafeNo != null}">
  448. <th:block th:if="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
  449. <div class="area_kcl no-mark">
  450. <div>
  451. <p class="tit normal"><th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm + '/'}"></th:block> 제품 상세정보 내 별도 표기</p>
  452. <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
  453. </div>
  454. </div>
  455. </th:block>
  456. <th:block th:unless="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
  457. <th:block th:if="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
  458. <div class="area_kcl">
  459. <div><i class="ico ico_kcl"></i></div>
  460. <div>
  461. <p class="tit normal"><th:block th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block> / 공급자적합성확인</p>
  462. <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
  463. </div>
  464. </div>
  465. </th:block>
  466. <th:block th:unless="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
  467. <div class="area_kcl" >
  468. <div><i class="ico ico_kcl"></i></div>
  469. <div>
  470. <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  471. <p class="tit normal" th:text="${goodsCompose.goodsSafeNo.certDiv +' '+goodsCompose.goodsSafeNo.certTypeNm + ' / ' + goodsCompose.goodsSafeNo.certOrganName}">어린이제품 안전인증 / 한국건설생활시험연구원(KCL)</p>
  472. </th:block>
  473. <th:block th:unless="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  474. <p class="tit normal" th:text="${goodsCompose.goodsSafeNo.certFormNm + ' '+goodsCompose.goodsSafeNo.certTypeNm}"></p>
  475. </th:block>
  476. <p class="normal" >
  477. <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  478. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsCompose.goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.certNum}">CB123A123-1234</a>
  479. </th:block>
  480. <th:block th:uless="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
  481. <span>인증번호:</span> <th:block th:text="${goodsCompose.goodsSafeNo.certNum}">CB123A123-1234</th:block>
  482. </th:block>
  483. </p>
  484. </div>
  485. </div>
  486. </th:block>
  487. </th:block>
  488. <p class="t_info dot_info mt10" >
  489. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  490. </p>
  491. </th:block>
  492. </th:block>
  493. </th:block>
  494. <div class="area_infotbl">
  495. <span class="title">상품기본정보</span>
  496. <th:block th:if="${goodsInfo.goodsType == 'G056_N'} ">
  497. <div class="tbl type1">
  498. <table>
  499. <tbody>
  500. <tr>
  501. <th>상품코드</th>
  502. <td th:text="${goodsInfo.goodsCd}">14443216</td>
  503. </tr>
  504. <tr>
  505. <th>상품구분</th>
  506. <td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
  507. </tr>
  508. <tr>
  509. <th>브랜드</th>
  510. <td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
  511. </tr>
  512. <tr>
  513. <th>상품명</th>
  514. <td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  515. </tr>
  516. <th:block th:if="${goodsNotiList != null and !goodsNotiList.empty}">
  517. <th:block th:each="goodsNoti, status : ${goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  518. <tr>
  519. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  520. <td th:text="${goodsNoti.niContent}"></td>
  521. </tr>
  522. </th:block>
  523. </th:block>
  524. <tr>
  525. <th>제조국</th>
  526. <td th:text="${goodsInfo.originNm}">베트남</td>
  527. </tr>
  528. </tbody>
  529. </table>
  530. </div>
  531. </th:block>
  532. <th:block th:unless="${goodsInfo.goodsType == 'G056_N'} ">
  533. <th:block th:if="${goodsComposeList != null and !goodsComposeList.empty}">
  534. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  535. <div class="tbl type1">
  536. <table>
  537. <tbody>
  538. <tr>
  539. <th>상품코드</th>
  540. <td th:text="${goodsCompose.compsGoodsCd}">14443216</td>
  541. </tr>
  542. <tr>
  543. <th>상품구분</th>
  544. <td th:text="${goodsCompose.goodsGbNm}">병행수입</td>
  545. </tr>
  546. <tr>
  547. <th>브랜드</th>
  548. <td th:text="${goodsCompose.brandGroupNm}">TBJ</td>
  549. </tr>
  550. <tr>
  551. <th>상품명</th>
  552. <td th:text="${goodsCompose.compsGoodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  553. </tr>
  554. <th:block th:if="${goodsCompose.goodsNotiList != null and !goodsCompose.goodsNotiList.empty}">
  555. <th:block th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  556. <tr>
  557. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  558. <td th:text="${goodsNoti.niContent}"></td>
  559. </tr>
  560. </th:block>
  561. </th:block>
  562. <tr>
  563. <th>제조국</th>
  564. <td th:text="${goodsCompose.originNm}">베트남</td>
  565. </tr>
  566. </tbody>
  567. </table>
  568. </div>
  569. </th:block>
  570. </th:block>
  571. </th:block>
  572. <p class="t_info dot_info mt10">
  573. 주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
  574. </p>
  575. </div>
  576. </div>
  577. <!-- //상품필수정보 노출 -->
  578. </div>
  579. <div class="btn_more_box covered">
  580. <div class="btn_group_flex">
  581. <div>
  582. <button type="button" class="btn btn_default">
  583. <span>상세정보 더보기</span>
  584. </button>
  585. </div>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. <div class="inner">
  591. <!-- 리뷰영역 -->
  592. <div class="riview_box" th:if="${reviewDisplayYn == 'Y'}">
  593. <div class="ex_review">
  594. <a href="javascript:void(0);" id="btn_pdReview_pop" th:onclick="cfGoodsReview([[${goodsInfo.goodsCd}]])">
  595. <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>
  596. <div class="star_score" th:if="${goodsInfo.reviewRegCnt > 0 }">
  597. <span class="star" th:with="starScore=${#numbers.formatDecimal((goodsInfo.score*100/5), 0,0)}">
  598. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  599. </span>
  600. <span class="score" th:text="|${goodsInfo.score}점|">4.3점</span>
  601. </div>
  602. </a>
  603. </div>
  604. <div class="area_slider" id="btn_pdBestReview_pop" th:if="${bestReviewList != null and !bestReviewList.empty}">
  605. <div class="swiper-container">
  606. <div class="swiper-wrapper">
  607. <div class="swiper-slide" th:each="bestReview, status : ${bestReviewList}" >
  608. <!-- 베스트 리뷰 등록시 노출 -->
  609. <div class="best_review">
  610. <a href="javascript:void(0);" th:onclick="cfGoodsReviewDetail([[${goodsInfo.goodsCd}]],'Y', '',[[${bestReview.reviewSq}]])">
  611. <div class="star_score" th:with="starScore=${#numbers.formatDecimal((bestReview.iscore*100/5), 0,0)}">
  612. <span class="star">
  613. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  614. </span>
  615. <em class="ico ico_besttag"></em>
  616. </div>
  617. <div class="lap">
  618. <th:block th:if="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
  619. <div class="pic" >
  620. <th:block th:each="reviewAttach, attachStatus : ${bestReview.reviewAttachList}" th:if="${attachStatus.first}">
  621. <span class="thumb " th:classAppend="${(reviewAttach.fileGb == 'M') ? 'mov' :''}" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
  622. </th:block>
  623. </div>
  624. </th:block>
  625. <th:block th:unless="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
  626. <div class="pic none" >
  627. </div>
  628. </th:block>
  629. <div class="txt_best_review">
  630. <p th:text="${bestReview.reviewContent}">옷</p>
  631. </div>
  632. </div>
  633. </a>
  634. </div>
  635. <!-- //베스트 리뷰 등록시 노출 -->
  636. </div>
  637. </div>
  638. <!-- Add Pagination -->
  639. <div class="swiper-pagination"></div>
  640. </div>
  641. </div>
  642. </div>
  643. <!-- //리뷰영역 -->
  644. <!-- 문의,사이즈정보,배송/교환/반품 -->
  645. <div class="exinfo_box">
  646. <ul>
  647. <li>
  648. <div class="ex_qna">
  649. <a href="javascript:void(0);" id="btn_pdQnaList_pop" th:onclick="cfGoodsQng([[${goodsInfo.goodsCd}]])">
  650. <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>
  651. </a>
  652. </div>
  653. </li>
  654. <li>
  655. <div class="ex_size">
  656. <a href="javascript:void(0)" id="btn_pdSizeInfo_pop" th:onclick="cfGoodsSizeInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.colorCd}]] )">
  657. <span class="tit">사이즈 정보</span>
  658. </a>
  659. </div>
  660. </li>
  661. <li>
  662. <div class="ex_shipping">
  663. <a href="javascript:void(0)" id="btn_pdDelivery_Pop" th:onclick="cfGoodsDelivery([[${goodsInfo.goodsCd}]])">
  664. <span class="tit">배송/교환/반품</span>
  665. </a>
  666. <!-- 해당 배송정보 선택노출 -->
  667. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee > 0}">배송비 <th:block th:text="${#numbers.formatInteger(goodsInfo.delvFee, 0,'COMMA')}" ></th:block>원
  668. <th:block th:if="${goodsInfo.minOrdAmt > 0}">(<th:block th:text="${#numbers.formatInteger(goodsInfo.minOrdAmt, 0,'COMMA')}" ></th:block>원 이상 무료배송)</th:block>
  669. </span>
  670. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee <= 0}">무료배송</span>
  671. <span class="txt_shippingfee" th:if="${goodsInfo.quikDelvYn = 'Y'}">총알배송(오전 10시까지 주문 시)</span>
  672. <!-- //해당 배송정보 선택노출 -->
  673. </div>
  674. </li>
  675. </ul>
  676. </div>
  677. <!-- //문의,사이즈정보,배송/교환/반품 -->
  678. </div>
  679. <div class="inner" id="otherGoodsArea" style="display:none;">
  680. <div class="recommendedArea">
  681. <!-- 이상품과 함께 본 상품영역-->
  682. <div class="pd_clickother" id="goodsTogetherbArea">
  683. </div>
  684. <!-- //이상품과 함께 본 상품영역-->
  685. <!-- STYLE24의 스타일링 추천 -->
  686. <div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}">
  687. <h3 class="tit">STYLE24의 스타일링 추천</h3>
  688. <!-- 상품이미지pic -->
  689. <div class="area_slider pic_img" >
  690. <div class="swiper-container">
  691. <div class="swiper-wrapper">
  692. <div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
  693. <div class="page">
  694. <div class="pic">
  695. <span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
  696. <!-- 상품피커 -->
  697. <th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
  698. th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
  699. <div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
  700. <div>
  701. <button type="button"><span class="ico ico_picker"></span></button>
  702. <div class="pick_descr">
  703. <a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
  704. </div>
  705. </div>
  706. </div>
  707. <!-- //상품피커 -->
  708. </th:block>
  709. </div>
  710. </div>
  711. </div>
  712. </div>
  713. <!-- Add Pagination -->
  714. <div class="swiper-pagination"></div>
  715. </div>
  716. </div>
  717. <!-- //상품이미지pic -->
  718. <!-- 상품이미지pic 리스트 -->
  719. <div class="area_slider pic_list" th:with="ithrCd=aa , contentsLoc=bb ">
  720. <div class="box" th:each="lookbook, status : ${lookbookList}">
  721. <div class="swiper-container" th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
  722. <div class="swiper-wrapper">
  723. <div class="swiper-slide" th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}" >
  724. <div class="item_prod" th:classappend="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}? 'unable' : ''"
  725. th:attr="goodsCd=${lookbookGoods.goodsCd}, optCdInfo=${lookbookGoods.optCdInfo},
  726. minOrdQty=${lookbookGoods.minOrdQty}, goodsType=${lookbookGoods.goodsType},
  727. ithrCd=${ithrCd}, contentsLoc=${contentsLoc}"> <!-- 판매불가 상품에 unable 추가 -->
  728. <div class="item_state">
  729. <th:block th:each="optCd : ${#strings.arraySplit(lookbookGoods.optCdInfo,',')}">
  730. <input type="hidden" name="lookbookGoodsOptCd" th:value="${optCd}"/>
  731. </th:block>
  732. <button type="button" class="itemLike" th:classappend="${lookbookGoods.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${lookbookGoods.goodsCd}, ithrCd=${ithrCd}, contentsLoc=${contentsLoc}, planDtlSq=''">관심상품 추가</button>
  733. <th:block th:if="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
  734. <a href="javascript:void(0);" class="itemLink" >
  735. </th:block>
  736. <th:block th:unless="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
  737. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${lookbookGoods.goodsCd}]], '',[[${ithrCd}]],[[${contentsLoc}]] )">
  738. </th:block>
  739. <div class="itemPic">
  740. <img class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+lookbookGoods.sysImgNm+'?RS=96'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  741. </div>
  742. <p class="itemBrand" th:text="${lookbookGoods.brandGroupNm}">BRAND NAME</p>
  743. <div class="itemName" th:text="${lookbookGoods.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
  744. <p class="itemPrice" th:text="${#numbers.formatInteger(lookbookGoods.currPrice, 0,'COMMA')}">80,100</p>
  745. </a>
  746. </div>
  747. </div>
  748. </div>
  749. </div>
  750. </div>
  751. <div class="btn_group_flex">
  752. <div>
  753. <button type="button" class="btn btn_default" onclick="fnAddCartLookBookGoods(this);"><span>모두 쇼핑백 담기</span></button>
  754. </div>
  755. </div>
  756. </div>
  757. </div>
  758. <!-- //상품이미지pic 리스트 -->
  759. <script>
  760. $('#otherGoodsArea').css('display','block');
  761. </script>
  762. </div>
  763. <!-- //STYLE24의 스타일링 추천 -->
  764. <!-- 동일브랜드 추천상품 -->
  765. <div class="pd_clickother" id="goodsRecommendbArea">
  766. </div>
  767. <!-- //동일브랜드 추천상품 -->
  768. <!-- 이 상품과 비슷한 상품영역 -->
  769. <div class="pd_clickother" id="goodsLikebArea">
  770. </div>
  771. <!-- //이 상품과 비슷한 상품영역 -->
  772. </div>
  773. </div>
  774. <!-- 구매하기팝업 -->
  775. <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
  776. <a class="btn btPop_close">Close </a>
  777. <div class="header btPop_head btPopAuto_head">
  778. 구매하기팝업
  779. </div>
  780. <div class="body btPop_body btPopAuto_body">
  781. <div class="option_result op1">
  782. <!-- 옵션 -->
  783. <div class="option_box">
  784. <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
  785. <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
  786. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  787. <div class="opt_header">
  788. <span class="title">컬러</span>
  789. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  790. </div>
  791. <ul>
  792. <li th:each="goodsOption1, status : ${goodsOption1List}">
  793. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
  794. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="">
  795. </a>
  796. </li>
  797. </ul>
  798. </div>
  799. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
  800. <div class="opt_header">
  801. <span class="title">사이즈</span>
  802. <span class="size">
  803. <em class="selectOptCd1"></em>
  804. <em class="selectOptCd1addPrice"></em>
  805. </span>
  806. </div>
  807. <div class="form_field">
  808. <th:block th:each="goodsOption2, status : ${goodsOption2List}"> <!-- 품절사이즈 미노출 -->
  809. <th:block th:if="${goodsOption2.soldoutYn == 'N' and goodsOption2.stockQty > 0}">
  810. <div>
  811. <input type="radio" name="opt" th:id="${goodsOption2.optCd}"
  812. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
  813. <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" ><span th:text="${goodsOption2.optCd2}">90</span></label>
  814. </div>
  815. </th:block>
  816. </th:block>
  817. </div>
  818. </div>
  819. <!-- 해당상품 품절시 노출 -->
  820. <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
  821. <!-- //해당상품 품절시 노출 -->
  822. <div class="opt_count">
  823. <div class="opt_header">
  824. <span class="title">수량</span>
  825. </div>
  826. <div class="number_count">
  827. <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
  828. <input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" onblur="fnChangeOrderEa(this)"
  829. th:attr="minOrdQty=${goodsInfo.minOrdQty}, maxOrdQty=${goodsInfo.maxOrdQty}" data-valid-type="numeric">
  830. <input type="hidden" name="coption" value="" th:attr="price=${goodsInfo.currPrice}">
  831. <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
  832. </div>
  833. </div>
  834. </th:block>
  835. </th:block>
  836. <th:block th:if="${goodsInfo.selfGoodsYn =='N' or goodsInfo.goodsType =='G056_S'}"> <!-- 입점상품 -->
  837. <div class="opt_select">
  838. <div class="form_wrap">
  839. <div class="form_field">
  840. <div class="select_custom option_open">
  841. <div class="combo">
  842. <div class="select">옵션을 선택해주세요</div>
  843. </div>
  844. </div>
  845. </div>
  846. </div>
  847. </div>
  848. <div class="opt_result">
  849. </div>
  850. </th:block>
  851. </div>
  852. <!-- 네이버결제 -->
  853. <div class="npay_box" style="display:none;">
  854. <div class="np_head">
  855. <div><img src="/images/mo/img_npay_txt.png" alt="NAVER 네이버 ID로 간편구매 네이버페이"></div>
  856. <div><button><img src="/images/mo/btn_npay_txt.png" alt="Npay 구매"></button></div>
  857. </div>
  858. <div class="np_body">
  859. <a href="#none"><em>[멥버십]</em>첫달 무료가입하고 추가 4%!</a>
  860. </div>
  861. </div>
  862. </div>
  863. <!-- 옵션선택팝업 -->
  864. <div class="pop_option_select">
  865. <div class="close">닫기</div>
  866. <div class="pp_body">
  867. <div class="pp_cont">
  868. <div class="opt_select">
  869. <div class="opt_header">
  870. <span class="title">옵션선택</span>
  871. <div class="check_excluding form_field">
  872. <div>
  873. <input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnOption1(this,[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
  874. </div>
  875. <div class="guidance" >
  876. <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
  877. <p>품절 옵션이 제외되었습니다</p>
  878. </div>
  879. <script>
  880. function getGuidance() {
  881. if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
  882. $(".guidance").addClass("ontoast");
  883. setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
  884. }
  885. }
  886. </script>
  887. </div>
  888. </div>
  889. <!-- 일반상품일때 -->
  890. <th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!-- 입점상품 -->
  891. <div class="nomOption">
  892. <div class="form_wrap">
  893. <div class="form_field" th:id="${'form_field1_'+goodsInfo.goodsCd}">
  894. <div class="select_custom item_opt1 item_opt1_1" th:classappend="${goodsInfo.goodsCd}" th:attr="id=${goodsInfo.goodsCd}">
  895. <div class="combo">
  896. <div class="select">선택</div>
  897. <ul class="list" style="display: none;">
  898. <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li> -->
  899. <th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
  900. <li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
  901. th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}">
  902. <div th:text="${goodsOption.optCd1}">상품옵션</div>
  903. <div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
  904. <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="selfGoodsYn=${goodsOption.selfGoodsYn}"/>
  905. </li>
  906. </th:block>
  907. </ul>
  908. </div>
  909. </div>
  910. </div>
  911. <div class="form_field" th:id="${'form_field2_'+goodsInfo.goodsCd}">
  912. <div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}" disabled th:attr="qty=${goodsInfo.minOrdQty}">
  913. <div class="combo">
  914. <div class="select">선택</div>
  915. <ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
  916. <!-- 옵션2 -->
  917. </ul>
  918. </div>
  919. </div>
  920. </div>
  921. </div>
  922. </div>
  923. </th:block>
  924. <!-- //일반상품일때 -->
  925. <!-- 셋트상품일때 -->
  926. <th:block th:if="${goodsInfo.goodsType =='G056_S' }"> <!-- 세트상품 -->
  927. <div class="setOption" th:if="${goodsComposeList != null and !goodsComposeList.empty}" >
  928. <div class="form_wrap" th:each="goodsCompose, status : ${goodsComposeList}">
  929. <div class="form_field" th:id="${'form_field1_'+goodsCompose.compsGoodsCd}">
  930. <p class="title" th:text="${goodsCompose.compsGoodsFullNm}">슬림핏</p>
  931. <div class="select_custom item_opt1" th:classappend="${'item_opt1_'+status.count +' '+goodsCompose.compsGoodsCd}" th:attr="id=${goodsCompose.compsGoodsCd}, qty=${goodsCompose.qty}"
  932. th:if="${goodsCompose.goodsOption1List != null and !goodsCompose.goodsOption1List.empty}" >
  933. <div class="combo">
  934. <div class="select">선택</div>
  935. <ul class="list" style="display: none;">
  936. <th:block th:each="goodsOption, optionStatus : ${goodsCompose.goodsOption1List}" >
  937. <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsCompose.compsGoodsCd}|" th:if=${optionStatus.first}>선택</li> -->
  938. <li th:onclick="fnOption2([[${status.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
  939. th:attr="aria-disabled=${(goodsCompose.goodsStat != 'G008_90')? 'true':''}, data-soldout=${(goodsCompose.goodsStat != 'G008_90')? 'true':''}"
  940. ><th:block th:text="${goodsOption.optCd1Nm}"></th:block>
  941. <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="optCd1=${goodsOption.optCd1},optCd1Nm=${goodsOption.optCd1Nm},optCd2=${goodsOption.optCd2},optCd=${goodsOption.optCd}"/>
  942. </li>
  943. </th:block>
  944. </ul>
  945. </div>
  946. </div>
  947. </div>
  948. <div class="form_field" th:id="${'form_field2_'+goodsCompose.compsGoodsCd}">
  949. <div class="select_custom item_opt2" th:classappend="${'item_opt2_'+status.count +' '+goodsCompose.compsGoodsCd}" disabled>
  950. <div class="combo">
  951. <div class="select">선택</div>
  952. <ul class="list" th:id="|goodsOpt2${goodsCompose.compsGoodsCd}|">
  953. </ul>
  954. </div>
  955. </div>
  956. </div>
  957. </div>
  958. </div>
  959. </th:block>
  960. </div>
  961. </div>
  962. </div>
  963. </div>
  964. <!-- //옵션선택팝업 -->
  965. </div>
  966. <div class="body btPop_foot btPopAuto_foot">
  967. <!-- 총 결재금액, 하단버튼 -->
  968. <div class="pay_box">
  969. <div class="price_box">
  970. <p class="number">
  971. 총&nbsp;<span id="goodsTotalQty">0</span>개
  972. </p>
  973. <p class="price">
  974. <span>
  975. <b id="goodsTotalPrice">0</b><em>원</em>
  976. </span>
  977. </p>
  978. </div>
  979. <div class="btn_box">
  980. <button type="button" class="gift" onclick="fnAddCart('G');" th:if="${goodsInfo.giftPackYn == 'Y'}"><span><span>선물해보세요!</span></span></button>
  981. <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  982. <button type="button" class="cart" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
  983. <button type="button" class="buyNow" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
  984. </th:block>
  985. <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  986. <button class="cantbuying" style="display:block;">SOLD OUT</button>
  987. </th:block>
  988. </div>
  989. </div>
  990. </div>
  991. </div>
  992. <!-- 구매하기팝업 -->
  993. </section>
  994. <!-- ★ 컨텐츠 종료 -->
  995. <!-- 바닥메뉴 -->
  996. <div class="product_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
  997. <div class="share_like">
  998. <button type="button" class="share">공유하기</button>
  999. <!-- <th:block th:include="~{web/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block> -->
  1000. <button type="button" class="like" th:classappend="${goodsInfo.wishYn == 'Y'}? 'active' : ''"
  1001. onclick="cfnPutWishList(this);"
  1002. th:attr="goodsCd=${params.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">위시리스트</button>
  1003. </div>
  1004. <div class="prd_buy">
  1005. <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  1006. <button type="button" class="buying btPop_auto" id="btn_purchase">구매하기</button>
  1007. </th:block>
  1008. <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
  1009. <button type="button" class="cantbuying" style="display:block;">SOLD OUT</button>
  1010. </th:block>
  1011. </div>
  1012. </div>
  1013. <!-- //바닥메뉴 -->
  1014. <div class="pd_pop full_pop pd_itemthumb_pop" id="pdItemThumbPop" style="display: none;" th:if="${goodsImgList != null and !goodsImgList.empty}" >
  1015. <div class="full_popup_wrap">
  1016. <h5 class="sr-only">상품썸네일 크게보기</h5>
  1017. <div class="btn_close">
  1018. <a href="javascript:void(0);" id="btn_close_itemThumbPop" onclick="cfCloseLayer('pdItemThumbPop')">닫기버튼</a>
  1019. </div>
  1020. <div class="full_pop_container">
  1021. <div id="popThumb1" class="scaleview">
  1022. <video id="video_0" loop="" autoplay="" poster="https://images.kolonmall.com/Prod_Img/JN/2021/LM15/L4PAM21041GRX_LM15.jpg" data-playing="">
  1023. <source src="https://images.kolonmall.com/Prod_Img/product_video/L4PAM21041GRX.mp4" type="video/mp4">
  1024. </video>
  1025. <div class="video_controls">
  1026. <button type="button" class="btn_video_play"><span>play</span></button>
  1027. <button type="button"class="btn_video_pause"><span>pause</span></button>
  1028. </div>
  1029. </div>
  1030. <th:block th:each="goodsImg, status : ${goodsImgList}">
  1031. <div id="popThumb2" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.')
  1032. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  1033. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  1034. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  1035. </div>
  1036. </th:block>
  1037. </div>
  1038. </div>
  1039. </div>
  1040. </main>
  1041. </form>
  1042. <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
  1043. <form id="directOrderForm" method="POST" action="/order/noMember"></form>
  1044. <script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
  1045. <script th:inline="javascript">
  1046. /*<![CDATA[*/
  1047. var cateNm = "";
  1048. // 다다익선 상품
  1049. //var fnGoodsTmtbSearch = function(params) {
  1050. // gagajf.ajaxSubmit("/goods/detail/tmtb/frame", "html", "goodsTmtbArea", params);
  1051. //}
  1052. // 품절처리
  1053. var fnOptionSoldout = function(){
  1054. let $target=$("#cartForm").find('.form_field2');
  1055. let soldout = false;
  1056. for(var i=0;i<$target.find('input[name="opt"]').length;i++){
  1057. if($target.find('input[name="opt"]').eq(i).attr('disabled')) {
  1058. soldout = true;
  1059. }
  1060. }
  1061. let goodsType = [[${goodsInfo.goodsType}]];
  1062. if (soldout && goodsType == 'G056_N'&& $("#cartForm input[name=selfGoodsYn]").val() == 'Y') {
  1063. $(".info_restock").show();
  1064. }
  1065. }
  1066. //사이즈 클릭시 - 입점단품
  1067. var fnViewStockSelfNo = function(obj) {
  1068. let $obj = $(obj);
  1069. let $target = $obj.find('input[name="opt2"]');
  1070. let goodsCd = $target.attr("goodsCd");
  1071. //let currPrice = $target.attr("currPrice");
  1072. let currPrice = $('#cartForm input[name=currPrice]').val();
  1073. let optCd = $target.attr("optCd");
  1074. let optCd1 = $target.attr("optCd1");
  1075. let optCd1Nm = $target.attr("optCd1Nm");
  1076. let optCd2 = $target.attr("optCd2");
  1077. let minOrdQty = $target.attr("minOrdQty");
  1078. let maxOrdQty = $target.attr("maxOrdQty");
  1079. let addPrice = $target.attr("addPrice");
  1080. let selfGoodsYn = $target.attr("selfGoodsYn");
  1081. let optQty = minOrdQty;
  1082. let maxCnt = maxOrdQty;
  1083. let params = new Object();
  1084. params.goodsCd = goodsCd;
  1085. params.optCd = optCd;
  1086. params.optCd1 = optCd1;
  1087. params.optCd2 = optCd2;
  1088. params.selfGoodsYn = selfGoodsYn;
  1089. // 중복선택 확인 opt_result
  1090. var overlap = 0;
  1091. $('.pd_detail .opt_result .number_count').each(function() {
  1092. if ($('input[name="coption"]', this).val() == optCd) {
  1093. ++overlap;
  1094. }
  1095. });
  1096. if (overlap > 0) {
  1097. mcxDialog.alert("이미 선택하신 옵션입니다.");
  1098. return false;
  1099. }
  1100. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  1101. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1102. if (maxCnt > itemCnt) {
  1103. maxCnt = itemCnt;
  1104. }
  1105. if (minOrdQty > itemCnt) {
  1106. //alert("무슨작업을 해야할가요?");
  1107. return false; //무슨작업을 해야하나?
  1108. }
  1109. //상품정보
  1110. let price = parseInt(currPrice)+ parseInt(addPrice);
  1111. let tag = "";
  1112. tag += '<div class="result_item result_'+optCd+'">\n';
  1113. tag += ' <div class="opt_header">\n';
  1114. tag += ' <div class="bundle">\n';
  1115. tag += ' <span class="item_option">'+optCd1Nm+'/'+optCd2+'</span>\n';
  1116. tag += ' </div>\n';
  1117. tag += ' </div>\n';
  1118. tag += ' <div class="number_count">\n';
  1119. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  1120. tag += ' <input type="text" name="cea" optCd="'+optCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" onblur="fnChangeOrderEa(this)" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" data-valid-type="numeric">\n';
  1121. tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  1122. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  1123. tag += ' </div>\n';
  1124. tag += ' <div class="item_price">\n';
  1125. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  1126. tag += ' </div>\n';
  1127. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
  1128. tag += '</div>\n';
  1129. let $objUp = $('.pd_detail .opt_result');
  1130. $objUp.append(tag);
  1131. fnSetTotalPrice();
  1132. $('.pop_option_select').css("display", "none");
  1133. }, "text");
  1134. }
  1135. //세트 사이즈 클릭시
  1136. function fnViewStockSet(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
  1137. let target=$('.select_custom.item_opt2');
  1138. let targetSize = target.length; //구성품 갯수
  1139. let goodsOption = [];
  1140. let cnt = 0;
  1141. let itemSize = 0;
  1142. let resultOptCd = "";
  1143. target.each(function(){
  1144. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  1145. if (goodsCd != $(this).find('.select').find('input[name=opt2]').attr('goodscd')){
  1146. itemSize ++;
  1147. resultOptCd += $(this).find('.select').find('input[name=opt2]').attr('optcd') + "_";
  1148. goodsOption.push($(this).find('input[name=opt2]').val()); //goodsCd|optCd|qty
  1149. }
  1150. }
  1151. });
  1152. //내가 선택한 상품
  1153. if (typeof ($(obj).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(obj).find('input[name=opt2]').val())){
  1154. itemSize ++;
  1155. }
  1156. //내가 선택하 옵션
  1157. resultOptCd += $(obj).find('input[name=opt2]').attr('optcd') + "_";
  1158. goodsOption.push($(obj).find('input[name=opt2]').val()); //goodsCd|optCd|qty
  1159. // 중복선택 확인 opt_result
  1160. let arrSelOpt = resultOptCd.split("_"); // 내가 선택한 옵션목록
  1161. let selCnt = 0;
  1162. let overlap = 0;
  1163. $('.pd_detail .opt_result .number_count').each(function() {
  1164. let val = $('input[name="coption"]', this).val();
  1165. val = val.replaceAll('result_', '');
  1166. let arrOpt = val.split("_");
  1167. for(var i=0;i<arrOpt.length;i++){
  1168. for(var j=0;j<arrSelOpt.length;j++){
  1169. if (gagajf.isNull(arrOpt[i]) || gagajf.isNull(arrSelOpt[j])) continue;
  1170. if (arrOpt[i] == arrSelOpt[j]){
  1171. selCnt++;
  1172. }
  1173. }
  1174. }
  1175. if (Number(itemSize) == Number(selCnt)) {
  1176. ++overlap;
  1177. }
  1178. });
  1179. if (overlap > 0) {
  1180. mcxDialog.alert("이미 선택하신 옵션입니다.");
  1181. return false;
  1182. }
  1183. let mGoodsCd = $("#cartForm input[name=goodsCd]").val();
  1184. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1185. if (targetSize == itemSize){
  1186. let maxCnt = maxOrdQty;
  1187. let optQty = minOrdQty;
  1188. let data = {arrGoodsOption : goodsOption
  1189. ,minOrdQty : minOrdQty
  1190. ,maxOrdQty : maxOrdQty
  1191. ,goodsCd : mGoodsCd
  1192. ,selfGoodsYn : selfGoodsYn
  1193. };
  1194. let jsonData = JSON.stringify(data);
  1195. gagajf.ajaxJsonSubmit('/goods/detail/ajaxGoodsSetStockQty', jsonData, function(result) {
  1196. var itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1197. if (maxCnt > itemCnt) {
  1198. maxCnt = itemCnt;
  1199. }
  1200. if (minOrdQty > itemCnt) {
  1201. //alert("무슨작업을 해야할가요?");
  1202. return false; //무슨작업을 해야하나?
  1203. }
  1204. //상품정보
  1205. let $selObj = $('.pop_option_select .setOption .form_wrap');
  1206. let currPrice = Number($('#cartForm input[name=currPrice]').val());
  1207. let price = currPrice;
  1208. let addPrice = 0;
  1209. resultOptCd = "";
  1210. $selObj.each(function() {
  1211. resultOptCd += $(this).find('input[name=opt2]').attr('optcd') + "_";
  1212. });
  1213. let tag = "";
  1214. tag += '<div class="result_item result_'+resultOptCd+'">\n';
  1215. tag += ' <div class="opt_header">\n';
  1216. $selObj.each(function() {
  1217. tag += ' <div class="bundle">\n';
  1218. tag += ' <span class="item_name">'+$(this).find('.title').text()+'</span>\n';
  1219. tag += ' <span class="item_option">'+$(this).find('input[name=opt2]').attr('optcd1Nm')+'/'+$(this).find('input[name=opt2]').attr('optcd2')+'</span>\n';
  1220. tag += ' <input type="hidden" name="selOption" goodsCd="'+goodsCd+'" optCd="'+optCd+'" qty="'+$(this).find('.item_opt1 ').attr('qty')+'" /> \n';
  1221. tag += ' </div>\n';
  1222. addPrice += Number($(this).find('input[name=opt2]').attr('addprice'));
  1223. });
  1224. price = Number(currPrice) + Number(addPrice);
  1225. tag += ' </div>\n';
  1226. tag += ' <div class="number_count">\n';
  1227. tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  1228. tag += ' <input type="text" name="cea" optCd="'+resultOptCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" onblur="fnChangeOrderEa(this)" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxCnt+'" data-valid-type="numeric">\n';
  1229. tag += ' <input type="hidden" name="coption" value="'+resultOptCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  1230. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  1231. tag += ' </div>\n';
  1232. tag += ' <div class="item_price">\n';
  1233. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  1234. tag += ' </div>\n';
  1235. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+resultOptCd+'\')"><span>삭제</span></button>\n';
  1236. tag += '</div>\n';
  1237. let $objUp = null;
  1238. $objUp = $('.pd_detail .opt_result');
  1239. $objUp.append(tag);
  1240. fnSetTotalPrice();
  1241. $('.pop_option_select').css("display", "none");
  1242. });
  1243. }
  1244. }
  1245. // 옵션1 조회
  1246. var fnOption1 = function(ridx,goodsCd){
  1247. // 품절제외 여부
  1248. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  1249. // 입점
  1250. if("N" == $("#cartForm input[name=selfGoodsYn]").val() ){
  1251. let data = {goodsCd : goodsCd
  1252. ,optionSoldoutSkip : optionSoldoutSkip
  1253. };
  1254. let jsonData = JSON.stringify(data);
  1255. fnOption1Display(ridx, jsonData );
  1256. }else if("G056_S" == $("#cartForm input[name=goodsType]").val() ){
  1257. let idx = 1;
  1258. target=$('.select_custom.item_opt1');
  1259. target.each(function(){
  1260. let data = {goodsCd : $(this).attr('id')
  1261. ,optionSoldoutSkip : optionSoldoutSkip
  1262. };
  1263. let jsonData = JSON.stringify(data);
  1264. fnOption1Display(idx, jsonData );
  1265. idx++;
  1266. });
  1267. }
  1268. }
  1269. // 옵션1 노출처리
  1270. var fnOption1Display = function(ridx, jsonData ){
  1271. gagajf.ajaxJsonSubmit('/goods/detail/option1/list', jsonData, function(result) {
  1272. if (result.dataList != null && result.dataList.length > 0) {
  1273. let tag = "";
  1274. let $obj = null;
  1275. let selfGoodsYn = 'N';
  1276. $.each(result.dataList, function(idx, item) {
  1277. if (idx == 0){
  1278. //$('.form_field .select_custom.item_opt1.' +item.goodsCd ).attr('disabled', false)
  1279. //------
  1280. tag += '<div class="select_custom item_opt1 item_opt1_'+ridx+ ' '+goodsCd+'">\n';
  1281. tag += '<div class="combo">\n';
  1282. tag += '<div class="select">선택</div>\n';
  1283. tag += '<ul class="list" style="display: none;">\n';
  1284. //------
  1285. //tag += '<li class="selected" id="selfGoodsOpt'+item.goodsCd+'">선택</li>\n';
  1286. selfGoodsYn = item.selfGoodsYn;
  1287. }
  1288. let soldoutYn = "";
  1289. if ("G008_90" != item.goodsStat || item.stockQty <= 0 || item.goodsStat != 'G008_90') soldoutYn = "true";
  1290. tag += '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2('+ ridx+', \''+ item.goodsCd+'\' , \''+ item.optCd1+'\', \''+ item.minOrdQty+'\', \''+ item.maxOrdQty+'\' )">\n';
  1291. tag += '<div>' +item.optCd1 +'</div>';
  1292. tag += '<input type="hidden" name="opt" value="'+ item.goodsCd+'" optCd1="'+ item.optCd1 +'" qty="'+ item.qty +'" />\n';
  1293. tag += '</li>\n';
  1294. });
  1295. if (!gagajf.isNull(tag)){
  1296. //------
  1297. tag += '</ul>\n';
  1298. tag += '</div>\n';
  1299. tag += '</div>\n';
  1300. //------
  1301. }
  1302. if (selfGoodsYn == "Y"){
  1303. if (ridx == 1){
  1304. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1305. }else if (ridx == 2){
  1306. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  1307. }else if (ridx == 3){
  1308. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  1309. }else if (ridx == 4){
  1310. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  1311. }else{
  1312. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  1313. }
  1314. }else{
  1315. $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1316. ridx = 1; // 입점은 1로 고정
  1317. }
  1318. // $obj.html('');
  1319. // $obj.append(tag);
  1320. $obj.remove();
  1321. $('#form_field1_'+ goodsCd).append(tag);
  1322. if (selfGoodsYn == "Y"){
  1323. if (ridx == 1){
  1324. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1325. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1 .combo .list > li').eq(0).trigger("click");
  1326. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
  1327. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
  1328. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
  1329. }else if (ridx == 2){
  1330. var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  1331. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2 .combo .list > li').eq(0).trigger("click");
  1332. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').attr('disabled',true);
  1333. }else if (ridx == 3){
  1334. var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  1335. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3 .combo .list > li').eq(0).trigger("click");
  1336. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').attr('disabled',true);
  1337. }else if (ridx == 4){
  1338. var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  1339. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
  1340. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
  1341. }else{
  1342. var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  1343. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
  1344. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
  1345. }
  1346. }else{
  1347. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1348. //$('.pop_option_select .select_custom.item_opt2 .combo .list > li').eq(0).trigger("click");
  1349. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
  1350. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
  1351. //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
  1352. }
  1353. }
  1354. //품절 제외 메세지 처리
  1355. getGuidance();
  1356. });
  1357. }
  1358. // 옵션2 조회
  1359. var fnOption2 = function(ridx, goodsCd, optCd1, minOrdQty, maxOrdQty){
  1360. // 품절제외 여부
  1361. let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
  1362. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1363. let data = {goodsCd : goodsCd
  1364. ,optCd1 : optCd1
  1365. ,optionSoldoutSkip : optionSoldoutSkip
  1366. ,mastrGoodsCd : $('#cartFprm input[name=goodsCd]').val()
  1367. };
  1368. let jsonData = JSON.stringify(data);
  1369. gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
  1370. if (result.dataList != null && result.dataList.length > 0) {
  1371. let tag = "";
  1372. let $obj = null;
  1373. let qty = 0; // 구성수량
  1374. if (selfGoodsYn == "Y"){
  1375. if (ridx == 1){
  1376. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1377. }else if (ridx == 2){
  1378. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_2');
  1379. }else if (ridx == 3){
  1380. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_3');
  1381. }else if (ridx == 4){
  1382. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_4');
  1383. }else{
  1384. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_5');
  1385. }
  1386. qty = $obj.parent().parent().find('.select_custom').attr('qty'); // 구성수량
  1387. }else{
  1388. $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1389. qty = $obj.attr('qty'); // 구성수량
  1390. }
  1391. $.each(result.dataList, function(idx, item) {
  1392. if (idx == 0){
  1393. //$obj = $('#goodsOpt2'+item.goodsCd);
  1394. //$obj = $('.form_field .select_custom.item_opt2.item_opt2_1');
  1395. // $obj.html('');
  1396. $obj.remove();
  1397. // $('.form_field .select_custom.item_opt2.' +item.goodsCd ).attr('disabled', false)
  1398. //------
  1399. tag += '<div class="select_custom item_opt2 item_opt2_'+ridx+ ' '+goodsCd+'">\n';
  1400. tag += '<div class="combo">\n';
  1401. tag += '<div class="select">선택</div>\n';
  1402. tag += '<ul class="list">\n';
  1403. //------
  1404. //tag += '<li class="selected" id="goodsOpt2'+item.goodsCd+'">선택</li>\n';
  1405. }
  1406. let soldoutYn = "";
  1407. let saleQty = (Number(qty) * Number(minOrdQty));
  1408. if ("Y" == item.soldoutYn || Number(item.stockQty) <= Number(saleQty))soldoutYn = "true";
  1409. if (selfGoodsYn == "Y"){
  1410. tag += '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSet(this, \''+ item.goodsCd+'\' , \''+ item.optCd+'\' , \''+ item.optCd1+'\' , \''+ item.optCd2+'\', \''+ minOrdQty+'\', \''+ maxOrdQty+'\')">\n';
  1411. }else{
  1412. tag += '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSelfNo(this)">\n';
  1413. }
  1414. tag += item.optCd2;
  1415. if (item.addPrice > 0){
  1416. tag += ' (+'+ item.addPrice.addComma() +'원)\n';
  1417. }else{
  1418. }
  1419. tag += '<input type="hidden" name="opt2" value="'+ item.goodsCd+'|'+item.optCd +'|'+qty +'" goodsCd="'+item.goodsCd+'" currPrice="'+ item.currPrice +'" addPrice="'+item.addPrice+'" optCd="'+item.optCd+'" optCd1="'+item.optCd1+'" optCd1Nm="'+item.optCd1Nm+'" optCd2="'+item.optCd2+'" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'"/>\n';
  1420. tag += '</li>\n';
  1421. });
  1422. if (!gagajf.isNull(tag)){
  1423. //------
  1424. tag += '</ul>\n';
  1425. tag += '</div>\n';
  1426. tag += '</div>\n';
  1427. //------
  1428. }
  1429. // $obj.append(tag);
  1430. $('#form_field2_'+ goodsCd).append(tag);
  1431. if (selfGoodsYn == "Y"){
  1432. if (ridx == 1){
  1433. var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1434. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
  1435. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
  1436. }else if (ridx == 2){
  1437. var opt_selecter02_2 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_2');
  1438. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').addClass('on');
  1439. //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').find('.list').css('display','block');
  1440. }else if (ridx == 3){
  1441. var opt_selecter02_3 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_3');
  1442. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').addClass('on');
  1443. //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').find('.list').css('display','block');
  1444. }else if (ridx == 4){
  1445. var opt_selecter02_4 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_4');
  1446. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').addClass('on');
  1447. //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').find('.list').css('display','block');
  1448. }else{
  1449. var opt_selecter02_5 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_5');
  1450. //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').addClass('on');
  1451. //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').find('.list').css('display','block');
  1452. }
  1453. }else{
  1454. var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
  1455. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
  1456. //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
  1457. }
  1458. }
  1459. });
  1460. }
  1461. // 수량 변경 클릭
  1462. var fnAdjustOrderEa = function(obj) {
  1463. let $obj = $(obj);
  1464. let $target = $obj.parent().children('input[name="cea"]');
  1465. let ea =parseInt($target.val());
  1466. let minOrdQty = 0;
  1467. let maxOrdQty = 0;
  1468. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  1469. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  1470. mcxDialog.alert("사이즈를 선택해 주세요.");
  1471. return false;
  1472. }
  1473. minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  1474. maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  1475. }else{
  1476. minOrdQty = parseInt( $target.attr('minOrdQty'));
  1477. maxOrdQty = parseInt( $target.attr('maxOrdQty'));
  1478. }
  1479. if ($obj.attr('adjust') == '-') --ea;
  1480. else ++ea;
  1481. //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
  1482. //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
  1483. if (ea.toString().length > maxOrdQty) --ea;
  1484. if (ea < 1) ea = minOrdQty;
  1485. $target.val(ea);
  1486. $target.attr('value', ea);
  1487. fnChangeOrderEa($target[0]);
  1488. }
  1489. //옵션 갯수 변경
  1490. var fnChangeOrderEa = function(obj) {
  1491. let $obj = $(obj);
  1492. let $target = $obj.parent().children('input[name="cea"]');
  1493. let ea = parseInt($obj.val());
  1494. let optCd = $(obj).attr('optCd');
  1495. let minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
  1496. let maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
  1497. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  1498. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  1499. mcxDialog.alert("사이즈를 선택해 주세요.");
  1500. return false;
  1501. }
  1502. }else{
  1503. maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
  1504. minOrdQty = parseInt($(obj).attr('minOrdQty'));
  1505. optCd = $(obj).attr('optCd');
  1506. }
  1507. let alertMsg = '';
  1508. if (ea < minOrdQty) {
  1509. alertMsg = minOrdQty+"개 부터 구매 가능합니다.";;
  1510. ea = minOrdQty;
  1511. }
  1512. if (ea > maxOrdQty) {
  1513. alertMsg = maxOrdQty+"개 까지만 구매 가능합니다.";
  1514. ea = maxOrdQty;
  1515. }
  1516. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  1517. $("#cartForm input[name=cea]").val(ea);
  1518. $("#cartForm input[name=ordQty]").val(ea);
  1519. }
  1520. //obj.value = ea;
  1521. $target.val(ea);
  1522. $target.attr('value', ea);
  1523. if (alertMsg != ''){
  1524. mcxDialog.alert(alertMsg);
  1525. return false;
  1526. }
  1527. if (ea <= 1){
  1528. $('.number_count').find('.minus').addClass('min_val');
  1529. }else{
  1530. $('.number_count').find('.minus').removeClass('min_val');
  1531. }
  1532. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
  1533. }else{
  1534. let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
  1535. let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
  1536. let totalPrice = ((goodsPrice+addPrice) * ea);
  1537. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
  1538. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
  1539. $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
  1540. }
  1541. fnSetTotalPrice();
  1542. }
  1543. //합계 계산
  1544. var fnSetTotalPrice = function() {
  1545. //let f = document.cartForm;
  1546. let totalEa = 0;
  1547. let totalPrice = 0;
  1548. $('input[name="cea"]').each(function() {
  1549. let ea = parseInt($(this).val());
  1550. let addPrice = 0;
  1551. let target=$('.select_custom.item_opt2');
  1552. target.each(function() {
  1553. if (typeof ($(this).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('input[name=opt2]').val())){
  1554. addPrice += Number($(this).find('input[name=opt2]').attr('addPrice'));
  1555. }
  1556. });
  1557. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  1558. totalEa += ea;
  1559. if (goodsPrice > 0) {
  1560. totalPrice += ((goodsPrice+addPrice) * ea);
  1561. }
  1562. });
  1563. $('#goodsTotalQty').html(totalEa.addComma());
  1564. $('#goodsTotalPrice').html(totalPrice.addComma());
  1565. }
  1566. // 선택상품 삭제
  1567. var fnSelectGoodsDel = function(optCd){
  1568. $('.result_'+optCd).remove();
  1569. fnSetTotalPrice();
  1570. }
  1571. //장바구니담기
  1572. var fnAddCart = function(btnType){
  1573. let params = [];
  1574. let goodsType = $("#cartForm input[name=goodsType]").val();
  1575. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1576. if (goodsType == 'G056_N' && selfGoodsYn == 'Y' ){
  1577. if (gagajf.isNull($("#cartForm input[name=optCd2]").val())) {
  1578. mcxDialog.alert("사이즈를 선택해 주세요.");
  1579. return;
  1580. }
  1581. let compsList = [];
  1582. let obj = new Object();
  1583. obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
  1584. obj.optCd = $("#cartForm input[name=optCd]").val();
  1585. obj.goodsQty = $("#cartForm input[name=ordQty]").val();
  1586. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  1587. obj.cartGb = btnType;
  1588. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1589. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1590. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1591. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1592. compsList.push(obj);
  1593. // 장바구니담기
  1594. cfnAddCart(compsList);
  1595. }else {
  1596. let cartGoodsList = [];
  1597. let target = $('#cartForm input[name=cea]');
  1598. if (goodsType == 'G056_N'){
  1599. let compsList = [];
  1600. target.each(function() {
  1601. let ea = parseInt($(this).val());
  1602. let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
  1603. let optCd = $(this).parent().find('input[name="coption"]').val();
  1604. //let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  1605. //let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  1606. var obj = new Object();
  1607. obj.cartGb = btnType;
  1608. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  1609. obj.goodsCd = goodsCd
  1610. obj.optCd = optCd;
  1611. obj.goodsQty = ea;
  1612. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1613. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1614. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1615. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1616. compsList.push(obj);
  1617. });
  1618. // 장바구니담기
  1619. cfnAddCart(compsList);
  1620. }else{ // 세트
  1621. target.each(function() {
  1622. let compsList = [];
  1623. let goodsList = {
  1624. cartCompsList : new Array()
  1625. }
  1626. let ea = parseInt($(this).val());
  1627. let targetItem = $(this).parent().parent().find('.bundle'); // 구성상품
  1628. targetItem.each(function() {
  1629. var obj = new Object();
  1630. obj.cartGb = btnType;
  1631. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  1632. obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
  1633. obj.itemCd = $(this).find('input[name=selOption]').attr('goodsCd');
  1634. obj.optCd = $(this).find('input[name=selOption]').attr('optCd');
  1635. obj.goodsQty = ea;
  1636. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1637. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1638. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1639. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1640. compsList.push(obj);
  1641. });
  1642. goodsList.cartCompsList = compsList;
  1643. cartGoodsList.push(goodsList);
  1644. });
  1645. // 장바구니담기
  1646. cfnAddCart(cartGoodsList);
  1647. }
  1648. }
  1649. }
  1650. // 룩북속 상품 쇼핑백 담기
  1651. var fnAddCartLookBookGoods = function(obj){
  1652. let $obj = $(obj);
  1653. let $target = $obj.parent().parent().parent().find('.swiper-container').find('.item_prod');
  1654. let goodsSize = $target.length;
  1655. let btnType = "C";
  1656. let params = [];
  1657. let goodsIdx = 0;
  1658. $target.each(function(){
  1659. goodsIdx ++;
  1660. if ($(this).hasClass('unable')) {
  1661. }else{
  1662. // 옵션확인
  1663. let goodsCnt = $(this).find('input[name=lookbookGoodsOptCd]').length;
  1664. if (goodsCnt == 1){
  1665. let arrOpt = $(this).find('input[name=lookbookGoodsOptCd]').val();
  1666. let arrOptInfo = arrOpt.split(':');
  1667. let obj = new Object();
  1668. obj.goodsCd = $(this).attr("goodsCd");
  1669. //obj.optCd = $(this).attr("optCd");
  1670. obj.optCd = arrOptInfo[1];
  1671. obj.goodsQty = $(this).attr("minOrdQty");
  1672. obj.goodsType = $(this).attr("goodsType");
  1673. obj.cartGb = btnType;
  1674. obj.afLinkCd = '';
  1675. obj.ithrCd = $(this).attr("ithrCd");
  1676. obj.contentsLoc = $(this).attr("contentsLoc");
  1677. obj.planDtlSq = '';
  1678. obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  1679. if (goodsIdx == goodsSize){
  1680. obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  1681. }
  1682. params.push(obj);
  1683. // 장바구니담기
  1684. cfnAddCart(params);
  1685. }else{
  1686. let $goods = $(this);
  1687. let cartGoodsList = [];
  1688. let compsList = [];
  1689. let goodsList = {
  1690. cartCompsList : new Array()
  1691. }
  1692. let arrInfo = $(this).find('input[name=lookbookGoodsOptCd]').val().split(','); // 상품코드단위
  1693. $.each(arrInfo, function(idx, item) {
  1694. let arrOptInfo = item.split(':');
  1695. let obj = new Object();
  1696. obj.cartGb = btnType;
  1697. obj.goodsType = $goods.attr("goodsType");
  1698. obj.goodsCd = $goods.attr("goodsCd");
  1699. obj.itemCd =arrOptInfo[0];
  1700. obj.optCd = arrOptInfo[1];
  1701. obj.goodsQty = $goods.attr("minOrdQty");
  1702. obj.afLinkCd = '';
  1703. obj.ithrCd = $goods.attr("ithrCd");
  1704. obj.contentsLoc = $goods.attr("contentsLoc");
  1705. obj.planDtlSq = ''
  1706. obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  1707. if (goodsIdx == goodsSize){
  1708. obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
  1709. }
  1710. compsList.push(obj);
  1711. });
  1712. goodsList.cartCompsList = compsList;
  1713. cartGoodsList.push(goodsList);
  1714. // 장바구니담기
  1715. cfnAddCart(cartGoodsList);
  1716. }
  1717. }
  1718. });
  1719. // 장바구니담기
  1720. /* if (params.length > 0){
  1721. cfnAddCart(params);
  1722. } */
  1723. }
  1724. $(document).ready( function() {
  1725. $('.timer_box').css('display', 'none');
  1726. var params = new Object();
  1727. params.goodsCd = [[${params.goodsCd}]];
  1728. params.viewDt = [[${params.viewDt}]];
  1729. params.preview = [[${params.preview}]];
  1730. params.adminYn = [[${params.adminYn}]];
  1731. params.goodsType = [[${params.goodsType}]];
  1732. params.supplyCompCd = [[${params.supplyCompCd}]];
  1733. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  1734. // 함께본 상품(ajax html)
  1735. params.goodsOtherGb = "together";
  1736. params.ithrCd = "tmtb";
  1737. params.contentsLoc = "tmtb";
  1738. fnGoodsTogetherSearch(params);
  1739. // 추천 상품(ajax html)
  1740. params.goodsOtherGb = "recommend";
  1741. params.ithrCd = "tmtb";
  1742. params.contentsLoc = "tmtb";
  1743. fnGoodsRecommendSearch(params);
  1744. // 비슷한 상품(ajax html)
  1745. params.goodsOtherGb = "like";
  1746. params.ithrCd = "tmtb";
  1747. params.contentsLoc = "tmtb";
  1748. fnGoodsLikeSearch(params);
  1749. var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
  1750. var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
  1751. var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
  1752. var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
  1753. var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
  1754. if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
  1755. $('.timer_box').css('display', 'block');
  1756. /* 행사 남은시간 */
  1757. function promotionTimer() {
  1758. var endTime = new Date([[${goodsInfo.socialEddt}]]); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
  1759. endTime = (Date.parse(endTime) / 1000);
  1760. var now = new Date();
  1761. now = (Date.parse(now) / 1000);
  1762. var timeLeft = endTime - now;
  1763. var days = Math.floor(timeLeft / 86400);
  1764. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  1765. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  1766. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  1767. if (hours < '10') { hours = '0' + hours; }
  1768. if (minutes < '10') { minutes = '0' + minutes; }
  1769. if (seconds < '10') { seconds = '0' + seconds; }
  1770. if (Number(days) > 0 ){
  1771. hours = Number(hours) + (Number(days) * 24);
  1772. }
  1773. $('#d-hours').html(hours);
  1774. $('#d-minutes').html(minutes);
  1775. $('#d-seconds').html(seconds);
  1776. }
  1777. setInterval(function() { promotionTimer(); }, 1000);
  1778. }
  1779. //상품상세정보 더보기
  1780. $(document).on('click','.pd_descrp .btn_more_box button',function(e){
  1781. $('.pd_descrp .cont_body').toggleClass('on');
  1782. $(this).toggleClass('active');
  1783. $(this).parent('.btn_more_box').toggleClass('covered');
  1784. var descrpToggle = $(this).find('span');
  1785. $(descrpToggle).text($(descrpToggle).text() == '상세정보 더보기' ? '상세정보 접기' : '상세정보 더보기');
  1786. return false;
  1787. });
  1788. //슬라이드 - 함께하면 할인되는 다다익선 상품
  1789. var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
  1790. slidesPerView: 3,
  1791. spaceBetween: 8,
  1792. });
  1793. //슬라이드 - 베스트리뷰
  1794. var riviewSwiper = new Swiper('.riview_box .area_slider .swiper-container', {
  1795. observer: true,
  1796. observeParents: true,
  1797. slidesPerView: 1,
  1798. spaceBetween: 8,
  1799. loop: true,
  1800. pagination: {
  1801. el: '.swiper-pagination',
  1802. type: 'fraction',
  1803. },
  1804. });
  1805. //슬라이드 - 제품사진
  1806. var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  1807. slidesPerView:1,
  1808. pagination: {
  1809. el: '.swiper-pagination',
  1810. type: 'fraction',
  1811. },
  1812. });
  1813. //슬라이드 - STYLE24의 스타일링 추천
  1814. var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
  1815. slidesPerView: 1,
  1816. spaceBetween: 0,
  1817. pagination: {
  1818. el: '.swiper-pagination',
  1819. type: 'fraction',
  1820. },
  1821. });
  1822. var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
  1823. observer: true,
  1824. observeParents: true,
  1825. slidesPerView: 3,
  1826. spaceBetween: 8,
  1827. });
  1828. $(".pic_list > div").hide();
  1829. $(".pic_list > div").eq(0).fadeIn();
  1830. rcmdPicimgSwiper.on('slideChange', function () {
  1831. var pic_index=this.activeIndex;
  1832. $(".pic_list > div").hide();
  1833. $(".pic_list > div").eq(pic_index).fadeIn();
  1834. });
  1835. //슬라이드 - 베스트리뷰팝업
  1836. var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
  1837. observer: true,
  1838. observeParents: true,
  1839. slidesPerView: 1,
  1840. pagination: {
  1841. el: '.swiper-pagination',
  1842. type: 'fraction',
  1843. },
  1844. });
  1845. //슬라이드 - 포토,영상리뷰팝업
  1846. var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
  1847. observer: true,
  1848. observeParents: true,
  1849. slidesPerView: 1,
  1850. pagination: {
  1851. el: '.swiper-pagination',
  1852. type: 'fraction',
  1853. },
  1854. });
  1855. $(document).on('click','.pd_detail .thumb_box',function(e){
  1856. $('#pdItemThumbPop').css("display", "block");
  1857. return false;
  1858. })
  1859. $(document).on('click','.pd_bestreviewdetail_pop .thumblist ul li',function(e){
  1860. $(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
  1861. $(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
  1862. $(this).find(".pic").addClass('active');
  1863. var thumbIndex = $(this).index();
  1864. var thumbImg = $(this).find('.pic .thumb').attr('style');
  1865. var thumbImgSrc = thumbImg.split("background-image:url(")[1];
  1866. thumbImgHtml = "<img src="+ thumbImgSrc +" alt=''>";
  1867. $(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbImgHtml);
  1868. return false;
  1869. });
  1870. // 포토,베스트리뷰숨김
  1871. var review_open=$(".btn_review_open");
  1872. $(document).on('click','.btn_review_open',function(e){
  1873. $(this).toggleClass('active');
  1874. $(this).next(".review_list").toggleClass('active');
  1875. return false;
  1876. });
  1877. //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
  1878. $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
  1879. $(".Purchase_pop .pop_option_select").show();
  1880. //$(".Purchase_pop .pop_option_select").find('.select_custom.item_opt1.item_opt1_1').addClass('on');
  1881. //$(".Purchase_pop .pop_option_select").find('.select_custom.item_opt1.item_opt1_1 .list').css('display','block');
  1882. return false;
  1883. });
  1884. $(document).on('click','.Purchase_pop .close',function(e){
  1885. $(".Purchase_pop .pop_option_select").hide();
  1886. return false;
  1887. });
  1888. //관심상품 등록
  1889. $(document).on('click','.pd .itemLike',function(e){
  1890. $(this).toggleClass('active');
  1891. return false;
  1892. });
  1893. fnOptionSoldout();
  1894. // 광고 스크립트용
  1895. var goodsNavigation = [[${goodsNavigation}]];
  1896. var cate1Nm = "";
  1897. var cate2Nm = "";
  1898. var cate3Nm = "";
  1899. var cate4Nm = "";
  1900. var cate5Nm = "";
  1901. if (!gagajf.isNull(goodsNavigation)) {
  1902. cate1Nm = goodsNavigation.cate1Nm;
  1903. cate2Nm = goodsNavigation.cate2Nm;
  1904. cate3Nm = goodsNavigation.cate3Nm;
  1905. cate4Nm = goodsNavigation.cate4Nm;
  1906. cate5Nm = goodsNavigation.cate3Nm;
  1907. if (!gagajf.isNull(cate1Nm)) {
  1908. cateNm += cate1Nm;
  1909. }
  1910. if (!gagajf.isNull(cate2Nm)) {
  1911. cateNm += ' > ' + cate2Nm;
  1912. }
  1913. if (!gagajf.isNull(cate3Nm)) {
  1914. cateNm += ' > ' + cate3Nm;
  1915. }
  1916. if (!gagajf.isNull(cate4Nm)) {
  1917. cateNm += ' > ' + cate4Nm;
  1918. }
  1919. if (!gagajf.isNull(cate5Nm)) {
  1920. cateNm += ' > ' + cate5Nm;
  1921. }
  1922. }
  1923. // 광고 스크립트용
  1924. var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
  1925. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
  1926. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  1927. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  1928. $("meta[property='og:url']").attr('content', snsUrl);
  1929. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  1930. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  1931. $("meta[property='og:image']").attr('content', snsGoodsImg);
  1932. <!-- 트위터 관련 메타태그 -->
  1933. $("meta[name='twitter:url']").attr('content', snsUrl);
  1934. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  1935. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  1936. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  1937. // 추천솔류션 meta 설정
  1938. $("meta[property='eg:type']").attr('content',"product");
  1939. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  1940. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  1941. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  1942. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  1943. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  1944. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  1945. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  1946. $("meta[property='eg:category1']").attr('content',cate1Nm);
  1947. $("meta[property='eg:category2']").attr('content',cate2Nm);
  1948. $("meta[property='eg:category3']").attr('content',cate3Nm);
  1949. $("meta[property='eg:category4']").attr('content',cate4Nm);
  1950. $("meta[property='eg:category5']").attr('content',cate5Nm);
  1951. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  1952. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  1953. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1954. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1955. $("meta[property='eg:stock']").attr('content',"");
  1956. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
  1957. $("meta[property='eg:description']").attr('content',null);
  1958. $("meta[property='eg:extraImage']").attr('content',null);
  1959. $("meta[property='eg:locale']").attr('content',"KR");
  1960. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  1961. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  1962. // ep 쿠폰확인
  1963. fnEpCouponDown([[${afLinkCd}]], [[${params.goodsCd}]], 1);
  1964. $('.Purchase_pop .btPop_close').click(function(){
  1965. $('html, body').css({'overflow': 'visible', 'height': '100%'});
  1966. $('.container').removeClass('btPop_open');
  1967. autome.style.top = 100 + "%";
  1968. return false;
  1969. });
  1970. });
  1971. // 상품상세 asis html 이지미 경로 수정
  1972. window.onload = function(){
  1973. $(".pd_descrp .cont_body").find('img').each(function() {
  1974. let tmpImgSrc = $(this).attr('src');
  1975. if (tmpImgSrc.indexOf('Upload') == 1 ){ // /Upload
  1976. $(this).attr('src' , tmpImgSrc.replace('/Upload', _imgUrl+"/Local"));
  1977. }
  1978. });
  1979. /*
  1980. let goodsVideoList = [[${goodsVideoList}]];
  1981. let videoFlag = false;
  1982. if (goodsVideoList != null){
  1983. $.each(goodsVideoList, function(idx, goodsVideo) {
  1984. if ("M" == goodsVideo.videoGb){
  1985. videoFlag = true;
  1986. return false;
  1987. }
  1988. });
  1989. }
  1990. if (videoFlag){
  1991. try {
  1992. var controller = new VgControllerClient({
  1993. target_window: document.getElementById('child').contentWindow
  1994. });
  1995. //console.log(controller.get_screen());
  1996. //controller.enable_fullscreen_button(true);
  1997. // 여기서부터 이벤트 리스너를 등록하거나, 웹페이지 Element에 메소드를 bind하면 됩니다.
  1998. } catch(e) {
  1999. // Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
  2000. // 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
  2001. // 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
  2002. }
  2003. controller.mute();
  2004. controller.play();
  2005. controller.set_control_visibility(false);
  2006. } */
  2007. /* $(window).scroll(function(){
  2008. var scrollTop= $(window).scrollTop();
  2009. var itemTop=$('.descript_box').offset().top;
  2010. var winHeight = $(window).height();
  2011. console.log(winHeight-scrollTop);
  2012. console.log(winHeight/1.5);
  2013. if (winHeight-scrollTop <= winHeight/1.5){
  2014. controller.pause();
  2015. } else {
  2016. controller.play();
  2017. controller.set_control_visibility(false);
  2018. }
  2019. controller.on('done', function() {
  2020. controller.play();
  2021. controller.set_control_visibility(false);
  2022. });
  2023. }); */
  2024. $(document).on('click','.pop_open_btn',function(){
  2025. $('.modal.photo_comment_popup .pop_detail').toggleClass('active');
  2026. });
  2027. };
  2028. /*]]>*/
  2029. </script>
  2030. <!-- 광고 스크립트 -->
  2031. <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
  2032. <!-- //광고 스크립트 -->
  2033. </th:block>
  2034. </body>
  2035. </html>