MallMainFormMob.html 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187
  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/DefaultLayoutMob">
  6. <!--
  7. *******************************************************************************
  8. * @source : MallMainFormMob.html
  9. * @desc : 몰메인 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.03.10 gagamel 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <main role="" id="" class="container">
  22. <section class="main">
  23. <th:block th:if="${mainLayoutList}" th:each="mainData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainData.contentsLoc,'SMM','')},contentsTitle=${#strings.replace(mainData.contentsTitle,'<br>',' ')}">
  24. <!-- <th:block th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">-->
  25. <th:block th:if="${contentsLoc=='001'}">
  26. <!-- 1. 비주얼 슬라이드 -->
  27. <div class="inner wide" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
  28. <div class="main_visual">
  29. <div class="swiper-container post-visual">
  30. <div class="swiper-wrapper">
  31. <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
  32. <div class="swiper-slide">
  33. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
  34. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
  35. <div class="txtWrap">
  36. <dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
  37. <dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}">NBA</dt>
  38. <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E'}">EVENT</dt>
  39. <dd class="mainTitle">
  40. <input type="hidden" name="mainTitlee" th:value="${ContentsData.strTitle1}"/>
  41. </dd>
  42. <!-- <dd>NEW ARRIVAL</dd>-->
  43. <dd class="txt_xs mainSubTitle" th:text="${ContentsData.subText1}">
  44. <!-- <input type="hidden" name="mainSubTitlee" th:value="${ContentsData.subText1}"/>-->
  45. </dd>
  46. </dl>
  47. </div>
  48. </a>
  49. </div>
  50. </th:block>
  51. </div>
  52. <!-- Add Pagination -->
  53. <div class="swiper-pagination"></div>
  54. </div>
  55. </div>
  56. </div>
  57. </th:block>
  58. <th:block th:if="${contentsLoc=='002'}">
  59. <!-- 2. 스타일리포트 -->
  60. <div class="inner bg_gray" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
  61. <div class="main_stylereport">
  62. <th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
  63. <div class="titWrap">
  64. <h2 th:text="${mainData.contentsTitle}"></h2>
  65. </div>
  66. </th:block>
  67. <div class="swiper-container post-stylereport">
  68. <div class="swiper-wrapper">
  69. <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
  70. <div class="swiper-slide styleArea" th:if="${ContentsStat.count<5}">
  71. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
  72. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
  73. <dl>
  74. <dt class="styleTitleC">
  75. <input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
  76. </dt>
  77. <dd class="styleNoteC">
  78. <input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
  79. </dd>
  80. <!-- <dd>준비한 아우터 픽을 만나보자</dd>-->
  81. </dl>
  82. </a>
  83. </div>
  84. </th:block>
  85. </div>
  86. <!-- Add Pagination -->
  87. <div class="swiper-pagination"></div>
  88. </div>
  89. </div>
  90. </div>
  91. </th:block>
  92. <th:block th:if="${contentsLoc=='003'}">
  93. <!-- 3. 트렌디한 신상아이템 -->
  94. <div class="inner" th:if="${mainData.goodsList != null}">
  95. <div class="main_trendy">
  96. <th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
  97. <div class="titWrap">
  98. <h2 th:text="${mainData.contentsTitle}"></h2>
  99. </div>
  100. </th:block>
  101. <div class="swiper-container post-trendy">
  102. <div class="swiper-wrapper">
  103. <th:block th:each="goodsData, goodsStat : ${mainData.goodsList}">
  104. <th:block th:if="${(goodsStat.index%4)==0 or goodsStat.first}">
  105. <div class="swiper-slide">
  106. </th:block>
  107. <div class="item_prod">
  108. <div class="item_state">
  109. <button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
  110. <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
  111. <div class=" itemPic">
  112. <!-- <img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg"> onerror="img_check(this)"-->
  113. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  114. <iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
  115. <iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
  116. </th:block>
  117. <img alt="BLUE-a" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)" >
  118. </div>
  119. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
  120. <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
  121. <div class=" itemName" th:text="${goodsData.goodsFullNm}">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>
  122. <!-- <p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">488,000</p>-->
  123. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
  124. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  125. <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${(goodsData.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsData.listPrice - goodsData.currPrice) / (goodsData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
  126. </p>
  127. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">
  128. [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~
  129. </p>
  130. </a>
  131. </div>
  132. </div>
  133. <th:block th:if="${(goodsStat.index%4)== 3 or goodsStat.last}">
  134. <th:block th:utext="'</div>'"></th:block>
  135. </th:block>
  136. </th:block>
  137. </div>
  138. <!-- Add Pagination -->
  139. <div class="swiper-pagination"></div>
  140. </div>
  141. </div>
  142. </div>
  143. </th:block>
  144. <th:block th:if="${contentsLoc=='004' and !mainData.BestItemList.empty}">
  145. <!-- 4. 잇 아이템 -->
  146. <div class="inner">
  147. <div class="main_it">
  148. <div class="titWrap">
  149. <!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
  150. <a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_BEST_MAIN);">
  151. <h2 th:text="${mainData.contentsTitle.replace('<br>','')}"></h2>
  152. </a>
  153. <!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
  154. </div>
  155. <div class="inner_head">
  156. <ul class="it_nav">
  157. <th:block th:each="ContentsData, ContentsStat : ${mainData.BestItemList}">
  158. <li><button class="btn btn_link" th:attr="data-tab=${'it'+ContentsStat.count}"><span th:text="${ContentsData.cateNm}">여성</span></button></li>
  159. </th:block>
  160. </ul>
  161. </div>
  162. <div class="inner_body">
  163. <th:block th:each="ContentsData, ContentsStat : ${mainData.BestItemList}">
  164. <div class="swiper-container post-it it_item" th:id="${'it'+ContentsStat.count}">
  165. <div class="swiper-wrapper" >
  166. <th:block th:each="bestItemData, bestItemStat : ${ContentsData.goodsList}">
  167. <div class="swiper-slide">
  168. <div class="item_prod">
  169. <div class="item_state">
  170. <button type="button" class="itemLike" th:classappend="${bestItemData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${bestItemData.goodsCd}, goodsNm=${bestItemData.goodsFullNm}, ithrCd='', contentsLoc='SMM004', planDtlSq=''">관심상품 추가</button>
  171. <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${bestItemData.goodsCd}]], '', '', 'SMM004');">
  172. <div class="shape" th:classappend="${bestItemStat.count==1}?'ranker'">
  173. <span><em class="number" th:text="${bestItemStat.count}">1</em></span>
  174. </div>
  175. <div class="itemPic">
  176. <th:block th:each="option,idx:${bestItemData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  177. <iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
  178. <iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
  179. </th:block>
  180. <!-- 2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
  181. <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == -1">
  182. <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
  183. </th:block>
  184. <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == 0">
  185. <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('https://image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
  186. </th:block>
  187. <!-- //2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
  188. </div>
  189. <p class="itemBrand" th:text="${bestItemData.brandGroupNm}">TBJ</p>
  190. <div class="itemComment" th:if="${not #strings.isEmpty(bestItemData.goodsTnm)}" th:text="${bestItemData.goodsTnm}"># 가을 느낌 물씬!</div>
  191. <div class="itemName" th:text="${bestItemData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  192. <p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">
  193. <span class="itemPrice_original" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${#numbers.formatInteger(bestItemData.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]]
  194. <span class=" itemPercent" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${(bestItemData.listPrice == 0 ? 0 : #numbers.formatDecimal((bestItemData.listPrice - bestItemData.currPrice) / (bestItemData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
  195. </p>
  196. <p th:if="${bestItemData.goodsType=='G056_D'}" class="itemPrice">
  197. [[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]] ~
  198. </p>
  199. </a>
  200. </div>
  201. </div>
  202. </div>
  203. </th:block>
  204. </div>
  205. </div>
  206. </th:block>
  207. </div>
  208. </div>
  209. </div>
  210. </th:block>
  211. <th:block th:if="${contentsLoc=='005' and !mainData.ContentsList.empty}">
  212. <!-- 5. 프로모션배너 -->
  213. <div class="inner wide">
  214. <div class="main_2stage">
  215. <div class="swiper-container post-bnnEvent">
  216. <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
  217. <th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
  218. <div class="swiper-wrapper" th:if="${ContentsData.contentsType=='1'}">
  219. <div class="swiper-slide">
  220. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
  221. <div class="bnnbox" style="background:#e3e7ea;">
  222. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
  223. </div>
  224. </a>
  225. </div>
  226. </div>
  227. <div class="swiper-wrapper" th:if="${ContentsData.contentsType=='2'}">
  228. <div class="swiper-slide">
  229. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
  230. <div class="bnnbox" style="background:#e3e7ea;">
  231. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
  232. </div>
  233. </a>
  234. </div>
  235. <div class="swiper-slide">
  236. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar2}]]);">
  237. <div class="bnnbox" style="background:#eef1f3;">
  238. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
  239. </div>
  240. </a>
  241. </div>
  242. </div>
  243. </th:block>
  244. </th:block>
  245. <!-- Add Pagination -->
  246. <div class="swiper-pagination"></div>
  247. </div>
  248. </div>
  249. </div>
  250. </th:block>
  251. <th:block th:if="${contentsLoc=='006'}">
  252. <!-- 6. 타임딜 : 슬라이드 -->
  253. <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
  254. <div class="inner bg_dark" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
  255. <div class="main_deal">
  256. <div class="titWrap">
  257. <a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);">
  258. <h2 th:text="${contentsTitle}"></h2>
  259. </a>
  260. <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
  261. <form name="socailForm" id="socailForm">
  262. <input type="hidden" name="targetTime" th:value="${socialData.socialEddt}">
  263. </form>
  264. </th:block>
  265. <div class="count">
  266. <span class="count_tit">남은 시간</span>
  267. <div class="hotdealcount" id="countdown">
  268. <div id="tiles"></div>
  269. </div>
  270. </div>
  271. </div>
  272. <div class="swiper-container post-deal">
  273. <div class="swiper-wrapper" >
  274. <!-- <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">-->
  275. <th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
  276. <div class="swiper-slide" th:if="${goodsStat.count<21}">
  277. <div class="item_prod" style="width:100%">
  278. <div class="item_state">
  279. <button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsNm}, ithrCd='', contentsLoc='SMM006', planDtlSq=''">관심상품 추가</button>
  280. <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM006');">
  281. <div class="itemPic">
  282. <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  283. </div>
  284. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">TBJ</p>
  285. <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
  286. <div class="itemName" th:text="${goodsData.goodsNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  287. <p class="itemPrice">
  288. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,0,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  289. <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'">10%</span>
  290. </p>
  291. </a>
  292. </div>
  293. </div>
  294. </div>
  295. </th:block>
  296. <!-- </th:block>-->
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </th:block>
  302. </th:block>
  303. <th:block th:if="${contentsLoc=='007'}">
  304. <!-- 7. 브랜드픽 -->
  305. <div class="inner" th:if="${!mainData.brandPickList.empty}">
  306. <div class="main_pick">
  307. <div class="titWrap">
  308. <h2 th:text="${contentsTitle}"></h2>
  309. </div>
  310. <div class="inner_head">
  311. <div class="swiper-container pick-head"> <!--(pick-head)슬라이드 키클래스-->
  312. <ul class="swiper-wrapper">
  313. <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
  314. <li class="swiper-slide" th:classappend="${ContentsStat.count==1}?'on'"> <!-- li.on / li .btn.active : 메뉴 표시 -->
  315. <button class="btn btn_link" th:id="${'pickBtn'+ContentsStat.count}" th:attr="data-tab=${'pick'+ContentsStat.count}"><span th:text="${ContentsData.brandGroupNm}">BUKAROO</span></button>
  316. </li>
  317. </th:block>
  318. </ul>
  319. </div>
  320. </div>
  321. <div class="inner_body">
  322. <th:block th:each="brandPickData, brandPickStat : ${mainData.brandPickList}">
  323. <div class="pick-cont" th:classappend="${brandPickStat.count==1}?'active'" th:id="${'pick'+brandPickStat.count}"> <!-- .pick-cont.active : 컨텐츠 표시 -->
  324. <!-- 210329 : 브랜드 pick 슬라이드 추가 -->
  325. <div class="swiper-container">
  326. <div class="swiper-wrapper" id="id007">
  327. <th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
  328. <div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
  329. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${bannerData.strVar1}]]);"><!-- 해당 배너 상세 이동 -->
  330. <div class="txtWrap">
  331. <p class="title">
  332. <input type="hidden" name="title" th:value="${bannerData.strTitle1}">
  333. </p>
  334. <span th:text="${bannerData.subText1}">2020 FALL/WINTER 신상살펴보기</span>
  335. </div>
  336. <img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="">
  337. </a>
  338. </div>
  339. </th:block>
  340. </div>
  341. </div>
  342. <!-- //210329 : 브랜드 pick 슬라이드 추가 -->
  343. <!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
  344. <div class="pick-post"><!-- (pick-post)슬라이드 키클래스(해당 배너 관련 상품) -->
  345. <th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
  346. <div class="item_prod" th:if="${goodsStat.count<4}">
  347. <div class="item_state">
  348. <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM007');">
  349. <div class="itemPic">
  350. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  351. <iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
  352. <iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
  353. </th:block>
  354. <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  355. </div>
  356. <div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  357. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">35,900</p>
  358. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA') + ' ~'}"></p>
  359. </a>
  360. </div>
  361. </div>
  362. </th:block>
  363. </div> <!--pick-post 종료 -->
  364. <!-- 210524 : pick-post 형제로 버튼그룹 이동 -->
  365. <div class="btn_group_flex">
  366. <div>
  367. <button class="btn btn_default" th:onclick="fnNextBrand([[${brandPickStat.size}]],[[${brandPickStat.count}]])">다음 브랜드 보기<span></span></button>
  368. </div>
  369. </div>
  370. <!-- //210329 : 브랜드 pick 상품 swiper 제거 -->
  371. <!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
  372. </div>
  373. </th:block>
  374. </div>
  375. </div>
  376. </div>
  377. </th:block>
  378. <th:block th:if="${contentsLoc=='008' and !mainData.ContentsList.empty}">
  379. <!-- 8. 가로 긴 배너 슬라이드 -->
  380. <div class="inner wide">
  381. <div class="main_1stage">
  382. <div class="swiper-container post-bnnWide">
  383. <div class="swiper-wrapper">
  384. <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
  385. <div class="swiper-slide silderBannerArea">
  386. <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
  387. <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
  388. <div class="bnnbox" style="background:#bdc3c7;">
  389. <div class="txtWrap bannerNote">
  390. <p class="noteArea">
  391. <input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
  392. </p>
  393. <!-- <p>아우터 + 이너 단독세일</p>-->
  394. </div>
  395. <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
  396. </div>
  397. </a>
  398. </th:block>
  399. </div>
  400. </th:block>
  401. </div>
  402. <!-- Add Pagination -->
  403. <div class="swiper-pagination"></div>
  404. </div>
  405. </div>
  406. </div>
  407. </th:block>
  408. <th:block th:if="${contentsLoc=='009'}">
  409. <!-- 9. MD추천 스타일 -->
  410. <div class="inner">
  411. <div class="main_recomm">
  412. <div class="titWrap">
  413. <h2 th:text="${contentsTitle}">MD가 추천하는 스타일</h2>
  414. </div>
  415. <div class="inner_head">
  416. <div class="swiper-container recomm-head"> <!--(recomm-head)슬라이드 키클래스-->
  417. <ul class="swiper-wrapper">
  418. <th:block th:each="titleData, titleStat : ${mainData.mdPickList}" >
  419. <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
  420. <li class="swiper-slide"> <!-- li .btn.active : 메뉴 표시 --><!--data-filter 사용 안하시면 제거하셔도 좋습니다-->
  421. <button class="btn btn_link" th:classappend="${titleStat.count==1}?'active'" th:attr="data-tab=${'recomm'+titleStat.count}" data-filter="tag_warm"><span th:text="${titleData.mdTitle}">따뜻한 무드</span></button>
  422. </li>
  423. </th:block>
  424. </th:block>
  425. </ul>
  426. </div>
  427. </div>
  428. <th:block th:each="titleData, titleStat : ${mainData.mdPickList}">
  429. <div class="inner_body">
  430. <div class="swiper-container recomm-post recomm_item" th:classappend="${titleStat.count==1}?'active'" th:id="${'recomm'+titleStat.count}">
  431. <div class="swiper-wrapper" >
  432. <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}">
  433. <th:block th:each="goodsData, goodsStat : ${titleData.goodsList}">
  434. <div class="swiper-slide">
  435. <div class="item_prod">
  436. <div class="item_state">
  437. <button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM009', planDtlSq=''">관심상품 추가</button>
  438. <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM009');">
  439. <div class="itemPic">
  440. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  441. <iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
  442. <iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
  443. </th:block>
  444. <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  445. </div>
  446. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">TBJ</p>
  447. <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
  448. <div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  449. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
  450. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  451. <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${(goodsData.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsData.listPrice - goodsData.currPrice) / (goodsData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
  452. </p>
  453. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">
  454. [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~
  455. </p>
  456. </a>
  457. </div>
  458. </div>
  459. </div>
  460. </th:block>
  461. </th:block>
  462. </div>
  463. <!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->
  464. </div>
  465. </div>
  466. </th:block>
  467. </div>
  468. </div>
  469. </th:block>
  470. <th:block th:if="${contentsLoc=='010'}">
  471. <!-- 10. 당신을 위한 제안 -->
  472. <div class="inner wide">
  473. <div class="main_foryou">
  474. <div class="titWrap">
  475. <h2 th:text="${mainData.contentsTitle}">당신을 위한 제안</h2>
  476. </div>
  477. <div class="swiper-container post-sug">
  478. <div class="swiper-wrapper" id="recomItemArea">
  479. </div>
  480. <!-- Add Pagination -->
  481. <div class="swiper-pagination"></div>
  482. </div>
  483. </div>
  484. </div>
  485. </th:block>
  486. <th:block th:if="${contentsLoc=='011'}">
  487. <!-- 11. TV 슬라이드 -->
  488. <div class="inner wide bg_dark" th:if="${mainData.ContentsList != null}">
  489. <div class="titWrap">
  490. <h2 data-style="unusual" th:text="${mainData.contentsTitle}">STYLE24 TV</h2>
  491. </div>
  492. <div class="main_tv" >
  493. <div class="swiper-container post-tv">
  494. <div class="swiper-wrapper ">
  495. <div class="swiper-slide" th:each="item, stat : ${mainData.ContentsList}">
  496. <div class="movbox">
  497. <iframe th:if="${item.strVar1=='Y'}" width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+item.strVar2+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  498. <iframe th:if="${item.strVar1=='M'}" class="pd_mov" th:src="${kollusMediaUrl+'/'+item.strVar2+'?enable_initialize_focus=false'}" allowfullscreen></iframe>
  499. <!-- <iframe width="100%" height="100%" src="https://www.youtube.com/embed/hGjFwebN5ks" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
  500. </div>
  501. </div>
  502. </div>
  503. <div class="swiper-pagination"></div>
  504. </div>
  505. </div>
  506. </div>
  507. <!-- </th:block>-->
  508. </th:block>
  509. </th:block>
  510. </section>
  511. </main>
  512. <script th:inline="javascript">
  513. /*<![CDATA[*/
  514. var targetTime = '';
  515. if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
  516. targetTime = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
  517. }
  518. if(targetTime != null && targetTime != ''){
  519. /* 핫딜 countDown */
  520. var endTime = new Date(targetTime); // 남은시간 지정
  521. endTime = (Date.parse(endTime) / 1000);
  522. var countdown = document.getElementById("tiles"); // get tag element
  523. getCountdown();
  524. setInterval(function () { getCountdown(); }, 1000);
  525. function getCountdown(){
  526. // find the amount of "seconds" between now and target
  527. var now = new Date();
  528. now = (Date.parse(now) / 1000);
  529. var timeLeft = endTime - now;
  530. var days = Math.floor(timeLeft / 86400);
  531. var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  532. var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  533. var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  534. if (hours < '10') { hours = '0' + hours; }
  535. if (minutes < '10') { minutes = '0' + minutes; }
  536. if (seconds < '10') { seconds = '0' + seconds; }
  537. // format countdown string + set tag value
  538. countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
  539. }
  540. function pad(n) {
  541. return (n < 10 ? '0' : '') + n;
  542. }
  543. }
  544. // 스크립트 제거
  545. function fnRemoveHTML(text){
  546. var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
  547. reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
  548. reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
  549. return reText;
  550. }
  551. // 컨텐츠 호출
  552. $(document).ready(function() {
  553. // 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
  554. /*
  555. var pcId = gagajf.getCookie("RB_PCID");
  556. 20210927 xodud1202 > 수빈과장님 요청
  557. fnGetEigenApi(pcId); */
  558. post_visual.slideTo(2, 0, false); // 접속 시, 슬라이드페이지 이동
  559. // 몰메인 띠배너 표출
  560. $("#divTopbanner").show();
  561. setHtop();
  562. let randomNum = Math.floor( ( Math.random() * 4 ) );
  563. $(".it_nav .btn").eq(randomNum).trigger('click');
  564. // 몰메인 <br> 태그
  565. $('.mainTitle').each(function (){
  566. var brText = $(this).find("input[name=mainTitlee]").val();
  567. let tag = fnRemoveHTML(brText);
  568. $(this).append(tag);
  569. });
  570. // 몰메인 <br> 태그
  571. // $('.mainSubTitle').each(function (){
  572. // var brText = $(this).find("input[name=mainSubTitlee]").val();
  573. // let tag = fnRemoveHTML(brText);
  574. // $(this).append(tag);
  575. // });
  576. // 브랜드픽 <br> 태그
  577. $('#id007 .title').each(function (){
  578. var brText = $(this).find("input[name=title]").val();
  579. let tag = fnRemoveHTML(brText);
  580. $(this).append(tag);
  581. });
  582. // 가로긴배너 슬라이드
  583. $('.silderBannerArea').each(function (){
  584. let tag = '';
  585. if(!gagajf.isNull($(this).find("input[name=bannerNote]").val())) {
  586. var noteText = $(this).find("input[name=bannerNote]").val();
  587. tag = fnRemoveHTML(noteText);
  588. $(this).find('.noteArea').append(tag);
  589. }
  590. });
  591. // 스타일리포트 <br> 태그
  592. $('.styleArea').each(function (){
  593. let tag = '';
  594. let tag2 = '';
  595. if(!gagajf.isNull($(this).find("input[name=styleTitle]").val())) {
  596. var titleText = $(this).find("input[name=styleTitle]").val();
  597. tag = fnRemoveHTML(titleText);
  598. $(this).find('.styleTitleC').append(tag);
  599. }
  600. if(!gagajf.isNull($(this).find("input[name=styleNote]").val())) {
  601. var noteText = $(this).find("input[name=styleNote]").val();
  602. tag2 = fnRemoveHTML(noteText);
  603. $(this).find('.styleNoteC').append(tag2);
  604. }
  605. });
  606. });
  607. function setHtop() {
  608. if($('header').hasClass('main')) {
  609. $('#htopMain').show();
  610. $('#htopSub').hide();
  611. } else {
  612. $('#htopMain').hide();
  613. $('#gnb').hide();
  614. $('#htopSub').show();
  615. }
  616. }
  617. var fnNextBrand = function (tot, idx){
  618. if(tot == idx){
  619. $("#pickBtn1").click();
  620. }else{
  621. $("#pickBtn"+(idx+1)).click();
  622. }
  623. }
  624. /**
  625. * EigenApi
  626. * size : 상품수
  627. * nh : 키워드수
  628. * */
  629. var fnGetEigenApi = function (id){
  630. $.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
  631. var keywordTag = '';
  632. var itemTag = '';
  633. let dataJson = result.groupedResults;
  634. let key1 = Object.keys(dataJson);
  635. if (status === 'success') {
  636. if (!gagajf.isNull(result.products) && result.products.length > 0) {
  637. $("#recomItemArea").html('');
  638. $.each(result.products, function (idx, item) {
  639. if (idx == 0 || idx == 5) {
  640. itemTag += '<div class="swiper-slide';
  641. if(idx==0){
  642. itemTag += ' type1';
  643. }else{
  644. itemTag += ' type2';
  645. }
  646. itemTag += ' ">\n';
  647. itemTag += ' <ol class="list_cate">\n';
  648. }
  649. itemTag += ' <li class="first" id="key'+idx+'" data-idx="'+idx+'">\n';
  650. itemTag += ' <dl>\n';
  651. itemTag += ' <dt>\n';
  652. itemTag += ' <button>\n';
  653. itemTag += ' <span class="fold_rank">'+(idx+1)+'</span>\n';
  654. itemTag += ' <span class="fold_txt">'+ item.sourceId + '</span>\n';
  655. itemTag += ' </button>\n';
  656. itemTag += ' </dt>\n';
  657. itemTag += ' <dd>\n';
  658. itemTag += ' <div class="swiper-container post-sug-items">\n';
  659. itemTag += ' <div class="swiper-wrapper">\n';
  660. for (var i=0; i<key1.length; i++) {
  661. var key = key1[i];
  662. if(item.sourceId == key){
  663. $.each(dataJson[key], function (keyIdx, keyItem){
  664. itemTag += ' <div class="swiper-slide">\n';
  665. itemTag += ' <div class="item_prod">\n';
  666. itemTag += ' <div class="item_state">\n';
  667. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink">\n';
  668. itemTag += ' <div class="itemPic">\n';
  669. itemTag += ' <img alt="" class=" pd_img" src="'+keyItem.product.itemImage+'">\n';
  670. itemTag += ' </div>\n';
  671. itemTag += ' <div class="itemName">'+keyItem.product.itemName+'</div>\n';
  672. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  673. itemTag += ' </a>\n';
  674. itemTag += ' </div>\n';
  675. itemTag += ' </div>\n';
  676. itemTag += ' </div>\n';
  677. });
  678. //if(i == key1.length-1){
  679. itemTag += ' <div class="swiper-slide">\n';
  680. itemTag += ' <div class="item_prod">\n';
  681. itemTag += ' <div class="item_state">\n';
  682. itemTag += ' <a href="javascript:void(0)" class="itemLink" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">\n';
  683. itemTag += ' <div class="itemPic">\n';
  684. itemTag += ' <span class="more_txt">더보기</span>\n';
  685. itemTag += ' </div>\n';
  686. itemTag += ' </a>\n';
  687. itemTag += ' </div>\n';
  688. itemTag += ' </div>\n';
  689. itemTag += ' </div>\n';
  690. //}
  691. }
  692. }
  693. itemTag += ' </div>\n';
  694. itemTag += ' </div>\n';
  695. itemTag += ' </dd>\n';
  696. itemTag += ' </dl>\n';
  697. itemTag += ' </li>\n';
  698. if (idx == 4 || idx == 9) {
  699. itemTag += ' </ol>\n';
  700. itemTag += '</div>\n';
  701. }
  702. });
  703. if(itemTag.indexOf('swiper-slide') >-1 ){
  704. $("#recomItemArea").html(itemTag);
  705. fnSwiperScript();
  706. }
  707. }
  708. }
  709. });
  710. }
  711. /*]]>*/
  712. </script>
  713. <script type="text/javascript">
  714. var fnSwiperScript = function (){
  715. // post_sug
  716. var numCnt = 0;
  717. var post_sug = new Swiper('.swiper-container.post-sug', {
  718. a11y: {
  719. enabled: true,
  720. notificationClass: 'swiper-notification',
  721. prevSlideMessage: '이전 슬라이드',
  722. nextSlideMessage: '다음 슬라이드',
  723. firstSlideMessage: '첫번째 슬라이드 입니다',
  724. lastSlideMessage: '마지막 슬라이드 입니다',
  725. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  726. },
  727. pagination: {
  728. el: '.swiper-pagination',
  729. },
  730. // autoplay: {
  731. // delay: 24700,
  732. // disableOnInteraction: false,
  733. // },
  734. on : {
  735. slideChange: function(){
  736. foryouIndex = 0;
  737. if(numCnt === 0){
  738. $(".swiper-slide.type1 .list_cate > li").removeClass('on');
  739. $(".swiper-slide.type2 .list_cate > li").removeClass('on');
  740. $(".swiper-slide.type2 .list_cate .first").addClass('on');
  741. numCnt = 1;
  742. } else {
  743. $(".swiper-slide.type1 .list_cate > li").removeClass('on');
  744. $(".swiper-slide.type2 .list_cate > li").removeClass('on');
  745. $(".swiper-slide.type1 .list_cate .first").addClass('on');
  746. numCnt = 0;
  747. }
  748. }
  749. },
  750. });
  751. var foryouIndex = 0;
  752. var cntNum = 0;
  753. function foryouInterval(_foryouIndex) {
  754. var foryouCateItems1 = $(".main_foryou .post-sug .swiper-slide.type1.swiper-slide-active .list_cate li");
  755. var foryouCateItems2 = $(".main_foryou .post-sug .swiper-slide.type2.swiper-slide-active .list_cate li");
  756. $(".main_foryou .post-sug .swiper-slide.type1 .list_cate li").removeClass("on");
  757. $(".main_foryou .post-sug .swiper-slide.type2 .list_cate li").removeClass("on");
  758. if($(".main_foryou .post-sug .swiper-slide.type1").hasClass("swiper-slide-active")){
  759. $(foryouCateItems1[(_foryouIndex ) % 5]).addClass("on");
  760. if (_foryouIndex >= 5) foryouIndex = 0;
  761. foryouIndex++;
  762. (foryouCateItems1).click(function () {
  763. foryouIndex = $(this).index();
  764. clearInterval(stopInter);
  765. stopInter = startTimeInterval();
  766. });
  767. }
  768. if($(".main_foryou .post-sug .swiper-slide.type2").hasClass("swiper-slide-active")){
  769. $(foryouCateItems2[(_foryouIndex ) % 5]).addClass("on");
  770. if (_foryouIndex >= 5) foryouIndex = 0;
  771. foryouIndex++;
  772. $(foryouCateItems2).click(function () {
  773. foryouIndex = $(this).index();
  774. clearInterval(stopInter);
  775. stopInter = startTimeInterval();
  776. });
  777. }
  778. }
  779. function startTimeInterval(){
  780. return setInterval(function () {
  781. foryouInterval(foryouIndex);
  782. }, 5000);
  783. }
  784. var stopInter = startTimeInterval();
  785. //setTimeout(function () {
  786. // foryouInterval(foryouIndex);
  787. // if (foryouIndex >= 5) foryouIndex = 0;
  788. // foryouIndex++;
  789. //}, 2000);
  790. var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
  791. autoHeight: true, //210720_ 추가
  792. slidesPerView: 3,
  793. spaceBetween: 10,
  794. speed : 1000,
  795. a11y: {
  796. enabled: true,
  797. notificationClass: 'swiper-notification',
  798. prevSlideMessage: '이전 슬라이드',
  799. nextSlideMessage: '다음 슬라이드',
  800. firstSlideMessage: '첫번째 슬라이드 입니다',
  801. lastSlideMessage: '마지막 슬라이드 입니다',
  802. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  803. },
  804. });
  805. }
  806. </script>
  807. <script type="text/javascript">
  808. //210624_ 추가 : 슬라이드 속성 추가.
  809. // post-visual
  810. // 비주얼 슬라이드 카운팅
  811. var pickvisualCont = $('.post-visual .swiper-slide');
  812. var pickvisualLength = pickvisualCont.length;
  813. if (pickvisualLength < 2) {
  814. // $(".main_visual .swiper-pagination").css({"display": "none"});
  815. var post_visual = new Swiper('.swiper-container.post-visual', {
  816. autoplay: false,
  817. loop:false,
  818. speed:1000,
  819. // pagination: false,
  820. a11y: {
  821. enabled: true,
  822. notificationClass: 'swiper-notification',
  823. prevSlideMessage: '이전 슬라이드',
  824. nextSlideMessage: '다음 슬라이드',
  825. firstSlideMessage: '첫번째 슬라이드 입니다',
  826. lastSlideMessage: '마지막 슬라이드 입니다',
  827. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  828. },
  829. pagination: {
  830. el: '.swiper-pagination',
  831. type: 'fraction',
  832. },
  833. });
  834. } else {
  835. var post_visual = new Swiper('.swiper-container.post-visual', {
  836. slideTo: 2,
  837. speed:1000,
  838. autoplay: {
  839. delay: 3000,
  840. disableOnInteraction: false,
  841. },
  842. loop:true,
  843. pagination: {
  844. el: '.swiper-pagination',
  845. type: 'fraction',
  846. },
  847. });
  848. }
  849. // post-trendy
  850. var post_trendy = new Swiper('.swiper-container.post-trendy', {
  851. speed:1000,
  852. a11y: {
  853. enabled: true,
  854. notificationClass: 'swiper-notification',
  855. prevSlideMessage: '이전 슬라이드',
  856. nextSlideMessage: '다음 슬라이드',
  857. firstSlideMessage: '첫번째 슬라이드 입니다',
  858. lastSlideMessage: '마지막 슬라이드 입니다',
  859. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  860. },
  861. pagination: {
  862. el: '.swiper-pagination',
  863. },
  864. });
  865. // post-it
  866. var post_it = new Swiper('.swiper-container.post-it', {
  867. slidesPerView: 2.22,
  868. spaceBetween: 8,
  869. observer: true,
  870. observeParents: true,
  871. speed : 1000,
  872. freeMode: true,
  873. autoplay: false,
  874. });
  875. $(".it_nav .btn").click(function(){
  876. var itActive = $(this).attr('data-tab');
  877. $(".it_nav .btn").removeClass('active');
  878. $(".it_item").removeClass('active');
  879. $(this).addClass('active');
  880. $('#'+itActive).addClass('active');
  881. });
  882. // post-stylereport
  883. var post_stylereport = new Swiper('.swiper-container.post-stylereport', {
  884. slidesPerView: 1,
  885. speed:1000,
  886. a11y: {
  887. enabled: true,
  888. notificationClass: 'swiper-notification',
  889. prevSlideMessage: '이전 슬라이드',
  890. nextSlideMessage: '다음 슬라이드',
  891. firstSlideMessage: '첫번째 슬라이드 입니다',
  892. lastSlideMessage: '마지막 슬라이드 입니다',
  893. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  894. },
  895. pagination: {
  896. el: '.swiper-pagination',
  897. },
  898. spaceBetween: 8,
  899. });
  900. //post-deal
  901. var post_deal = new Swiper('.swiper-container.post-deal', {
  902. slidesPerView: 2.22,
  903. spaceBetween: 8,
  904. observer: true,
  905. observeParents: true,
  906. speed : 1000,
  907. freeMode: true,
  908. autoplay: false,
  909. });
  910. //post-pick
  911. //post-pick-head
  912. var Head_pick = new Swiper(".pick-head", {
  913. slidesPerView: "auto",
  914. spaceBetween: 0,
  915. autoHeight: true,
  916. preventClicks: true,
  917. preventClicksPropagation: false,
  918. observer: true,
  919. observeParents: true
  920. });
  921. var $pickHd = $('.pick-head .swiper-wrapper .swiper-slide .btn');
  922. $pickHd.click(function(){
  923. var target = $(this).parent();
  924. $pickHd.parent().removeClass('on')
  925. target.addClass('on');
  926. muCenter(target);
  927. })
  928. function muCenter(target){
  929. var snbwrap = $('.pick-head .swiper-wrapper');
  930. var targetPos = target.position();
  931. var box = $('.pick-head');
  932. var boxHarf = box.width()/2;
  933. var pos;
  934. var listWidth=0;
  935. snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
  936. var selectTargetPos = targetPos.left + target.outerWidth()/2;
  937. if (selectTargetPos <= boxHarf) { // left
  938. pos = 0;
  939. }else if ((listWidth - selectTargetPos) <= boxHarf) { //right
  940. pos = listWidth-box.width();
  941. }else {
  942. pos = selectTargetPos - boxHarf;
  943. }
  944. setTimeout(function(){snbwrap.css({
  945. "transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
  946. "transition-duration": "500ms"
  947. })}, 200);
  948. }
  949. $(".pick-head li .btn").click(function(){
  950. var itActive = $(this).attr('data-tab');
  951. $(".pick-head li .btn").removeClass('active');
  952. $(".pick-cont").removeClass('active');
  953. $(this).addClass('active');
  954. $('#'+itActive).addClass('active');
  955. });
  956. //post-pick-post
  957. var post_pick = new Swiper(".pick-cont .swiper-container", {
  958. //slidesPerView: 1,
  959. loop:true,
  960. // watchOverflow:true,
  961. //210520_ 추가 : 슬라이드 1개일 경우 롤링 제거.
  962. speed: 1000,
  963. //210520_ 추가 : 자동재생 시간 추가.
  964. autoplay: {
  965. delay: 3000,
  966. disableOnInteraction: false,
  967. },
  968. a11y: {
  969. enabled: true,
  970. notificationClass: 'swiper-notification',
  971. prevSlideMessage: '이전 슬라이드',
  972. nextSlideMessage: '다음 슬라이드',
  973. firstSlideMessage: '첫번째 슬라이드 입니다',
  974. lastSlideMessage: '마지막 슬라이드 입니다',
  975. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  976. },
  977. observer: true,
  978. observeParents: true
  979. });
  980. // post-recomm
  981. // recomm-head
  982. var Head_recomm = new Swiper(".swiper-container.recomm-head", {
  983. slidesPerView: "auto",
  984. spaceBetween: 10,
  985. autoHeight: true,
  986. loop:false,
  987. a11y: {
  988. enabled: true,
  989. notificationClass: 'swiper-notification',
  990. prevSlideMessage: '이전 슬라이드',
  991. nextSlideMessage: '다음 슬라이드',
  992. firstSlideMessage: '첫번째 슬라이드 입니다',
  993. lastSlideMessage: '마지막 슬라이드 입니다',
  994. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  995. },
  996. });
  997. $(".recomm-head li .btn").click(function(){
  998. var recommActive = $(this).attr('data-tab');
  999. $(".recomm-head li .btn").removeClass('active');
  1000. $(".recomm-post").removeClass('active');
  1001. $(this).addClass('active');
  1002. $('#'+recommActive).addClass('active');
  1003. });
  1004. // recomm-post
  1005. var post_recomm = new Swiper(".recomm-post", {
  1006. slidesPerView: 2.22,
  1007. spaceBetween: 8,
  1008. observer: true,
  1009. observeParents: true,
  1010. speed : 1000,
  1011. freeMode: true,
  1012. autoplay: false,
  1013. });
  1014. //210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
  1015. // post-bnnWide
  1016. // 와이드배너 슬라이드 카운팅
  1017. $(".main_1stage .post-bnnWide").each(function(index){
  1018. var pickbnnWdCont = $(this).find('.swiper-slide');
  1019. var pickbnnWdLength = pickbnnWdCont.length;
  1020. if (pickbnnWdLength < 2) {
  1021. var post_bnnWide = new Swiper ($(this), {
  1022. loop: false,
  1023. watchOverflow: true,
  1024. autoplay: false,
  1025. pagination: false,
  1026. });
  1027. } else {
  1028. var post_bnnWide = new Swiper ($(this), {
  1029. loop: true,
  1030. slidesPerView: 1,
  1031. speed : 1000,
  1032. autoplay: {
  1033. delay: 3000,
  1034. disableOnInteraction: false,
  1035. },
  1036. pagination: {
  1037. el: '.swiper-pagination',
  1038. },
  1039. });
  1040. }
  1041. });
  1042. // post-bnnEvent
  1043. // 이벤트배너 슬라이드 카운팅
  1044. var pickbnnEvCont = $('.post-bnnEvent .swiper-slide');
  1045. var pickbnnEvLength = pickbnnEvCont.length;
  1046. if (pickbnnEvLength < 2) {
  1047. var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
  1048. loop: false,
  1049. speed : 1000,
  1050. autoplay: false,
  1051. pagination:false,
  1052. });
  1053. } else {
  1054. var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
  1055. loop: true,
  1056. slidesPerView: 1,
  1057. speed : 1000,
  1058. autoplay: {
  1059. delay: 3000,
  1060. disableOnInteraction: false,
  1061. },
  1062. pagination: {
  1063. el: '.swiper-pagination',
  1064. },
  1065. });
  1066. }
  1067. // post-tv
  1068. var post_tv = new Swiper ('.post-tv', {
  1069. loop: true,
  1070. centeredSlides: true,
  1071. speed : 1000,
  1072. autoplay: false,
  1073. pagination: {
  1074. el: '.main_tv .swiper-pagination',
  1075. clickable: true,
  1076. },
  1077. });
  1078. </script>
  1079. <!-- Criteo 홈페이지 태그 -->
  1080. <script type="text/javascript">
  1081. window.criteo_q = window.criteo_q || [];
  1082. var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
  1083. window.criteo_q.push(
  1084. { event: "setAccount", account: 6762}, // 이 라인은 업데이트하면 안됩니다
  1085. { event: "setEmail", email: criteoEmail }, // 빈 문자일 수 있습니다
  1086. { event: "setSiteType", type: deviceType},
  1087. { event: "viewHome"});
  1088. </script>
  1089. <!--// Criteo 홈페이지 태그 -->
  1090. <!-- Enliple(모비온) Insite naver Quick start -->
  1091. <script type="text/javascript">
  1092. // 인사이트 마케팅
  1093. (function(m,b,r,i,s){m.mbris=m.mbris||function(){(m.mbris.q=m.mbris.q||[]).push(arguments)};i=b.createElement(r);i.async=!0;i.defer=!0;i.src="https://cdn.megadata.co.kr/dist/prod/enp_mbris.min.js";0<b.querySelectorAll("script[src*=enp_mbris]").length&&m.ENP_MBRIS_INVOKE?m.ENP_MBRIS_INVOKE():(s=b.getElementsByTagName(r)[0],s.parentNode.insertBefore(i,s))})(window,document,"script");mbris("202108222155731618_is24_1_01,202108222155731619_is24_1_02");
  1094. // 네이버 인사이트 지연
  1095. (function(m,b,r,i,s){m.mbris=m.mbris||function(){(m.mbris.q=m.mbris.q||[]).push(arguments)};i=b.createElement(r);i.async=!0;i.defer=!0;i.src="https://cdn.megadata.co.kr/dist/prod/enp_mbris.min.js";0<b.querySelectorAll("script[src*=enp_mbris]").length&&m.ENP_MBRIS_INVOKE?m.ENP_MBRIS_INVOKE():(s=b.getElementsByTagName(r)[0],s.parentNode.insertBefore(i,s))})(window,document,"script");mbris("202108222155731624_is24_6_01,202108222155731624_is24_6_02");
  1096. </script>
  1097. <!--// Enliple(모비온) Insite naver Quick end -->
  1098. </th:block>
  1099. </body>
  1100. </html>