GoodsDetailFormMob.html 71 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768
  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. <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')}">
  22. <!-- ★ 컨텐츠 시작 -->
  23. <form name="cartForm" id="cartForm" method="post">
  24. <input type="hidden" name="mode">
  25. <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
  26. <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
  27. <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
  28. <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
  29. <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
  30. <input type="hidden" name="optCd" />
  31. <input type="hidden" name="optCd1" />
  32. <input type="hidden" name="optCd2" />
  33. <input type="hidden" name="addPrice" />
  34. <input type="hidden" name="ordQty" />
  35. <input type="hidden" name="stock" />
  36. <input type="hidden" name="minOrdQty"/>
  37. <input type="hidden" name="maxOrdQty"/>
  38. <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
  39. <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
  40. <section class="pd_detail">
  41. <div class="inner wide">
  42. <!-- 제품사진영역 -->
  43. <div class="thumb_box" th:if="${goodsImgList != null and !goodsImgList.empty}">
  44. <div class="area_slider">
  45. <div class="swiper-container thumb_list">
  46. <div class="swiper-wrapper">
  47. <!-- <div class="swiper-slide"><div class="thumb mov"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div> -->
  48. <th:block th:each="goodsImg, status : ${goodsImgList}">
  49. <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
  50. or #strings.contains(goodsImg.sysImgNm,'_L1.')
  51. or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
  52. <div class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div>
  53. </th:block>
  54. </div>
  55. <!-- Add Pagination -->
  56. <div class="swiper-pagination"></div>
  57. </div>
  58. </div>
  59. </div>
  60. <!-- //제품사진영역 -->
  61. </div>
  62. <div class="inner">
  63. <div class="timer_box" style="display:none;">
  64. <p>
  65. <span class="tt">남은시간</span>
  66. <span class="timer">
  67. <em id="d-days">0</em>
  68. <em id="d-hours">0</em>
  69. <em id="d-minutes">0</em>
  70. <em id="d-seconds">0</em>
  71. </span>
  72. </p>
  73. </div>
  74. <div class="descript_box">
  75. <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
  76. <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
  77. <p class="price_blk">
  78. <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
  79. <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>
  80. <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
  81. </p>
  82. <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
  83. <div class="btn_group_flex">
  84. <div><button class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
  89. <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
  90. </div>
  91. <div class="inner">
  92. <div class="option_box">
  93. <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
  94. <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
  95. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  96. <div class="opt_header">
  97. <span class="title">컬러</span>
  98. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  99. </div>
  100. <ul>
  101. <li th:each="goodsOption1, status : ${goodsOption1List}">
  102. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
  103. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm}" alt="">
  104. </a>
  105. </li>
  106. </ul>
  107. </div>
  108. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}" >
  109. <div class="opt_header">
  110. <span class="title">사이즈</span>
  111. </div>
  112. <div class="form_field2">
  113. <div class="lap">
  114. <div th:each="goodsOption2, status : ${goodsOption2List}">
  115. <label>
  116. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  117. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
  118. th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
  119. <span th:text="${goodsOption2.optCd2}" >100</span>
  120. </label>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </th:block>
  126. </th:block>
  127. <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>
  128. </div>
  129. </div>
  130. <div class="inner">
  131. <div class="benefit_box" th:if="${(cardInfoList != null and !cardInfoList.empty) or
  132. (goodsCouponList != null and !goodsCouponList.empty)
  133. }" >
  134. <dl class="bnf_shopping" th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  135. <dt>쇼핑혜택</dt>
  136. <dd>
  137. <span th:if="${goodsCouponList != null and !goodsCouponList.empty}">
  138. <th:block th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">
  139. 최대 <em>
  140. <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
  141. <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
  142. </em> 쿠폰 할인
  143. </th:block>
  144. </span>
  145. <span><em>99개</em> 이상 구매 시 <em>9,999,999원</em> 할인</span>
  146. <span>미니언즈 우산 증정</span>
  147. <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
  148. </dd>
  149. </dl>
  150. <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
  151. <dt>카드혜택</dt>
  152. <dd>
  153. <th:block th:each="cardInfo, status : ${cardInfoList}">
  154. <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>
  155. <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
  156. <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
  157. </th:block>
  158. <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
  159. </dd>
  160. </dl>
  161. </div>
  162. </div>
  163. <div class="inner tmtb">
  164. <div class="pd_together" id="goodsTmtbArea">
  165. </div>
  166. </div>
  167. <div class="inner wide">
  168. <div class="brand_home">
  169. <a href="javascript:void(0);" class="link_go" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" th:text="|${goodsInfo.brandGroupNm} 브랜드홈|" >NBA 브랜드홈</a>
  170. </div>
  171. </div>
  172. <div class="inner">
  173. <div class="content pd_descrp">
  174. <div class="cont_head">
  175. <h3 class="sr-only">상품상세정보</h3>
  176. </div>
  177. <div class="cont_body">
  178. <!-- 상품설명 노출 -->
  179. <div class="descrp_box">
  180. <div class="desc_simple"> <!-- 상품 간략설명-->
  181. <span class="tit_desc" th:if="${goodsInfo.goodsTitle != null and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
  182. <p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
  183. 슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다.
  184. </p>
  185. </div>
  186. <div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
  187. <span class="tit_desc">상품특징</span>
  188. <p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
  189. - 지퍼플러 장식을 더해 완성도를 높여줌
  190. </p>
  191. </div>
  192. </div>
  193. <!-- //상품설명 노출 -->
  194. <!-- 관리자 에디터입력 내용 노출 -->
  195. <th:block th:if="${goodsNoticeList != null and !goodsNoticeList.empty}" >
  196. <div class="mdhtml_box" th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></div>
  197. </th:block>
  198. <!-- //관리자 에디터입력 내용 노출 -->
  199. <!-- 관리자 에디터입력 내용 노출 상단 html -->
  200. <div class="mdhtml_box" th:if="${goodsInfo.goodsTopDesc != null and !goodsInfo.goodsTopDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></div>
  201. <!-- 착용컷 노출 -->
  202. <div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_M1.')
  203. or #strings.contains(goodsImgList,'_M2.')
  204. or #strings.contains(goodsImgList,'_M3.')
  205. or #strings.contains(goodsImgList,'_M4.')
  206. or #strings.contains(goodsImgList,'_M5.')}">
  207. <span class="tit_view">OUTFIT VIEW</span>
  208. <span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
  209. <div class="view">
  210. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_M1.')
  211. or #strings.contains(goodsImg.sysImgNm,'_M2.')
  212. or #strings.contains(goodsImg.sysImgNm,'_M3.')
  213. or #strings.contains(goodsImg.sysImgNm,'_M4.')
  214. or #strings.contains(goodsImg.sysImgNm,'_M5.')}">
  215. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  216. </th:block>
  217. </div>
  218. </div>
  219. <!-- //착용컷 노출 -->
  220. <!-- 상품컷 노출 -->
  221. <div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01.')
  222. or #strings.contains(goodsImgList,'_02.')
  223. or #strings.contains(goodsImgList,'_D1.')
  224. or #strings.contains(goodsImgList,'_D2.')
  225. or #strings.contains(goodsImgList,'_D3.')
  226. or #strings.contains(goodsImgList,'_D4.')
  227. or #strings.contains(goodsImgList,'_D5.')}">
  228. <span class="tit_view">PRODUCT VIEW</span>
  229. <div class="view">
  230. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01.')
  231. or #strings.contains(goodsImg.sysImgNm,'_02.')
  232. or #strings.contains(goodsImg.sysImgNm,'_D1.')
  233. or #strings.contains(goodsImg.sysImgNm,'_D2.')
  234. or #strings.contains(goodsImg.sysImgNm,'_D3.')
  235. or #strings.contains(goodsImg.sysImgNm,'_D4.')
  236. or #strings.contains(goodsImg.sysImgNm,'_D5.')}">
  237. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  238. </th:block>
  239. </div>
  240. </div>
  241. <!-- //상품컷 노출 -->
  242. <!-- 원단 노출 -->
  243. <div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_S1.')}">
  244. <span class="tit_view">FABRIC</span>
  245. <div class="view">
  246. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_S1.')}">
  247. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  248. </th:block>
  249. </div>
  250. </div>
  251. <!-- //원단 노출 -->
  252. <!-- 라벨 노출 -->
  253. <div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1.')
  254. or #strings.contains(goodsImgList,'_L2.')}">
  255. <span class="tit_view">LABEL INFO</span>
  256. <div class="view">
  257. <span>
  258. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1.')
  259. or #strings.contains(goodsImg.sysImgNm,'_L2.')}">
  260. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  261. </th:block>
  262. </span>
  263. </div>
  264. </div>
  265. <!-- //라벨 노출 -->
  266. <div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01.')}">
  267. <div class="view">
  268. <th:block th:each="goodsImg, status : ${goodsImgList}" >
  269. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  270. </th:block>
  271. </div>
  272. </div>
  273. <th:block th:if="${goodsInfo.goodsDesc != null and !goodsInfo.goodsDesc.empty}" >
  274. <!-- 상세 html 이 존재하면 -->
  275. <div class="mdhtml_box" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}"></div>
  276. </th:block>
  277. <!-- 관리자 에디터입력 내용 노출 하다단 html -->
  278. <div class="mdhtml_box" th:if="${goodsInfo.goodsDownDesc != null and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
  279. <!-- 상품필수정보 노출 -->
  280. <div class="required_box">
  281. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
  282. <span class="title">상품고시정보</span>
  283. <div class="tbl type1">
  284. <table>
  285. <tbody>
  286. <tr th:each="goodsNoti, status : ${goodsNotiList}" >
  287. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  288. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  289. </tr>
  290. </tbody>
  291. </table>
  292. </div>
  293. </div>
  294. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
  295. <span class="title">상품고시정보</span>
  296. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  297. <div class="tbl type1">
  298. <table>
  299. <tbody>
  300. <tr th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
  301. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  302. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  303. </tr>
  304. </tbody>
  305. </table>
  306. </div>
  307. </th:block>
  308. </div>
  309. <div class="area_kcl" th:if="${goodsSafeNo != null}">
  310. <div>
  311. <i class="ico ico_kcl"></i>
  312. </div>
  313. <div>
  314. <p class="tit normal" th:text="${goodsSafeNo.certDiv}">
  315. </p>
  316. <p class="normal">
  317. <th:block th:if="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
  318. 해당 없음
  319. </th:block>
  320. <th:block th:unless="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
  321. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.isCertNum}">CB123A123-1234</a>
  322. </th:block>
  323. </p>
  324. </div>
  325. </div>
  326. <p class="t_info dot_info mt10" th:if="${goodsSafeNo != null}">
  327. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  328. </p>
  329. <div class="area_infotbl">
  330. <span class="title">상품기본정보</span>
  331. <div class="tbl type1">
  332. <table>
  333. <tbody>
  334. <tr>
  335. <th>상품코드</th>
  336. <td th:text="${goodsInfo.goodsCd}">14443216</td>
  337. </tr>
  338. <tr>
  339. <th>상품구분</th>
  340. <td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
  341. </tr>
  342. <tr>
  343. <th>브랜드</th>
  344. <td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
  345. </tr>
  346. <tr>
  347. <th>상품명</th>
  348. <td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  349. </tr>
  350. <tr>
  351. <th>제조자</th>
  352. <td>한세엠케이(주)==============>노출필요성 확인</td>
  353. </tr>
  354. <tr>
  355. <th>제조국</th>
  356. <td th:text="${goodsInfo.originNm}">베트남</td>
  357. </tr>
  358. </tbody>
  359. </table>
  360. </div>
  361. <p class="t_info dot_info mt10">
  362. 주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
  363. </p>
  364. </div>
  365. </div>
  366. <!-- //상품필수정보 노출 -->
  367. </div>
  368. <div class="btn_more_box covered">
  369. <div class="btn_group_flex">
  370. <div>
  371. <button type="button" class="btn btn_default">
  372. <span>상세정보 더보기</span>
  373. </button>
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. <div class="inner">
  380. <!-- 리뷰영역 -->
  381. <div class="riview_box">
  382. <div class="ex_review">
  383. <a href="javascript:void(0);" id="btn_pdReview_pop" th:onclick="cfGoodsReview([[${goodsInfo.goodsCd}]])">
  384. <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>
  385. <div class="star_score" th:if="${goodsInfo.reviewRegCnt > 0 }">
  386. <span class="star" th:with="starScore=${#numbers.formatDecimal((goodsInfo.score*100/5), 0,0)}">
  387. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  388. </span>
  389. <span class="score" th:text="|${goodsInfo.score}점|">4.3점</span>
  390. </div>
  391. </a>
  392. </div>
  393. <div class="area_slider" id="btn_pdBestReview_pop" th:if="${bestReviewList != null and !bestReviewList.empty}">
  394. <div class="swiper-container">
  395. <div class="swiper-wrapper">
  396. <div class="swiper-slide" th:each="bestReview, status : ${bestReviewList}" >
  397. <!-- 베스트 리뷰 등록시 노출 -->
  398. <div class="best_review">
  399. <a href="javascript:void(0);" th:onclick="cfGoodsReviewDetail([[${goodsInfo.goodsCd}]],'Y', '',[[${bestReview.reviewSq}]])">
  400. <div class="star_score" th:with="starScore=${#numbers.formatDecimal((bestReview.score*100/5), 0,0)}">
  401. <span class="star">
  402. <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
  403. </span>
  404. <em class="ico ico_besttag"></em>
  405. </div>
  406. <div class="lap">
  407. <div class="pic" th:if="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
  408. <th:block th:each="reviewAttach, attachStatus : ${bestReview.reviewAttachList}" th:if="${attachStatus.first}">
  409. <span class="thumb " th:classAppend="${(reviewAttach.fileGb == 'M') ? 'mov' :''}" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
  410. </th:block>
  411. </div>
  412. <div class="txt_best_review">
  413. <p th:text="${bestReview.reviewContent}">옷</p>
  414. </div>
  415. </div>
  416. </a>
  417. </div>
  418. <!-- //베스트 리뷰 등록시 노출 -->
  419. </div>
  420. </div>
  421. <!-- Add Pagination -->
  422. <div class="swiper-pagination"></div>
  423. </div>
  424. </div>
  425. </div>
  426. <!-- //리뷰영역 -->
  427. <!-- 문의,사이즈정보,배송/교환/반품 -->
  428. <div class="exinfo_box">
  429. <ul>
  430. <li>
  431. <div class="ex_qna">
  432. <a href="javascript:void(0);" id="btn_pdQnaList_pop" th:onclick="cfGoodsQng([[${goodsInfo.goodsCd}]])">
  433. <span class="tit">문의<em class="number">(<th:block th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsQnaCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></span>
  434. </a>
  435. </div>
  436. </li>
  437. <li>
  438. <div class="ex_size">
  439. <a href="javascript:void(0)" id="btn_pdSizeInfo_pop" th:onclick="cfGoodsSizeInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.colorCd}]] )">
  440. <span class="tit">사이즈</span>
  441. </a>
  442. </div>
  443. </li>
  444. <li>
  445. <div class="ex_shipping">
  446. <a href="javascript:void(0)" id="btn_pdDelivery_Pop" th:onclick="cfGoodsDelivery([[${goodsInfo.goodsCd}]])">
  447. <span class="tit">배송/교환/반품</span>
  448. </a>
  449. <!-- 해당 배송정보 선택노출 -->
  450. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee > 0}">배송비 <th:block th:text="${#numbers.formatInteger(goodsInfo.delvFee, 0,'COMMA')}" ></th:block>원
  451. <th:block th:if="${goodsInfo.minOrdAmt > 0}">(<th:block th:text="${#numbers.formatInteger(goodsInfo.minOrdAmt, 0,'COMMA')}" ></th:block>원 이상 무료배송)</th:block>
  452. </span>
  453. <span class="txt_shippingfee" th:if="${goodsInfo.delvFee <= 0}">무료배송</span>
  454. <span class="txt_shippingfee" th:if="${goodsInfo.quikDelvYn = 'Y'}">총알배송(오전 10시까지 주문 시)</span>
  455. <!-- //해당 배송정보 선택노출 -->
  456. </div>
  457. </li>
  458. </ul>
  459. </div>
  460. <!-- //문의,사이즈정보,배송/교환/반품 -->
  461. </div>
  462. <div class="inner">
  463. <div class="recommendedArea">
  464. <!-- 이상품과 함께 본 상품영역-->
  465. <div class="pd_clickother" id="goodsTogetherbArea">
  466. </div>
  467. <!-- //이상품과 함께 본 상품영역-->
  468. <!-- STYLE24의 스타일링 추천 -->
  469. <div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}">
  470. <h3 class="tit">STYLE24의 스타일링 추천</h3>
  471. <!-- 상품이미지pic -->
  472. <div class="area_slider pic_img" >
  473. <div class="swiper-container">
  474. <div class="swiper-wrapper">
  475. <div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
  476. <div class="page">
  477. <div class="pic">
  478. <span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
  479. <!-- 상품피커 -->
  480. <th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
  481. th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
  482. <div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
  483. <div>
  484. <button type="button"><span class="ico ico_picker"></span></button>
  485. <div class="pick_descr">
  486. <a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
  487. </div>
  488. </div>
  489. </div>
  490. <!-- //상품피커 -->
  491. </th:block>
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. <!-- Add Pagination -->
  497. <div class="swiper-pagination"></div>
  498. </div>
  499. </div>
  500. <!-- //상품이미지pic -->
  501. <!-- 상품이미지pic 리스트 -->
  502. <div class="area_slider pic_list" th:with="ithrCd=aa , contentsLoc=bb ">
  503. <div class="box" th:each="lookbook, status : ${lookbookList}">
  504. <div class="swiper-container" th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
  505. <div class="swiper-wrapper">
  506. <div class="swiper-slide" th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}" >
  507. <div class="item_prod" th:classappend="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}? 'unable' : ''"
  508. th:attr="goodsCd=${lookbookGoods.goodsCd}, optCd=${lookbookGoods.optCd}, minOrdQty=${lookbookGoods.minOrdQty}, goodsType=${lookbookGoods.goodsType}, ithrCd=${ithrCd}, contentsLoc=${contentsLoc}">
  509. <div class="item_state">
  510. <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>
  511. <a href="javascript:void(0)" class="itemLink">
  512. <div class="itemPic">
  513. <img class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+lookbookGoods.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  514. </div>
  515. <p class="itemBrand" th:text="${lookbookGoods.brandGroupNm}">BRAND NAME</p>
  516. <div class="itemName" th:text="${lookbookGoods.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
  517. <p class="itemPrice" th:text="${#numbers.formatInteger(lookbookGoods.currPrice, 0,'COMMA')}">80,100</p>
  518. </a>
  519. </div>
  520. </div>
  521. </div>
  522. </div>
  523. </div>
  524. <div class="btn_group_flex">
  525. <div>
  526. <button type="button" class="btn btn_default" onclick="fnAddCartLookBookGoods(this);"><span>모두 쇼핑백 담기</span></button>
  527. </div>
  528. </div>
  529. </div>
  530. </div>
  531. <!-- //상품이미지pic 리스트 -->
  532. </div>
  533. <!-- //STYLE24의 스타일링 추천 -->
  534. <!-- 동일브랜드 추천상품 -->
  535. <div class="pd_samebrand" id="goodsRecommendbArea">
  536. </div>
  537. <!-- //동일브랜드 추천상품 -->
  538. <!-- 이 상품과 비슷한 상품영역 -->
  539. <div class="pd_relate" id="goodsLikebArea">
  540. </div>
  541. <!-- //이 상품과 비슷한 상품영역 -->
  542. </div>
  543. </div>
  544. <!-- 구매하기팝업 -->
  545. <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
  546. <a class="btn btPop_close">Close </a>
  547. <div class="header btPop_head btPopAuto_head">
  548. 구매하기팝업
  549. </div>
  550. <div class="body btPop_body btPopAuto_body">
  551. <div class="option_result op1">
  552. <!-- 옵션 -->
  553. <div class="option_box">
  554. <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
  555. <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
  556. <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
  557. <div class="opt_header">
  558. <span class="title">컬러</span>
  559. <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
  560. </div>
  561. <ul>
  562. <li th:each="goodsOption1, status : ${goodsOption1List}">
  563. <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
  564. <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm}" alt="">
  565. </a>
  566. </li>
  567. </ul>
  568. </div>
  569. <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
  570. <div class="opt_header">
  571. <span class="title">사이즈</span>
  572. </div>
  573. <div class="form_field2">
  574. <div class="lap">
  575. <div th:each="goodsOption2, status : ${goodsOption2List}">
  576. <label>
  577. <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
  578. th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
  579. th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
  580. <span th:text="${goodsOption2.optCd2}" >100</span>
  581. </label>
  582. </div>
  583. </div>
  584. </div>
  585. </div>
  586. <!-- 해당상품 품절시 노출 -->
  587. <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>
  588. <!-- //해당상품 품절시 노출 -->
  589. <div class="opt_count">
  590. <div class="opt_header">
  591. <span class="title">수량</span>
  592. </div>
  593. <div class="number_count">
  594. <span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
  595. <input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" onblur="fnChangeOrderEa(this)"
  596. th:attr="minOrdQty=${goodsInfo.minOrdQty}, maxOrdQty=${goodsInfo.maxOrdQty}" data-valid-type="numeric">
  597. <input type="hidden" name="coption" value="" th:attr="price=${goodsInfo.currPrice}">
  598. <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
  599. </div>
  600. </div>
  601. </th:block>
  602. </th:block>
  603. <th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!-- 입점상품 -->
  604. <div class="opt_select">
  605. <div class="form_wrap">
  606. <div class="form_field">
  607. <div class="select_custom option_open">
  608. <div class="combo">
  609. <div class="select">옵션을 선택해주세요</div>
  610. </div>
  611. </div>
  612. </div>
  613. </div>
  614. </div>
  615. <div class="opt_result">
  616. </div>
  617. </th:block>
  618. <th:block th:if="${goodsInfo.goodsType =='G056_S' }"> <!-- 세트상품 -->
  619. <div class="opt_select">
  620. <div class="form_wrap">
  621. <div class="form_field">
  622. <div class="select_custom option_open">
  623. <div class="combo">
  624. <div class="select">옵션을 선택해주세요</div>
  625. </div>
  626. </div>
  627. </div>
  628. </div>
  629. </div>
  630. <div class="opt_result">
  631. </div>
  632. </th:block>
  633. </div>
  634. <!-- 네이버결제 -->
  635. <div class="npay_box">
  636. <div class="np_head">
  637. <div><img src="/images/mo/img_npay_txt.png" alt="NAVER 네이버 ID로 간편구매 네이버페이"></div>
  638. <div><button><img src="/images/mo/btn_npay_txt.png" alt="Npay 구매"></button></div>
  639. </div>
  640. <div class="np_body">
  641. <a href="#none"><em>[멥버십]</em>첫달 무료가입하고 추가 4%!</a>
  642. </div>
  643. </div>
  644. </div>
  645. <!-- 옵션선택팝업 -->
  646. <div class="pop_option_select">
  647. <div class="close">닫기</div>
  648. <div class="pp_body">
  649. <div class="pp_cont">
  650. <div class="opt_select">
  651. <div class="opt_header">
  652. <span class="title">옵션선택</span>
  653. <div class="check_excluding form_field">
  654. <div>
  655. <input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y"><label for="excluding"> <span>품절제외</span> </label>
  656. </div>
  657. </div>
  658. </div>
  659. <!-- 일반상품일때 -->
  660. <th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!-- 입점상품 -->
  661. <div class="nomOption">
  662. <div class="form_wrap">
  663. <div class="form_field">
  664. <div class="select_custom item_opt1 item_opt1_1" th:classappend="${goodsInfo.goodsCd}">
  665. <div class="combo">
  666. <div class="select">선택</div>
  667. <ul class="list" style="display: none;">
  668. <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li>
  669. <th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
  670. <li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],1,[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]], [[${goodsInfo.currPrice}]])"
  671. th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}">
  672. <div th:text="${goodsOption.optCd1}">상품옵션</div>
  673. <div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
  674. <input type="hidden" name="opt1" th:value="${goodsOption.goodsCd}" th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsOption.selfGoodsYn}"/>
  675. </li>
  676. </th:block>
  677. </ul>
  678. </div>
  679. </div>
  680. </div>
  681. <div class="form_field">
  682. <div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}" disabled>
  683. <div class="combo">
  684. <div class="select">선택</div>
  685. <ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
  686. <!-- 옵션2 -->
  687. </ul>
  688. </div>
  689. </div>
  690. </div>
  691. </div>
  692. </div>
  693. </th:block>
  694. <!-- //일반상품일때 -->
  695. <!-- 셋트상품일때 -->
  696. <th:block th:if="${goodsInfo.goodsType =='G056_S' }"> <!-- 세트상품 -->
  697. <div class="setOption">
  698. <div class="form_wrap">
  699. <div class="form_field">
  700. <p class="title">슬림핏 마이크로 체크 네이비컬러 셋업수트 자켓</p>
  701. <div class="select_custom item_opt1">
  702. <div class="combo">
  703. <div class="select">상품옵션01</div>
  704. <ul class="list" style="display: none;">
  705. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  706. <li class="">선택</li>
  707. <li class="selected">상품옵션01</li>
  708. <li>상품옵션02</li>
  709. <li>상품옵션03</li>
  710. <li aria-disabled="true">상품옵션05</li>
  711. <li>상품옵션06</li>
  712. <li aria-disabled="true" data-soldout="true">상품옵션07</li>
  713. </ul>
  714. </div>
  715. </div>
  716. </div>
  717. <div class="form_field">
  718. <div class="select_custom item_opt2" disabled>
  719. <div class="combo">
  720. <div class="select">상품옵션12</div>
  721. <ul class="list" style="display: none;">
  722. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  723. <li class="">선택</li>
  724. <li class="">상품옵션11</li>
  725. <li class="selected">상품옵션12</li>
  726. <li>상품옵션13</li>
  727. <li aria-disabled="true">상품옵션15</li>
  728. <li>상품옵션16</li>
  729. <li aria-disabled="true" data-soldout="true">상품옵션17</li>
  730. </ul>
  731. </div>
  732. </div>
  733. </div>
  734. </div>
  735. <div class="form_wrap">
  736. <div class="form_field">
  737. <p class="title">슬림핏 마이크로 체크 네이비컬러 셋업수트 바지</p>
  738. <div class="select_custom item_opt1">
  739. <div class="combo">
  740. <div class="select">상품옵션01</div>
  741. <ul class="list" style="display: none;">
  742. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  743. <li class="">선택</li>
  744. <li class="selected">상품옵션01</li>
  745. <li>상품옵션02</li>
  746. <li>상품옵션03</li>
  747. <li aria-disabled="true">상품옵션05</li>
  748. <li>상품옵션06</li>
  749. <li aria-disabled="true" data-soldout="true">상품옵션07</li>
  750. </ul>
  751. </div>
  752. </div>
  753. </div>
  754. <div class="form_field">
  755. <div class="select_custom item_opt2" disabled>
  756. <div class="combo">
  757. <div class="select">상품옵션12</div>
  758. <ul class="list" style="display: none;">
  759. <!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가 -->
  760. <li class="">선택</li>
  761. <li class="">상품옵션11</li>
  762. <li class="selected">상품옵션12</li>
  763. <li>상품옵션13</li>
  764. <li aria-disabled="true">상품옵션15</li>
  765. <li>상품옵션16</li>
  766. <li aria-disabled="true" data-soldout="true">상품옵션17</li>
  767. </ul>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772. </div>
  773. </th:block>
  774. <!-- //셋트상품일때 -->
  775. <div class="text_excluding">99개의 품절옵션이 제외되었습니다.</div>
  776. </div>
  777. </div>
  778. </div>
  779. </div>
  780. <!-- //옵션선택팝업 -->
  781. </div>
  782. <div class="body btPop_foot btPopAuto_foot">
  783. <!-- 총 결재금액, 하단버튼 -->
  784. <div class="pay_box">
  785. <div class="price_box">
  786. <p class="number">
  787. 총&nbsp;<span id="goodsTotalQty">0</span>개
  788. </p>
  789. <p class="price">
  790. <span>
  791. <b id="goodsTotalPrice">0</b><em>원</em>
  792. </span>
  793. </p>
  794. </div>
  795. <div class="btn_box">
  796. <button class="gift">
  797. <span><span>선물해보세요!</span></span>
  798. </button>
  799. <th:block th:if="${goodsInfo.stockQty > 0}">
  800. <button type="button" class="cart" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
  801. <button type="button" class="buyNow" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
  802. </th:block>
  803. </div>
  804. </div>
  805. </div>
  806. </div>
  807. <!-- 구매하기팝업 -->
  808. </section>
  809. <!-- ★ 컨텐츠 종료 -->
  810. </form>
  811. <!-- 바닥메뉴 -->
  812. <div class="product_floormenu"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
  813. <div class="share_like">
  814. <button type="button" class="share">공유하기</button>
  815. <!-- <th:block th:include="~{web/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block> -->
  816. <button type="button" class="like" th:classappend="${goodsInfo.wishYn == 'Y'}? 'active' : ''"
  817. onclick="cfnPutWishList(this);"
  818. th:attr="goodsCd=${params.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">위시리스트</button>
  819. </div>
  820. <div class="prd_buy">
  821. <th:block th:if="${goodsInfo.stockQty > 0}">
  822. <button type="button" class="buying btPop_auto">구매하기</button>
  823. </th:block>
  824. <th:block th:unless="${goodsInfo.stockQty > 0}">
  825. <button type="button" class="cantbuying">SOLD OUT</button>
  826. </th:block>
  827. </div>
  828. </div>
  829. <!-- //바닥메뉴 -->
  830. </main>
  831. <script th:inline="javascript">
  832. /*<![CDATA[*/
  833. var cateNm = "";
  834. // 다다익선 상품
  835. var fnGoodsTmtbSearch = function(params) {
  836. gagajf.ajaxSubmit("/goods/detail/tmtb/frame", "html", "goodsTmtbArea", params);
  837. }
  838. // 함께본 상품
  839. var fnGoodsTogetherSearch = function(params) {
  840. gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);
  841. }
  842. // 추천 상품
  843. var fnGoodsRecommendSearch = function(params) {
  844. gagajf.ajaxSubmit("/goods/detail/recommend/frame", "html", "goodsRecommendbArea", params);
  845. }
  846. // 비슷한 상품
  847. var fnGoodsLikeSearch = function(params) {
  848. gagajf.ajaxSubmit("/goods/detail/like/frame", "html", "goodsLikebArea", params);
  849. }
  850. // 품절처리
  851. var fnOptionSoldout = function(){
  852. let $target=$("#cartForm").find('.form_field2');
  853. let soldout = false;
  854. for(var i=0;i<$target.find('input[name="opt"]').length;i++){
  855. if($target.find('input[name="opt"]').eq(i).attr('disabled')) {
  856. soldout = true;
  857. }
  858. }
  859. let goodsType = [[${goodsInfo.goodsType}]];
  860. if (soldout && goodsType == 'G056_N'&& $("#cartForm input[name=selfGoodsYn]").val() == 'Y') {
  861. $(".info_restock").show();
  862. }
  863. }
  864. //사이즈 클릭시 - 자사 단품
  865. var fnViewStock = function(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
  866. let $obj = $(obj);
  867. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  868. let $target = null;
  869. if (selfGoodsYn == "Y"){
  870. $target = $obj;
  871. $target.prop("checked",true);
  872. $("#selectOptCd1").html(optCd2);
  873. }else{
  874. $target = $obj.find('input[name="opt2"]');
  875. }
  876. let addPrice = $target.attr("addPrice");
  877. $("#selectOptCd1addPrice").html('');
  878. if (Number(addPrice) > 0) $("#selectOptCd1addPrice").html("(+" + addPrice.addComma() + ")");
  879. $("#cartForm input[name=optCd]").val(optCd);
  880. $("#cartForm input[name=optCd1]").val(optCd1);
  881. $("#cartForm input[name=optCd2]").val(optCd2);
  882. $("#cartForm input[name=addPrice]").val(addPrice);
  883. $("#cartForm input[name=ordQty]").val("");
  884. let maxCnt = maxOrdQty;
  885. let params = new Object();
  886. params.goodsCd = goodsCd;
  887. params.optCd = optCd;
  888. params.optCd1 = optCd1;
  889. params.optCd2 = optCd2;
  890. params.selfGoodsYn = selfGoodsYn;
  891. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  892. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  893. if (maxCnt > itemCnt) {
  894. maxCnt = itemCnt;
  895. }
  896. if (minOrdQty > itemCnt) {
  897. $target.prop("disabled", true);
  898. }else{
  899. $("#cartForm input[name=ordQty]").val(minOrdQty);
  900. $("#cartForm input[name=maxOrdQty]").val(maxCnt);
  901. $("#cartForm input[name=minOrdQty]").val(minOrdQty);
  902. $("#cartForm input[name=cea]").val(minOrdQty);
  903. $("#cartForm input[name=cea]").attr("readonly",false);
  904. $("#cartForm input[name=stock]").val(itemCnt);
  905. fnSetTotalPrice();
  906. $("#cartForm input[name=opt]").each(function(){
  907. if ($(this).attr('id') == optCd){
  908. // $(this).prop('checked', true);
  909. }
  910. });
  911. }
  912. }, "text");
  913. }
  914. //사이즈 클릭시 - 입점단품
  915. var fnViewStockSelfNo = function(obj) {
  916. let $obj = $(obj);
  917. let $target = $obj.find('input[name="opt2"]');
  918. let goodsCd = $target.attr("goodsCd");
  919. let currPrice = $target.attr("currPrice");
  920. let optCd = $target.attr("optCd");
  921. let optCd1 = $target.attr("optCd1");
  922. let optCd2 = $target.attr("optCd2");
  923. let minOrdQty = $target.attr("minOrdQty");
  924. let maxOrdQty = $target.attr("maxOrdQty");
  925. let addPrice = $target.attr("addPrice");
  926. let selfGoodsYn = $target.attr("selfGoodsYn");
  927. let optQty = minOrdQty;
  928. let maxCnt = maxOrdQty;
  929. let params = new Object();
  930. params.goodsCd = goodsCd;
  931. params.optCd = optCd;
  932. params.optCd1 = optCd1;
  933. params.optCd2 = optCd2;
  934. params.selfGoodsYn = selfGoodsYn;
  935. // 중복선택 확인 opt_result
  936. var overlap = 0;
  937. $('.pd_detail .opt_result .number_count').each(function() {
  938. if ($('input[name="coption"]', this).val() == optCd) {
  939. ++overlap;
  940. }
  941. });
  942. if (overlap > 0) {
  943. mcxDialog.alert("이미 선택하신 옵션입니다.");
  944. return false;
  945. }
  946. $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
  947. let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  948. if (maxCnt > itemCnt) {
  949. maxCnt = itemCnt;
  950. }
  951. if (minOrdQty > itemCnt) {
  952. //alert("무슨작업을 해야할가요?");
  953. return false; //무슨작업을 해야하나?
  954. }
  955. //상품정보
  956. let $selObj = $('.pd_descrp_pop .form_field .select_custom.deal_opt_item');
  957. //let $goodsObj =$selObj.find('.combo .select').find('input[name=selectGoods]');
  958. //let goodsNm = $goodsObj.attr('goodsnm');
  959. //let goodsCd = $goodsObj.attr('goodscd');
  960. let price = parseInt(currPrice)+ parseInt(addPrice);
  961. let tag = "";
  962. tag += '<div class="result_item result_'+optCd+'">\n';
  963. tag += ' <div class="opt_header">\n';
  964. tag += ' <div class="bundle">\n';
  965. tag += ' <span class="item_option">'+optCd1+'/'+optCd2+'</span>\n';
  966. tag += ' </div>\n';
  967. tag += ' </div>\n';
  968. tag += ' <div class="number_count">\n';
  969. tag += ' <span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
  970. 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';
  971. tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
  972. tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
  973. tag += ' </div>\n';
  974. tag += ' <div class="item_price">\n';
  975. tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
  976. tag += ' </div>\n';
  977. tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
  978. tag += '</div>\n';
  979. let $objUp = null;
  980. $objUp = $('.pd_detail .opt_result');
  981. $objUp.append(tag);
  982. fnSetTotalPrice();
  983. }, "text");
  984. }
  985. //세트 사이즈 클릭시
  986. function fnViewStockSet(obj, goodsCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
  987. let target=$('.select_custom.item_opt2');
  988. let targetSize = target.length; //구성품 갯수
  989. //eskim
  990. let cnt = 0;
  991. let itemSize = 0;
  992. target.each(function(){
  993. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  994. if (goodsCd != $(this).find('.select').find('input[name=opt2]').val()){
  995. itemSize ++;
  996. }
  997. }
  998. });
  999. //내가 선택한 상품
  1000. if (typeof ($(obj).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(obj).find('input[name=opt2]').val())){
  1001. itemSize ++;
  1002. }
  1003. let mGoodsCd = $("#cartForm input[name=goodsCd]").val();
  1004. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1005. let goodsOption = [];
  1006. if (targetSize == itemSize){
  1007. target.each(function() {
  1008. if (typeof ($(obj).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(obj).find('input[name=opt2]').val())){
  1009. goodsOption.push($(this).find('input[name=opt2]').val());
  1010. }
  1011. });
  1012. var maxCnt = maxOrdQty;
  1013. var data = {arrGoodsOption : goodsOption
  1014. ,minOrdQty : minOrdQty
  1015. ,maxOrdQty : maxOrdQty
  1016. ,goodsCd : mGoodsCd
  1017. ,selfGoodsYn : selfGoodsYn
  1018. };
  1019. var jsonData = JSON.stringify(data);
  1020. gagajf.ajaxJsonSubmit('/goods/detail/ajaxGoodsSetStockQty', jsonData, function(result) {
  1021. var itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
  1022. //console.log("itemCnt : "+itemCnt);
  1023. if (maxCnt > itemCnt) {
  1024. maxCnt = itemCnt;
  1025. }
  1026. $("#cartForm input[name=ordQty]").val(minOrdQty);
  1027. $("#cartForm input[name=maxOrdQty]").val(maxCnt);
  1028. $("#cartForm input[name=minOrdQty]").val(minOrdQty);
  1029. $("#cartForm input[name=cea]").val(minOrdQty);
  1030. $("#cartForm input[name=cea]").attr("readonly",false);
  1031. $("#cartForm input[name=stock]").val(itemCnt);
  1032. fnSetTotalPrice();
  1033. });
  1034. }
  1035. }
  1036. // 옵션2 조회
  1037. var fnOption2 = function(ridx, goodsCd, optCd1, qty, minOrdQty, maxOrdQty , currPrice){
  1038. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1039. let data = {goodsCd : goodsCd
  1040. ,optCd1 : optCd1
  1041. ,adminYn : $("#cartForm input[name=adminYn]").val()
  1042. };
  1043. let jsonData = JSON.stringify(data);
  1044. gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
  1045. if (result.dataList != null && result.dataList.length > 0) {
  1046. let tag = "";
  1047. let $obj = null;
  1048. if (selfGoodsYn == "Y"){
  1049. if (ridx == 1){
  1050. $obj = $('.opt_set_select .select_custom.item_opt2.item_opt2_1');
  1051. }else if (ridx == 2){
  1052. $obj = $('.opt_set_select .select_custom.item_opt2.item_opt2_2');
  1053. }else if (ridx == 3){
  1054. $obj = $('.opt_set_select .select_custom.item_opt2.item_opt2_3');
  1055. }else if (ridx == 4){
  1056. $obj = $('.opt_set_select .select_custom.item_opt2.item_opt2_4');
  1057. }else{
  1058. $obj = $('.opt_set_select .select_custom.item_opt2.item_opt2_5');
  1059. }
  1060. }else{
  1061. $obj = $('.form_field .select_custom.item_opt2.item_opt2_1');
  1062. }
  1063. $.each(result.dataList, function(idx, item) {
  1064. if (idx == 0){
  1065. //$obj = $('#goodsOpt2'+item.goodsCd);
  1066. //$obj = $('.form_field .select_custom.item_opt2.item_opt2_1');
  1067. $obj.html('');
  1068. $('.form_field .select_custom.item_opt2.' +item.goodsCd ).attr('disabled', false)
  1069. //------
  1070. tag += '<div class="combo">\n';
  1071. tag += '<div class="select">선택</div>\n';
  1072. tag += '<ul class="list">\n';
  1073. //------
  1074. tag += '<li class="selected" id="goodsOpt2'+item.goodsCd+'">선택</li>\n';
  1075. }
  1076. let soldoutYn = "";
  1077. if ("Y" == item.soldoutYn || item.stockQty <= 0)soldoutYn = "true";
  1078. if (selfGoodsYn == "Y"){
  1079. tag += '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSet(this, \''+ item.goodsCd+'\' , \''+ item.optCd1+'\' , \''+ item.optCd2+'\', \''+ minOrdQty+'\', \''+ maxOrdQty+'\')">\n';
  1080. }else{
  1081. tag += '<li aria-disabled="'+soldoutYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSelfNo(this)">\n';
  1082. }
  1083. tag += item.optCd2;
  1084. if (item.addPrice > 0){
  1085. tag += ' (+'+ item.addPrice.addComma() +'원)\n';
  1086. }else{
  1087. }
  1088. tag += '<input type="hidden" name="opt2" value="'+ item.goodsCd+'|'+item.optCd +'|'+qty +'" goodsCd="'+item.goodsCd+'" currPrice="'+ currPrice +'" addPrice="'+item.addPrice+'" optCd="'+item.optCd+'" optCd1="'+item.optCd1+'" optCd2="'+item.optCd2+'" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'"/>\n';
  1089. tag += '</li>\n';
  1090. });
  1091. if (!gagajf.isNull(tag)){
  1092. //------
  1093. tag += '</ul>\n';
  1094. tag += '</div>\n';
  1095. //------
  1096. }
  1097. $obj.append(tag);
  1098. if (selfGoodsYn == "Y"){
  1099. if (ridx == 1){
  1100. var opt_selecter02_1 = new sCombo('.opt_set_select .select_custom.item_opt2.item_opt2_1');
  1101. }else if (ridx == 2){
  1102. var opt_selecter02_2 = new sCombo('.opt_set_select .select_custom.item_opt2.item_opt2_2');
  1103. }else if (ridx == 3){
  1104. var opt_selecter02_3 = new sCombo('.opt_set_select .select_custom.item_opt2.item_opt2_3');
  1105. }else if (ridx == 4){
  1106. var opt_selecter02_4 = new sCombo('.opt_set_select .select_custom.item_opt2.item_opt2_4');
  1107. }else{
  1108. var opt_selecter02_5 = new sCombo('.opt_set_select .select_custom.item_opt2.item_opt2_5');
  1109. }
  1110. }else{
  1111. var opt_selecter02 = new sCombo('.opt_select .select_custom.item_opt2.item_opt2_1');
  1112. }
  1113. }
  1114. });
  1115. }
  1116. // 수량 변경 클릭
  1117. var fnAdjustOrderEa = function(obj) {
  1118. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val()){
  1119. if("G056_N" == $("#cartForm input[name=goodsType]").val() ){
  1120. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  1121. mcxDialog.alert("사이즈를 선택하세요.");
  1122. return false;
  1123. }
  1124. }else{ //세트
  1125. let target=$('.select_custom.item_opt2');
  1126. let targetSize = target.length; //구성품 갯수
  1127. let itemSize = 0;
  1128. target.each(function(){
  1129. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  1130. itemSize ++;
  1131. }
  1132. });
  1133. if (targetSize != itemSize){
  1134. mcxDialog.alert("구성상품들의 옵션을 선택하세요.");
  1135. return false;
  1136. }
  1137. }
  1138. }
  1139. let $obj = $(obj);
  1140. let $target = $obj.parent().children('input[name="cea"]');
  1141. let minOrdQty = parseInt( $target.attr('minOrdQty'));
  1142. let maxOrdQty = parseInt( $target.attr('maxOrdQty'));
  1143. let ea =parseInt($target.val());
  1144. if ($obj.attr('adjust') == '-') --ea;
  1145. else ++ea;
  1146. //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
  1147. //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
  1148. if (ea.toString().length > maxOrdQty) --ea;
  1149. if (ea < 1) ea = minOrdQty;
  1150. $target.val(ea);
  1151. $target.attr('value', ea);
  1152. fnChangeOrderEa($target[0]);
  1153. }
  1154. //옵션 갯수 변경
  1155. var fnChangeOrderEa = function(obj) {
  1156. if ("Y" == $("#cartForm input[name=selfGoodsYn]").val()){
  1157. if("G056_N" == $("#cartForm input[name=goodsType]").val()){
  1158. if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
  1159. mcxDialog.alert("사이즈를 선택하세요.");
  1160. return false;
  1161. }
  1162. }else{
  1163. let target=$('.select_custom.item_opt2');
  1164. let targetSize = target.length; //구성품 갯수
  1165. let itemSize = 0;
  1166. target.each(function(){
  1167. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  1168. itemSize ++;
  1169. }
  1170. });
  1171. if (targetSize != itemSize){
  1172. mcxDialog.alert("구성상품들의 옵션을 선택하세요.");
  1173. return false;
  1174. }
  1175. }
  1176. }
  1177. let $obj = $(obj);
  1178. let ea = parseInt($obj.val());
  1179. let maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
  1180. let minOrdQty = parseInt($(obj).attr('minOrdQty'));
  1181. let optCd = $(obj).attr('optCd');
  1182. let alertMsg = '';
  1183. if (ea < minOrdQty) {
  1184. alertMsg ="최소 주문 가능 수량은 "+buymin+"개 입니다.";
  1185. ea = minOrdQty;
  1186. }
  1187. if (ea > maxOrdQty) {
  1188. alertMsg = "최대 주문 가능 수량은 "+buymax+"개 입니다.";
  1189. ea = maxOrdQty;
  1190. }
  1191. $("#cartForm input[name=cea]").val(ea);
  1192. $("#cartForm input[name=ordQty]").val(ea);
  1193. obj.value = ea;
  1194. if (alertMsg != ''){
  1195. mcxDialog.alert(alertMsg);
  1196. return false;
  1197. }
  1198. if (ea <= 1){
  1199. $('.number_count').find('.minus').addClass('min_val');
  1200. }else{
  1201. $('.number_count').find('.minus').removeClass('min_val');
  1202. }
  1203. let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
  1204. let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
  1205. let totalPrice = ((goodsPrice+addPrice) * ea);
  1206. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
  1207. $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
  1208. $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
  1209. fnSetTotalPrice();
  1210. }
  1211. //합계 계산
  1212. var fnSetTotalPrice = function() {
  1213. //let f = document.cartForm;
  1214. let totalEa = 0;
  1215. let totalPrice = 0;
  1216. $('input[name="cea"]').each(function() {
  1217. let ea = parseInt($(this).val());
  1218. let addPrice = 0;
  1219. let target=$('.select_custom.item_opt2');
  1220. target.each(function() {
  1221. if (typeof ($(this).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('input[name=opt2]').val())){
  1222. addPrice += Number($(this).find('input[name=opt2]').attr('addPrice'));
  1223. }
  1224. });
  1225. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  1226. totalEa += ea;
  1227. if (goodsPrice > 0) {
  1228. totalPrice += ((goodsPrice+addPrice) * ea);
  1229. }
  1230. });
  1231. $('#goodsTotalQty').html(totalEa.addComma());
  1232. $('#goodsTotalPrice').html(totalPrice.addComma());
  1233. }
  1234. // 선택상품 삭제
  1235. var fnSelectGoodsDel = function(optCd){
  1236. $('.result_'+optCd).remove();
  1237. fnSetTotalPrice();
  1238. }
  1239. //장바구니담기
  1240. var fnAddCart = function(btnType){
  1241. // 바로구매는 로그인여부 확인
  1242. if (btnType == "O" && !cfCheckLogin()) {
  1243. let btn = ["비회원 구매", "로그인후 구매"]; //버튼명[좌,우]
  1244. mcxDialog.confirmC("로그인 후 구매 시 다양한 혜택을 받으실 수 있습니다.", { //내용
  1245. btn: btn,
  1246. btnClick: function(index){
  1247. if (index == 1){ //button1 일때 처리문
  1248. // 비회원 URL
  1249. ALERT('비회원');
  1250. } else { //button2 일때 처리문
  1251. cfnGoToPage(_PAGE_LOGIN);
  1252. }
  1253. }
  1254. });
  1255. return false;
  1256. }
  1257. let params = [];
  1258. let goodsType = $("#cartForm input[name=goodsType]").val();
  1259. let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
  1260. if (goodsType == 'G056_N' && selfGoodsYn == 'Y' ){
  1261. if (gagajf.isNull($("#cartForm input[name=optCd2]").val())) {
  1262. mcxDialog.alert("사이즈를 선택하세요.");
  1263. return;
  1264. }
  1265. let obj = new Object();
  1266. obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
  1267. obj.optCd = $("#cartForm input[name=optCd]").val();
  1268. obj.goodsQty = $("#cartForm input[name=ordQty]").val();
  1269. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  1270. obj.cartGb = btnType;
  1271. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1272. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1273. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1274. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1275. params.push(obj);
  1276. }else {
  1277. let target = null;
  1278. let targetSize = 0; //구성품 갯수
  1279. if (goodsType == 'G056_S') {
  1280. target=$('.select_custom.item_opt2');
  1281. targetSize = target.length; //구성품 갯수
  1282. let itemSize = 0;
  1283. target.each(function(){
  1284. if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
  1285. itemSize ++;
  1286. }
  1287. });
  1288. if (targetSize != itemSize){
  1289. mcxDialog.alert("구성상품들의 옵션을 선택하세요.");
  1290. return false;
  1291. }
  1292. }else{
  1293. target = $('#cartForm input[name=cea]');
  1294. targetSize = target.length; //선택성품 갯수
  1295. if (target.length <= 0){
  1296. mcxDialog.alert("구성상품들의 옵션을 선택하세요.");
  1297. return false;
  1298. }
  1299. }
  1300. target.each(function() {
  1301. let ea = parseInt($(this).val());
  1302. let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
  1303. let optCd = $(this).parent().find('input[name="coption"]').val();
  1304. let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
  1305. let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
  1306. var obj = new Object();
  1307. obj.cartGb = btnType;
  1308. obj.goodsType = $("#cartForm input[name=goodsType]").val();
  1309. obj.goodsCd = goodsCd;
  1310. obj.optCd = optCd;
  1311. obj.goodsQty = ea;
  1312. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1313. obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
  1314. obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
  1315. obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
  1316. params.push(obj);
  1317. });
  1318. }
  1319. // 장바구니담기
  1320. cfnAddCart(params);
  1321. }
  1322. // 룩북속 상품 쇼핑백 담기
  1323. var fnAddCartLookBookGoods = function(obj){
  1324. let $obj = $(obj);
  1325. let $target = $obj.parent().parent().parent().find('.swiper-container').find('.item_prod');
  1326. let btnType = "C";
  1327. let params = [];
  1328. $target.each(function(){
  1329. if ($(this).hasClass('unable')) {
  1330. }else{
  1331. let obj = new Object();
  1332. obj.goodsCd = $(this).attr("goodsCd");
  1333. obj.optCd = $(this).attr("optCd");
  1334. obj.goodsQty = $(this).attr("minOrdQty");
  1335. obj.goodsType = $(this).attr("goodsType");
  1336. obj.cartGb = btnType;
  1337. obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
  1338. obj.ithrCd = $(this).attr("ithrCd");
  1339. obj.contentsLoc = $(this).attr("contentsLoc");
  1340. obj.planDtlSq = '';
  1341. params.push(obj);
  1342. }
  1343. });
  1344. // 장바구니담기
  1345. if (params.length > 0){
  1346. cfnAddCart(params);
  1347. }
  1348. }
  1349. $(document).ready( function() {
  1350. $('.timer_box').css('display', 'none');
  1351. var params = new Object();
  1352. params.goodsCd = [[${params.goodsCd}]];
  1353. params.viewDt = [[${params.viewDt}]];
  1354. params.preview = [[${params.preview}]];
  1355. params.adminYn = [[${params.adminYn}]];
  1356. params.goodsType = [[${params.goodsType}]];
  1357. params.supplyCompCd = [[${params.supplyCompCd}]];
  1358. params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
  1359. // 다다익선 상품(ajax html)
  1360. params.goodsOtherGb = "tmtb";
  1361. params.ithrCd = "tmtb";
  1362. params.contentsLoc = "tmtb";
  1363. fnGoodsTmtbSearch(params);
  1364. // 함께본 상품(ajax html)
  1365. params.goodsOtherGb = "together";
  1366. params.ithrCd = "tmtb";
  1367. params.contentsLoc = "tmtb";
  1368. fnGoodsTogetherSearch(params);
  1369. // 추천 상품(ajax html)
  1370. params.goodsOtherGb = "recommend";
  1371. params.ithrCd = "tmtb";
  1372. params.contentsLoc = "tmtb";
  1373. fnGoodsRecommendSearch(params);
  1374. // 비슷한 상품(ajax html)
  1375. params.goodsOtherGb = "like";
  1376. params.ithrCd = "tmtb";
  1377. params.contentsLoc = "tmtb";
  1378. fnGoodsLikeSearch(params);
  1379. // selecter
  1380. $(function(){
  1381. var item_opt01 = new sCombo('.pd .pop_option_select .item_opt1');
  1382. var item_opt02 = new sCombo('.pd .pop_option_select .item_opt2');
  1383. var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
  1384. });
  1385. if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
  1386. $('.timer_box').css('display', 'block');
  1387. /* 행사 남은시간 */
  1388. function promotionTimer() {
  1389. var endTime = new Date([[${goodsInfo.socialEddt}]]); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
  1390. endTime = (Date.parse(endTime) / 1000);
  1391. var now = new Date();
  1392. now = (Date.parse(now) / 1000);
  1393. var timeLeft = endTime - now;
  1394. var days = Math.floor(timeLeft / 86400);
  1395. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  1396. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  1397. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  1398. if (hours < '10') { hours = '0' + hours; }
  1399. if (minutes < '10') { minutes = '0' + minutes; }
  1400. if (seconds < '10') { seconds = '0' + seconds; }
  1401. if (Number(days) > 0 ){
  1402. $('#d-days').html(days);
  1403. }else{
  1404. $('#d-days').css('display','none');
  1405. }
  1406. $('#d-hours').html(hours);
  1407. $('#d-minutes').html(minutes);
  1408. $('#d-seconds').html(seconds);
  1409. }
  1410. setInterval(function() { promotionTimer(); }, 1000);
  1411. }
  1412. //상품상세정보 더보기
  1413. $(document).on('click','.pd_descrp .btn_more_box button',function(e){
  1414. $('.pd_descrp .cont_body').toggleClass('on');
  1415. $(this).toggleClass('active');
  1416. $(this).parent('.btn_more_box').toggleClass('covered');
  1417. var descrpToggle = $(this).find('span');
  1418. $(descrpToggle).text($(descrpToggle).text() == '상세정보 더보기' ? '상세정보 접기' : '상세정보 더보기');
  1419. return false;
  1420. });
  1421. //슬라이드 - 베스트리뷰
  1422. var riviewSwiper = new Swiper('.riview_box .area_slider .swiper-container', {
  1423. observer: true,
  1424. observeParents: true,
  1425. slidesPerView: 1,
  1426. spaceBetween: 8,
  1427. loop: true,
  1428. pagination: {
  1429. el: '.swiper-pagination',
  1430. type: 'fraction',
  1431. },
  1432. });
  1433. //슬라이드 - 제품사진
  1434. var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
  1435. slidesPerView:1,
  1436. pagination: {
  1437. el: '.swiper-pagination',
  1438. type: 'fraction',
  1439. },
  1440. });
  1441. //슬라이드 - STYLE24의 스타일링 추천
  1442. var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
  1443. slidesPerView: 1,
  1444. spaceBetween: 0,
  1445. pagination: {
  1446. el: '.swiper-pagination',
  1447. type: 'fraction',
  1448. },
  1449. });
  1450. var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
  1451. observer: true,
  1452. observeParents: true,
  1453. slidesPerView: 3,
  1454. spaceBetween: 8,
  1455. });
  1456. $(".pic_list > div").hide();
  1457. $(".pic_list > div").eq(0).fadeIn();
  1458. rcmdPicimgSwiper.on('slideChange', function () {
  1459. var pic_index=this.activeIndex;
  1460. $(".pic_list > div").hide();
  1461. $(".pic_list > div").eq(pic_index).fadeIn();
  1462. });
  1463. //슬라이드 - 베스트리뷰팝업
  1464. var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
  1465. observer: true,
  1466. observeParents: true,
  1467. slidesPerView: 1,
  1468. pagination: {
  1469. el: '.swiper-pagination',
  1470. type: 'fraction',
  1471. },
  1472. });
  1473. //슬라이드 - 포토,영상리뷰팝업
  1474. var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
  1475. observer: true,
  1476. observeParents: true,
  1477. slidesPerView: 1,
  1478. pagination: {
  1479. el: '.swiper-pagination',
  1480. type: 'fraction',
  1481. },
  1482. });
  1483. $(document).on('click','.pd_bestreviewdetail_pop .thumblist ul li',function(e){
  1484. $(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
  1485. $(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
  1486. $(this).find(".pic").addClass('active');
  1487. var thumbIndex = $(this).index();
  1488. var thumbImg = $(this).find('.pic .thumb').attr('style');
  1489. var thumbImgSrc = thumbImg.split("background-image:url(")[1];
  1490. thumbImgHtml = "<img src="+ thumbImgSrc +" alt=''>";
  1491. $(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbImgHtml);
  1492. return false;
  1493. });
  1494. // 포토,베스트리뷰숨김
  1495. var review_open=$(".btn_review_open");
  1496. $(document).on('click','.btn_review_open',function(e){
  1497. $(this).toggleClass('active');
  1498. $(this).next(".review_list").toggleClass('active');
  1499. return false;
  1500. });
  1501. //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
  1502. $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
  1503. $(".Purchase_pop .pop_option_select").show();
  1504. return false;
  1505. });
  1506. $(document).on('click','.Purchase_pop .close',function(e){
  1507. $(".Purchase_pop .pop_option_select").hide();
  1508. return false;
  1509. });
  1510. fnOptionSoldout();
  1511. // 광고 스크립트용
  1512. var goodsNavigation = [[${goodsNavigation}]];
  1513. var cate1Nm = "";
  1514. var cate2Nm = "";
  1515. var cate3Nm = "";
  1516. var cate4Nm = "";
  1517. var cate5Nm = "";
  1518. if (!gagajf.isNull(goodsNavigation)) {
  1519. cate1Nm = goodsNavigation.cate1Nm;
  1520. cate2Nm = goodsNavigation.cate2Nm;
  1521. cate3Nm = goodsNavigation.cate3Nm;
  1522. cate4Nm = goodsNavigation.cate4Nm;
  1523. cate5Nm = goodsNavigation.cate3Nm;
  1524. if (!gagajf.isNull(cate1Nm)) {
  1525. cateNm += cate1Nm;
  1526. }
  1527. if (!gagajf.isNull(cate2Nm)) {
  1528. cateNm += ' > ' + cate2Nm;
  1529. }
  1530. if (!gagajf.isNull(cate3Nm)) {
  1531. cateNm += ' > ' + cate3Nm;
  1532. }
  1533. if (!gagajf.isNull(cate4Nm)) {
  1534. cateNm += ' > ' + cate4Nm;
  1535. }
  1536. if (!gagajf.isNull(cate5Nm)) {
  1537. cateNm += ' > ' + cate5Nm;
  1538. }
  1539. }
  1540. // 광고 스크립트용
  1541. var snsGoodsImg = _uploadGoodsUrl + [[${goodsInfo.sysImgNm}]];
  1542. var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
  1543. var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
  1544. <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
  1545. $("meta[property='og:url']").attr('content', snsUrl);
  1546. $("meta[property='og:title']").attr('content', snsGoodsFullNm);
  1547. $("meta[property='og:description']").attr('content', snsGoodsFullNm);
  1548. $("meta[property='og:image']").attr('content', snsGoodsImg);
  1549. <!-- 트위터 관련 메타태그 -->
  1550. $("meta[name='twitter:url']").attr('content', snsUrl);
  1551. $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
  1552. $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
  1553. $("meta[name='twitter:image']").attr('content', snsGoodsImg);
  1554. // 추천솔류션 meta 설정
  1555. $("meta[property='eg:type']").attr('content',"product");
  1556. $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
  1557. $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
  1558. $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
  1559. $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
  1560. $("meta[property='eg:itemUrl']").attr('content',snsUrl);
  1561. $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
  1562. $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
  1563. $("meta[property='eg:category1']").attr('content',cate1Nm);
  1564. $("meta[property='eg:category2']").attr('content',cate2Nm);
  1565. $("meta[property='eg:category3']").attr('content',cate3Nm);
  1566. $("meta[property='eg:category4']").attr('content',cate4Nm);
  1567. $("meta[property='eg:category5']").attr('content',cate5Nm);
  1568. $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
  1569. $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
  1570. $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1571. $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
  1572. $("meta[property='eg:stock']").attr('content',"");
  1573. $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStatNm}]]);
  1574. $("meta[property='eg:description']").attr('content',null);
  1575. $("meta[property='eg:extraImage']").attr('content',null);
  1576. $("meta[property='eg:locale']").attr('content',"KR");
  1577. $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
  1578. $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
  1579. $('.btn_copy').bind('click', function() {
  1580. copyToClipboard();
  1581. });
  1582. });
  1583. // 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정
  1584. $(window).scroll(function(){
  1585. });
  1586. /*]]>*/
  1587. </script>
  1588. <!-- 광고 스크립트 -->
  1589. <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
  1590. <!-- //광고 스크립트 -->
  1591. </th:block>
  1592. </body>
  1593. </html>