PlanningDetailFormWeb.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorator="web/common/layout/DefaultLayoutWeb">
  5. <!--
  6. *******************************************************************************
  7. * @source : PlanningDetailFormWeb.html
  8. * @desc : 기획전디테일 Page
  9. *============================================================================
  10. * Pastelmall
  11. * Copyright(C) 2020 TSIT, All rights reserved.
  12. *============================================================================
  13. * VER DATE AUTHOR DESCRIPTION
  14. * === =========== ========== =============================================
  15. * 1.0 2021.3.9 sowon 최초 작성
  16. *******************************************************************************
  17. -->
  18. <body>
  19. <th:block layout:fragment="content">
  20. <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  21. <div id="container" class="container dp" th:with="frontUrl=${@environment.getProperty('domain.front')}, goodsView=${@environment.getProperty('upload.goods.view')}, planView=${@environment.getProperty('upload.image.view')}">
  22. <div class="breadcrumb">
  23. <ul>
  24. <li class="bread_home"><a href="javascript:void(0);"
  25. onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
  26. <li class="bread_2depth"><a href="javascript:void(0);"
  27. onclick="cfnGoToPage(_PAGE_PLANNING_MAIN);">기획전</a></li>
  28. <li class="bread_2depth" th:text="${planInfo.planNm}"></li>
  29. </ul>
  30. </div>
  31. <div class="wrap">
  32. <!-- 상단 프로모션 배너 -->
  33. <div class="content wide dp_detail_visual">
  34. <div class="cont_head">
  35. <div>
  36. <h3 th:text="${planInfo.planNm}"></h4>
  37. <div class="shareSet">
  38. <button class="btn_share" data-name="openShare">공유하기</button>
  39. <!-- toggle contents -->
  40. <div id="layerShare" class="setShare open">
  41. <span>
  42. <button type="button" class="kk" th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '${planView+ '/'+planInfo.mainImg}');|"><span>카카오톡</span></button>
  43. <button type="button" class="fb" th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '', '');|"><span>페이스북</span></button>
  44. <button type="button" class="tw" th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm+ '#style24몰'}', '', '');|"><span>트위터</span></button>
  45. <button type="button" class="url btn_copy"><span>URL</span></button>
  46. </span>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="cont_body">
  53. <!-- 프로모션배너 type1 -->
  54. <div class="promotion_visual type1" th:if="${fsrcInfoTop != null}" th:utext="${#strings.replace(#strings.replace(fsrcInfoTop.fsrcPc,'&amplt;','<'),'&ampgt;','>')}"></div>
  55. <!-- <div class="promotion_visual type2" th:if="${fsrcInfoTop != null}" th:utext="${#strings.replace(#strings.replace(fsrcInfoTop.fsrcPc,'&amplt;','<'),'&ampgt;','>')}"></div> -->
  56. <!-- 프로모션배너 type1 -->
  57. <!-- 프로모션배너 type2 -->
  58. <!-- <div class="promotion_visual type2">
  59. <div class="swiper-container">
  60. <div class="swiper-wrapper ">
  61. <div class="swiper-slide">
  62. <img alt="" src="/images/pc/thumb/bigbanner_slide01.png">
  63. </div>
  64. <div class="swiper-slide">
  65. <img alt="" src="/images/pc/thumb/bigbanner_slide02.png">
  66. </div>
  67. </div>
  68. </div>
  69. <div class="swiper-button-prev"></div>
  70. <div class="swiper-button-next"></div>
  71. <div class="swiper-pagination"></div>
  72. </div> -->
  73. <!-- 프로모션배너 type2 -->
  74. </div>
  75. <!-- //상단 프로모션 배너 -->
  76. <th:block th:each="a, template : ${templateOrd}">
  77. <th:block th:if="${a.tmplType == 'G082_10'}">
  78. <div class="content wide dp_review" th:id="${a.tmplType}"></div> <!-- //리뷰 -->
  79. </th:block>
  80. <th:block th:if="${a.tmplType == 'G082_20'}">
  81. <div class="content wide dp_coupon" th:id="${a.tmplType}"></div> <!-- //할인쿠폰 -->
  82. </th:block>
  83. <th:block th:if="${a.tmplType == 'G082_30'}">
  84. <div class="content dp_mid_banner" th:id="${a.tmplType}"></div> <!-- //이미지-->
  85. </th:block>
  86. <th:block th:if="${a.tmplType == 'G082_40'}">
  87. <div class="coner_item01" th:id="${a.tmplType}"></div>
  88. </th:block>
  89. <th:block th:if="${a.tmplType == 'G082_50'}">
  90. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  91. </th:block>
  92. <th:block th:if="${a.tmplType == 'G082_51'}">
  93. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  94. </th:block>
  95. <th:block th:if="${a.tmplType == 'G082_52'}">
  96. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  97. </th:block>
  98. </th:block>
  99. <!-- 관련상품 리스트 -->
  100. <div class="content sticky_nav_list">
  101. <div class="cont_head">
  102. <div class="sticky_nav">
  103. <ul>
  104. <th:block th:each="cornerData, CornerStat : ${planCornerList}">
  105. <li><a th:href="${'#brand' +CornerStat.index}" th:text="${cornerData.cornerNm}"></a></li> <!-- 섹션이동 -->
  106. </th:block>
  107. </ul>
  108. </div>
  109. </div>
  110. <div class="cont_body">
  111. <div class="list_content">
  112. <th:block th:each="cornerData, CornerStat : ${planCornerList}">
  113. <div th:id="${'brand' +CornerStat.index}">
  114. <div class="item_header"> <!-- 섹션이동 -->
  115. <h4 th:text="${cornerData.cornerNm}"></h4>
  116. </div>
  117. <div class="itemsGrp"> <!-- itemsGrp rank hot deal -->
  118. <th:block th:each="cornerGoodsData, CornerGoodsStat : ${planCornerGoodsList}" th:if="${cornerGoodsData.cornerNm == cornerData.cornerNm}">
  119. <div class="item_prod">
  120. <div class="item_state">
  121. <button type="button" th:class="${cornerGoodsData.likeIt == 'likeit'}? 'itemLike likeit' : 'itemLike'" onclick="cfnPutWishList(this);" th:attr="goodsCd=${cornerGoodsData.goodsCd}, ithrCd='', contentsLoc='', planDtlSq=''">관심상품 추가</button>
  122. <a href="javascript:void(0);" th:onclick="cfnGoToGoodsDetail([[${cornerGoodsData.goodsCd}]])" class="itemLink">
  123. <!-- <div class="rank ranker"><span>1</span></div> -->
  124. <div class="itemPic">
  125. <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${goodsView + '/' +cornerGoodsData.sysImgNm}">
  126. </div>
  127. <p class="itemBrand" th:text="${cornerGoodsData.brandGroupNm}"></p>
  128. <div class="itemName" th:text="${cornerGoodsData.goodsNm}"></div>
  129. <p class="itemPrice">[[${#numbers.formatInteger(cornerGoodsData.currPrice,0,'COMMA')}]]
  130. <span class="itemPrice_original" th:if="${cornerGoodsData.currPrice != cornerGoodsData.listPrice}" th:text="${#numbers.formatInteger(cornerGoodsData.listPrice,0,'COMMA')}"></span>
  131. <span class=" itemPercent" th:if="${cornerGoodsData.dcRate != '0'}" th:text="|${#numbers.formatDecimal(cornerGoodsData.dcRate,0,0)}%|"></span>
  132. </p>
  133. <div class="itemcolorchip">
  134. <span class="chip_color35" value="ABM">BEIGE</span>
  135. <span class="chip_color54" value="BDS">BLACK</span>
  136. <span class="chip_color40" value="YBR">WHITE</span>
  137. </div>
  138. <p class="itemBadge">
  139. <span class="badge13">베스트 </span>
  140. </p>
  141. <div class="itemComment" th:if="${cornerGoodsData.goodsTnm != null}" th:text="${cornerGoodsData.goodsTnm}"></div>
  142. </a>
  143. </div>
  144. </div>
  145. </th:block>
  146. </div>
  147. </th:block>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <!-- //관련상품 리스트 -->
  153. <!-- 다른 기획전 보기 -->
  154. <div class="content other_dp_slide">
  155. <div class="cont_head">
  156. <div>
  157. <h4>다른 기획전 보기</h4>
  158. <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_PLANNING_MAIN);">전체보기</a>
  159. </div>
  160. </div>
  161. <div class="cont_body">
  162. <div class="swiper-container">
  163. <div class="swiper-wrapper">
  164. <th:block th:each="PlanData, PlanStat : ${planList}">
  165. <div class="swiper-slide">
  166. <a th:onclick="cfnGoToPlanDetail([[${PlanData.planSq}]])">
  167. <div class="thumb">
  168. <img th:src="${@environment.getProperty('upload.image.view')+PlanData.mainImg}" alt="${PlanData.planNm}">
  169. </div>
  170. <div class="txt">
  171. <!-- <span class="brand">BUCKAROO</span> -->
  172. <p class="tit" th:text="${PlanData.planNm}"></p>
  173. </div>
  174. </a>
  175. </div>
  176. </th:block>
  177. </div>
  178. </div>
  179. <div class="swiper-button-prev"></div>
  180. <div class="swiper-button-next"></div>
  181. </div>
  182. </div>
  183. <!-- //다른 기획전 보기 -->
  184. </div>
  185. <div class="modal fade couponInfo_pop" id="couponInfoPop" tabindex="-1" role="dialog" aria-labelledby="couponInfoLabel" aria-hidden="true">
  186. </div>
  187. <script th:inline="javascript">
  188. let review = [[${reviewInfo}]];
  189. let coupon = [[${couponInfo}]];
  190. let plan = [[${planInfo}]];
  191. let image = [[${imageInfo}]];
  192. let goods1 = [[${goods1Info}]];
  193. let goods2 = [[${goods2Info}]];
  194. let goods4 = [[${goods4Info}]];
  195. let template =[[${templateOrd}]];
  196. let _mall = [[${@environment.getProperty('domain.front')}]];
  197. let goodsView =[[${@environment.getProperty('upload.goods.view')}]]
  198. let imgUrl=[[${@environment.getProperty('upload.image.view')}]];
  199. if(review != null || review != ''){
  200. var html = '';
  201. html += ' <div class="cont_head">';
  202. html += ' <div>';
  203. html += ' <h4>'+review[0].title+'</h4>';
  204. html += ' </div>';
  205. html += ' <div class="cont_body">';
  206. html += ' <div class="review_list">';
  207. $.each(review, function(idx, item) {
  208. html += ' <div class="reviw_box">'
  209. html += ' <div class="best_review">';
  210. html += ' <a href="javascript:void();" id="btn_pdBestReview_pop" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
  211. html += ' <div class="pic">';
  212. if (item.fileGb == 'M') {
  213. html += ' <span class="thumb mov" style="background-image: url('+ imgUrl +'/'+item.reviewSysImg +');"></span>';
  214. }else{
  215. html += ' <span class="thumb" style="background-image: url('+ imgUrl +'/'+item.reviewSysImg +');"></span>';
  216. }
  217. html += ' </div>';
  218. html += ' <div class="star_score">';
  219. html += ' <span class="star">';
  220. html += ' <em class="progbar" style="width:'+(item.score*20)+'%;"></em> <!-- 평점 style로 표기 -->';
  221. html += ' </span>';
  222. if(item.bestYn == 'Y'){
  223. html += '<em class="ico ico_besttag"></em>';
  224. }
  225. html += ' </div>';
  226. html += ' <div class="txt_best_review">';
  227. html += ' <p>'+item.reviewContent+'</p>';
  228. html += ' </div>';
  229. html += ' <div class="info_writer">';
  230. html += ' <span class="wr_id">'+item.maskingCustId+'</span>';
  231. html += ' <span class="wr_date">'+item.regDt+'</span>';
  232. html += ' </div>';
  233. html += ' </a>';
  234. html += ' </div>';
  235. html += ' <div class="review_item">';
  236. html += ' <div class="item_prod">';
  237. html += ' <div class="item_state">';
  238. html += ' <a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  239. html += ' <div class="itemPic">';
  240. html += ' <img alt="" class="vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  241. html += ' </div>';
  242. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  243. html += ' <p class="itemPrice">'+item.currPrice.addComma()+'</p>';
  244. html += ' </a>';
  245. html += ' </div>';
  246. html += ' </div>';
  247. html += ' </div>';
  248. html += ' </div> ';
  249. });
  250. html += ' </div> ';
  251. html += ' </div>';
  252. html += '</div>';
  253. $("#G082_10").append(html);
  254. }
  255. if(image != null || image != ''){
  256. var html = '';
  257. html += '<div class="cont_body"> ';
  258. html += ' <div class="mid_banner">';
  259. html += ' <div class="swiper-container">';
  260. html += ' <div class="swiper-wrapper">';
  261. for (var i = 0; i < image.length; i++) {
  262. html += ' <div class="swiper-slide">';
  263. html += ' <img alt="" src="'+ imgUrl + image[i].itemVal +'">';
  264. html += ' </div>';
  265. }
  266. html += ' </div>';
  267. html += ' </div>';
  268. html += ' <div class="swiper-button-prev"></div>';
  269. html += ' <div class="swiper-button-next"></div>';
  270. html += ' <div class="swiper-pagination"></div>';
  271. html += ' </div>';
  272. html += '</div>';
  273. $("#G082_30").append(html);
  274. }
  275. if(goods1 != null || goods1 != ''){
  276. var array = [];
  277. for (var j = 0; j < template.length; j++) {
  278. if(template[j].tmplType == 'G082_50'){
  279. array.push(template[j].planContSq);
  280. }
  281. }
  282. for (var i = 0; i < template.length; i++) {
  283. var html = '';
  284. if(template[i].tmplType == 'G082_50' && array[0] == template[i].planContSq && typeof array[0] != 'undefined') {
  285. html += '<div class="cont_head">';
  286. html += ' <div>';
  287. html += ' <h4>';
  288. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  289. html += ' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+'</a>';
  290. }else{
  291. html += ' <a href="javascript:void(0)">'+template[i].title+'</a>';
  292. }
  293. html += ' </h4>';
  294. html += ' </div>';
  295. html += '</div>';
  296. html += '<div class="cont_body">';
  297. html += ' <div class="dp_listItems_cont type1">';
  298. html += ' <ul>';
  299. $.each(goods1, function(idx, item) {
  300. if (item.planContSq == template[i].planContSq) {
  301. html += ' <li>';
  302. html += ' <div class="dp_listItems">';
  303. html += ' <div class="dp_listItems_img">';
  304. html += ' <img src="'+ goodsView +'/'+item.sysImgNm +'" alt="">';
  305. html += ' </div>';
  306. html += ' <div class="dp_listItems_info">';
  307. html += ' <div class="dp_listItems_brand">'+item.brandGroupNm+'</div>';
  308. html += ' <div class="dp_listItems_name">'+item.goodsNm+'<br></div>';
  309. html += ' <div class="dp_listItems_price">';
  310. html += ' <span class="price">'+item.currPrice.addComma()+'</span>';
  311. if (item.currPrice != item.listPrice) {
  312. html += ' <del>'+item.listPrice.addComma()+'</del>';
  313. html += ' <span class="percent">'+Math.floor(item.dcRate)+'%</span>';
  314. }
  315. html += ' </div>';
  316. if(item.goodsTnm != null){
  317. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  318. }
  319. html += ' <div class="ui_row">';
  320. html += ' <button type="button" class="btn btn_default" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')"><span>자세히 보기</span></button>';
  321. html += ' </div>';
  322. html += ' </div>';
  323. html += ' </div>';
  324. html += ' </li>';
  325. }
  326. });
  327. html += ' </ul>';
  328. html += ' </div> ';
  329. html += '</div>';
  330. $("#G082_50" +array[0]).append(html);
  331. }
  332. if($("#G082_50" +template[i].planContSq).length){
  333. array.shift();
  334. }
  335. }
  336. }
  337. if(goods2 != null || goods2 != ''){
  338. var array = [];
  339. for (var j = 0; j < template.length; j++) {
  340. if(template[j].tmplType == 'G082_51'){
  341. array.push(template[j].planContSq);
  342. }
  343. }
  344. for (var i = 0; i < template.length; i++) {
  345. var html = '';
  346. if(template[i].tmplType == 'G082_51' && array[0] == template[i].planContSq && typeof array[0] != 'undefined'){
  347. html += '<div class="cont_head">';
  348. html += ' <div>';
  349. html += ' <h4>';
  350. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  351. html+=' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+'</a>';
  352. }else{
  353. html+=' <a href="javascript:void(0)">'+template[i].title+'</a>';
  354. }
  355. html += ' </h4>';
  356. html += ' </div>';
  357. html += '</div>';
  358. html += '<div class="cont_body">';
  359. html += ' <div class="dp_listItems_cont type2">';
  360. html += ' <div class="swiper-container">';
  361. html += ' <div class="swiper-wrapper">';
  362. $.each(goods2, function(idx, item) {
  363. if (item.planContSq == template[i].planContSq) {
  364. html += ' <div class="swiper-slide">';
  365. html += ' <div class="item_prod">';
  366. html += ' <div class="item_state">';
  367. html += ' <a onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  368. html += ' <div class="itemPic">';
  369. html += ' <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  370. html += ' </div>';
  371. html += ' <p class="itemBrand">'+item.brandGroupNm+'</p>';
  372. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  373. html += ' <p class="itemPrice">'+item.currPrice.addComma();
  374. if (item.currPrice != item.listPrice) {
  375. html+=' <span class="itemPrice_original">'+item.listPrice.addComma()+'</span>';
  376. html+=' <span class=" itemPercent">'+Math.floor(item.dcRate)+'%</span>';
  377. }
  378. html += ' </p>';
  379. if(item.goodsTnm != null){
  380. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  381. }
  382. html += ' </a>';
  383. html += ' </div>';
  384. html += ' </div>';
  385. html += ' </div> ';
  386. }
  387. });
  388. html += ' </div>';
  389. html += ' </div>';
  390. html += ' <div class="swiper-button-prev"></div>';
  391. html += ' <div class="swiper-button-next"></div>';
  392. html += ' <div class="swiper-pagination"></div>';
  393. html += ' </div> ';
  394. html += '</div>';
  395. $("#G082_51" +array[0]).append(html);
  396. }
  397. if($("#G082_51" +template[i].planContSq).length){
  398. array.shift();
  399. }
  400. }
  401. }
  402. if(goods4 != null || goods4 != ''){
  403. var array = [];
  404. for (var j = 0; j < template.length; j++) {
  405. if(template[j].tmplType == 'G082_52'){
  406. array.push(template[j].planContSq);
  407. }
  408. }
  409. for (var i = 0; i < template.length; i++) {
  410. var html = '';
  411. if(template[i].tmplType == 'G082_52' && array[0] == template[i].planContSq && typeof array[0] != 'undefined'){
  412. html += '<div class="cont_head">';
  413. html += '<div>';
  414. html += ' <h4>';
  415. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  416. html+=' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+'</a>';
  417. }else{
  418. html+=' <a href="javascript:void(0)">'+template[i].title+'</a>';
  419. }
  420. html += ' </h4>';
  421. html += ' </div>';
  422. html += '</div>';
  423. html += '<div class="cont_body">';
  424. html += ' <!-- 상품 노출 4열 type3 -->';
  425. html += ' <div class="dp_listItems_cont type3">';
  426. html += ' <div class="swiper-container">';
  427. html += ' <div class="swiper-wrapper">';
  428. $.each(goods4, function(idx, item) {
  429. if (item.planContSq == template[i].planContSq) {
  430. html += ' <div class="swiper-slide">';
  431. html += ' <div class="item_prod">';
  432. html += ' <div class="item_state">';
  433. html += ' <a onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  434. html += ' <div class="itemPic">';
  435. html += ' <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  436. html += ' </div>';
  437. html += ' <p class="itemBrand">'+item.brandGroupNm+'</p>';
  438. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  439. html += ' <p class="itemPrice">'+item.currPrice.addComma();
  440. if (item.currPrice != item.listPrice) {
  441. html+=' <span class="itemPrice_original">'+item.listPrice.addComma()+'</span>';
  442. html+=' <span class=" itemPercent">'+Math.floor(item.dcRate)+'%</span>';
  443. }
  444. html += ' </p>';
  445. if(item.goodsTnm != null){
  446. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  447. }
  448. html += ' </a>';
  449. html += ' </div>';
  450. html += ' </div>';
  451. html += ' </div>';
  452. }
  453. });
  454. html += ' </div>';
  455. html += ' </div>';
  456. html += ' <div class="swiper-button-prev"></div>';
  457. html += ' <div class="swiper-button-next"></div>';
  458. html += ' <div class="swiper-pagination"></div>';
  459. html += ' </div> ';
  460. html += '</div>';
  461. $("#G082_52" +array[0]).append(html);
  462. }
  463. if($("#G082_52" +template[i].planContSq).length){
  464. array.shift();
  465. }
  466. }
  467. }
  468. if(coupon != null || coupon != ''){
  469. var html = '';
  470. html += '<div class="cont_head">';
  471. html += ' <div>';
  472. html += ' <h4>'+coupon[0].title+'</h4>';
  473. html += ' </div>';
  474. html += '</div>';
  475. html += '<div class="cont_body">';
  476. html += ' <div class="coupon_list">';
  477. html += ' <ul>';
  478. $.each(coupon, function(idx, item) {
  479. html += ' <li>';
  480. html += ' <div class="coupon">';
  481. html += ' <div>';
  482. html += ' <p class="cp_name">'+item.cpnNm+'</p>';
  483. html += ' <p class="cp_cont">';
  484. if (item.dcWay == '할인율') {
  485. html += ' <span> <span><em>'+item.dcPval+'%</em></span>';
  486. }else{
  487. html += ' <span><em>'+item.dcPval.addComma()+'</em>원</span>';
  488. }
  489. html += ' </p>';
  490. html += ' <p class="cp_condition">'+item.buyLimitAmt.addComma()+'원 이상 구매 시 최대 ' +item.maxDcAmt.addComma()+'원 할인';
  491. if (item.custPubLimitQty != 0) {
  492. html += ' <span>1인 최대 '+item.custPubLimitQty+'장</span>';
  493. }
  494. html += ' </p>';
  495. html += ' </div>';
  496. if(typeof item.couponStat != 'undefined'){
  497. if (item.couponStat == '쿠폰받기') {
  498. html += ' <button type="button" id="coupon_" class="btn btn_dark btn_block btn_coupon_down" onclick="fnPlanCouponDown('+item.cpnId+')">'; /* btn_coupon_done */
  499. html += ' <span>쿠폰받기</span>'; /* 받기완료 */
  500. html += ' </button>';
  501. }else{
  502. html += ' <button type="button"';
  503. html += ' class="btn btn_dark btn_block btn_coupon_done" disabled>';
  504. html += ' <span>받기완료</span>';
  505. html += ' </button>';
  506. }
  507. }else{
  508. html += ' <button type="button" id="coupon_" class="btn btn_dark btn_block btn_coupon_down" onclick="fnPlanCouponDown('+item.cpnId+')">'; /* btn_coupon_done */
  509. html += ' <span>쿠폰받기</span>'; /* 받기완료 */
  510. html += ' </button>';
  511. }
  512. html += ' </div>';
  513. html += ' <button type="button" class="btn_underline" id="btn_couponInfo_pop" onclick="useInfoCoupon('+item.cpnId+')">';
  514. html += ' <span>사용안내</span>';
  515. html += ' </button>';
  516. html += ' </li>';
  517. });
  518. html += ' </ul>';
  519. html += ' </div>';
  520. html += ' <div class="announce_txt">';
  521. html += ' <div class="note_txt">';
  522. html += ' <img src="/images/pc/ico_content_find.png" alt="유의사항">';
  523. html += ' <p>유의사항</p>';
  524. html += ' </div>';
  525. html += ' <div class="announce_list">';
  526. html += coupon[0].note;
  527. /* html += ' <ul>';
  528. html += ' <li>쿠폰 발급 기간 :'+ plan.dispStdt +'~'+ plan.dispEddt +'</li>';
  529. html += ' <li>본 쿠폰은 해당 기획전 상품에만 적용 가능합니다.</li>';
  530. html += ' <li>본 쿠폰은 해당 기획전 다운로드 버튼을 통해 발급받으실 수 있습니다.</li>';
  531. html += ' </ul>'; */
  532. html += ' </div>';
  533. html += ' </div>';
  534. html += '</div>';
  535. html += '</div>';
  536. $("#G082_20").append(html);
  537. }
  538. //사용안내 모달
  539. var useInfoCoupon = function (id) {
  540. $.ajax( {
  541. type : "GET",
  542. url : '/planning/coupon/detail?cpnId='+ id,
  543. dataType : 'html',
  544. success : function(result) {
  545. if (result != null) {
  546. $("#couponInfoPop").html(result);
  547. $("#couponInfoPop").modal("show");
  548. }
  549. }
  550. });
  551. return false;
  552. }
  553. //쿠폰 다운로드
  554. var fnPlanCouponDown = function(obj){
  555. if (!cfCheckLogin()) {
  556. cfnGoToPage(_PAGE_LOGIN);
  557. return false;
  558. }
  559. let cpnId = obj;
  560. gagajf.ajaxJsonSubmit(_PAGE_PLANNING_CPN_DOWNLOAD, JSON.stringify({cpnId: cpnId}), fnPlanCouponCallBack);
  561. }
  562. // 쿠폰다운로드 콜백
  563. var fnPlanCouponCallBack = function(result){
  564. // 화면 전환 필요
  565. }
  566. $(document).ready( function() {
  567. //공유 버튼 토글
  568. $("button[data-name=openShare]").on("click", function(){
  569. $(this).toggleClass("on").next(".shareWrap").toggleClass("on");
  570. return false;
  571. });
  572. //영역밖 클릭으로 공유토글 닫기
  573. $("body").on('click', function(e) {
  574. if(!$(".shareWrap.on").parent().has(e.target).length) {
  575. $("button[data-name=openShare]").removeClass("on");
  576. $(".shareWrap").removeClass("on");
  577. };
  578. });
  579. $('.btn_copy').bind('click', function() {
  580. copyToClipboard();
  581. });
  582. //팝업 - 쿠폰사용안내
  583. $(document).on('click','#btn_couponInfo_pop',function(e){
  584. $("#couponInfoPop .modal-content").load("popup_couponInfo.html");
  585. $("#couponInfoPop").modal("show");
  586. return false;
  587. });
  588. $("#couponInfoPop_close").click(function() {
  589. $.modal.close();
  590. });
  591. //팝업 - 상품 베스트 리뷰 (detail)
  592. $(document).on('click','#btn_pdBestReview_pop, .area_rv_best .best_review a',function(e){
  593. $("#pdBestReviewPop .modal-content").load("pd_bestreviewdetail_pop.html");
  594. $("#pdBestReviewPop").modal("show");
  595. return false;
  596. });
  597. $("#pdBestReviewPop_close").click(function() {
  598. $.modal.close();
  599. });
  600. /* SLIDE - 상단 프로모션 배너 */
  601. var promotion_visual_slide = new Swiper ('.dp_detail_visual .promotion_visual.type2 .swiper-container', {
  602. loop: true,
  603. slidesPerView: 1,
  604. speed : 1500,
  605. navigation: {
  606. nextEl: '.promotion_visual.type2 .swiper-button-next',
  607. prevEl: '.promotion_visual.type2 .swiper-button-prev',
  608. },
  609. pagination: {
  610. el: '.promotion_visual.type2 .swiper-pagination',
  611. clickable: true,
  612. },
  613. });
  614. /* SLIDE - 중간 배너 */
  615. var mid_banner_slide = new Swiper ('.dp_mid_banner .mid_banner .swiper-container', {
  616. loop: true,
  617. slidesPerView: 1,
  618. speed : 1500,
  619. navigation: {
  620. nextEl: '.mid_banner .swiper-button-next',
  621. prevEl: '.mid_banner .swiper-button-prev',
  622. },
  623. pagination: {
  624. el: '.mid_banner .swiper-pagination',
  625. clickable: true,
  626. },
  627. });
  628. /* SLIDE - 대표상품 슬라이드 2열 상품 */
  629. var dp_listItems_slide1 = new Swiper ('.dp_listItems_cont.type2 .swiper-container', {
  630. loop: false,
  631. slidesPerView: 2,
  632. slidesPerGroup: 2,
  633. spaceBetween: 20,
  634. speed : 800,
  635. navigation: {
  636. nextEl: '.dp_listItems_cont.type2 .swiper-button-next',
  637. prevEl: '.dp_listItems_cont.type2 .swiper-button-prev',
  638. },
  639. pagination: {
  640. el: '.dp_listItems_cont.type2 .swiper-pagination',
  641. clickable: true,
  642. },
  643. });
  644. /* SLIDE - 대표상품 슬라이드 4열 상품 */
  645. var dp_listItems_slide2 = new Swiper ('.dp_listItems_cont.type3 .swiper-container', {
  646. loop: false,
  647. slidesPerView: 4,
  648. slidesPerGroup: 4,
  649. spaceBetween: 20,
  650. speed : 800,
  651. navigation: {
  652. nextEl: '.dp_listItems_cont.type3 .swiper-button-next',
  653. prevEl: '.dp_listItems_cont.type3 .swiper-button-prev',
  654. },
  655. pagination: {
  656. el: '.dp_listItems_cont.type3 .swiper-pagination',
  657. clickable: true,
  658. },
  659. });
  660. /* SLIDE - 다른 기획전 보기 */
  661. var other_dp_slide_slide = new Swiper ('.other_dp_slide .swiper-container', {
  662. slidesPerView: 5,
  663. spaceBetween: 20,
  664. navigation: {
  665. nextEl: '.other_dp_slide .swiper-button-next',
  666. prevEl: '.other_dp_slide .swiper-button-prev',
  667. },
  668. });
  669. });
  670. </script>
  671. </th:block>
  672. </body>
  673. </html>