| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187 |
- <!DOCTYPE html>
- <html lang="ko"
- xmlns:th="http://www.thymeleaf.org"
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
- layout:decorator="mob/common/layout/DefaultLayoutMob">
- <!--
- *******************************************************************************
- * @source : MallMainFormMob.html
- * @desc : 몰메인 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER DATE AUTHOR DESCRIPTION
- * === =========== ========== =============================================
- * 1.0 2021.03.10 gagamel 최초 작성
- *******************************************************************************
- -->
- <body>
- <th:block layout:fragment="content">
- <main role="" id="" class="container">
- <section class="main">
- <th:block th:if="${mainLayoutList}" th:each="mainData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainData.contentsLoc,'SMM','')},contentsTitle=${#strings.replace(mainData.contentsTitle,'<br>',' ')}">
- <!-- <th:block th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">-->
- <th:block th:if="${contentsLoc=='001'}">
- <!-- 1. 비주얼 슬라이드 -->
- <div class="inner wide" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
- <div class="main_visual">
- <div class="swiper-container post-visual">
- <div class="swiper-wrapper">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
- <div class="swiper-slide">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
- <div class="txtWrap">
- <dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
- <dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}">NBA</dt>
- <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E'}">EVENT</dt>
- <dd class="mainTitle">
- <input type="hidden" name="mainTitlee" th:value="${ContentsData.strTitle1}"/>
- </dd>
- <!-- <dd>NEW ARRIVAL</dd>-->
- <dd class="txt_xs mainSubTitle" th:text="${ContentsData.subText1}">
- <!-- <input type="hidden" name="mainSubTitlee" th:value="${ContentsData.subText1}"/>-->
- </dd>
- </dl>
- </div>
- </a>
- </div>
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='002'}">
- <!-- 2. 스타일리포트 -->
- <div class="inner bg_gray" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
- <div class="main_stylereport">
- <th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
- <div class="titWrap">
- <h2 th:text="${mainData.contentsTitle}"></h2>
- </div>
- </th:block>
- <div class="swiper-container post-stylereport">
- <div class="swiper-wrapper">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
- <div class="swiper-slide styleArea" th:if="${ContentsStat.count<5}">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
- <dl>
- <dt class="styleTitleC">
- <input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
- </dt>
- <dd class="styleNoteC">
- <input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
- </dd>
- <!-- <dd>준비한 아우터 픽을 만나보자</dd>-->
- </dl>
- </a>
- </div>
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='003'}">
- <!-- 3. 트렌디한 신상아이템 -->
- <div class="inner" th:if="${mainData.goodsList != null}">
- <div class="main_trendy">
- <th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
- <div class="titWrap">
- <h2 th:text="${mainData.contentsTitle}"></h2>
- </div>
- </th:block>
- <div class="swiper-container post-trendy">
- <div class="swiper-wrapper">
- <th:block th:each="goodsData, goodsStat : ${mainData.goodsList}">
- <th:block th:if="${(goodsStat.index%4)==0 or goodsStat.first}">
- <div class="swiper-slide">
- </th:block>
- <div class="item_prod">
- <div class="item_state">
- <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>
- <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
- <div class=" itemPic">
- <!-- <img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg"> onerror="img_check(this)"-->
- <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
- <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>
- <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>
- </th:block>
- <img alt="BLUE-a" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)" >
- </div>
- <p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
- <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
- <div class=" itemName" th:text="${goodsData.goodsFullNm}">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>
- <!-- <p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">488,000</p>-->
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
- <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')}]]
- <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>
- </p>
- <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">
- [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~
- </p>
- </a>
- </div>
- </div>
- <th:block th:if="${(goodsStat.index%4)== 3 or goodsStat.last}">
- <th:block th:utext="'</div>'"></th:block>
- </th:block>
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='004' and !mainData.BestItemList.empty}">
- <!-- 4. 잇 아이템 -->
- <div class="inner">
- <div class="main_it">
- <div class="titWrap">
- <!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
- <a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_BEST_MAIN);">
- <h2 th:text="${mainData.contentsTitle.replace('<br>','')}"></h2>
- </a>
- <!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
- </div>
- <div class="inner_head">
- <ul class="it_nav">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.BestItemList}">
- <li><button class="btn btn_link" th:attr="data-tab=${'it'+ContentsStat.count}"><span th:text="${ContentsData.cateNm}">여성</span></button></li>
- </th:block>
- </ul>
- </div>
- <div class="inner_body">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.BestItemList}">
- <div class="swiper-container post-it it_item" th:id="${'it'+ContentsStat.count}">
- <div class="swiper-wrapper" >
- <th:block th:each="bestItemData, bestItemStat : ${ContentsData.goodsList}">
- <div class="swiper-slide">
- <div class="item_prod">
- <div class="item_state">
- <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>
- <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${bestItemData.goodsCd}]], '', '', 'SMM004');">
- <div class="shape" th:classappend="${bestItemStat.count==1}?'ranker'">
- <span><em class="number" th:text="${bestItemStat.count}">1</em></span>
- </div>
- <div class="itemPic">
- <th:block th:each="option,idx:${bestItemData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
- <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>
- <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>
- </th:block>
- <!-- 2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
- <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == -1">
- <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
- </th:block>
- <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == 0">
- <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('https://image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
- </th:block>
- <!-- //2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
- </div>
- <p class="itemBrand" th:text="${bestItemData.brandGroupNm}">TBJ</p>
- <div class="itemComment" th:if="${not #strings.isEmpty(bestItemData.goodsTnm)}" th:text="${bestItemData.goodsTnm}"># 가을 느낌 물씬!</div>
- <div class="itemName" th:text="${bestItemData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">
- <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')}]]
- <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>
- </p>
- <p th:if="${bestItemData.goodsType=='G056_D'}" class="itemPrice">
- [[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]] ~
- </p>
- </a>
- </div>
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='005' and !mainData.ContentsList.empty}">
- <!-- 5. 프로모션배너 -->
- <div class="inner wide">
- <div class="main_2stage">
- <div class="swiper-container post-bnnEvent">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
- <th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
- <div class="swiper-wrapper" th:if="${ContentsData.contentsType=='1'}">
- <div class="swiper-slide">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
- <div class="bnnbox" style="background:#e3e7ea;">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
- </div>
- </a>
- </div>
- </div>
- <div class="swiper-wrapper" th:if="${ContentsData.contentsType=='2'}">
- <div class="swiper-slide">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
- <div class="bnnbox" style="background:#e3e7ea;">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
- </div>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar2}]]);">
- <div class="bnnbox" style="background:#eef1f3;">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
- </div>
- </a>
- </div>
- </div>
- </th:block>
- </th:block>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='006'}">
- <!-- 6. 타임딜 : 슬라이드 -->
- <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
- <div class="inner bg_dark" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
- <div class="main_deal">
- <div class="titWrap">
- <a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);">
- <h2 th:text="${contentsTitle}"></h2>
- </a>
- <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
- <form name="socailForm" id="socailForm">
- <input type="hidden" name="targetTime" th:value="${socialData.socialEddt}">
- </form>
- </th:block>
- <div class="count">
- <span class="count_tit">남은 시간</span>
- <div class="hotdealcount" id="countdown">
- <div id="tiles"></div>
- </div>
- </div>
- </div>
- <div class="swiper-container post-deal">
- <div class="swiper-wrapper" >
- <!-- <th:block th:each="socialData, socialStat : ${mainData.socialInfo}">-->
- <th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
- <div class="swiper-slide" th:if="${goodsStat.count<21}">
- <div class="item_prod" style="width:100%">
- <div class="item_state">
- <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>
- <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM006');">
- <div class="itemPic">
- <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
- </div>
- <p class="itemBrand" th:text="${goodsData.brandGroupNm}">TBJ</p>
- <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
- <div class="itemName" th:text="${goodsData.goodsNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p class="itemPrice">
- <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')}]]
- <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'">10%</span>
- </p>
- </a>
- </div>
- </div>
- </div>
- </th:block>
- <!-- </th:block>-->
- </div>
- </div>
- </div>
- </div>
- </th:block>
- </th:block>
- <th:block th:if="${contentsLoc=='007'}">
- <!-- 7. 브랜드픽 -->
- <div class="inner" th:if="${!mainData.brandPickList.empty}">
- <div class="main_pick">
- <div class="titWrap">
- <h2 th:text="${contentsTitle}"></h2>
- </div>
- <div class="inner_head">
- <div class="swiper-container pick-head"> <!--(pick-head)슬라이드 키클래스-->
- <ul class="swiper-wrapper">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
- <li class="swiper-slide" th:classappend="${ContentsStat.count==1}?'on'"> <!-- li.on / li .btn.active : 메뉴 표시 -->
- <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>
- </li>
- </th:block>
- </ul>
- </div>
- </div>
- <div class="inner_body">
- <th:block th:each="brandPickData, brandPickStat : ${mainData.brandPickList}">
- <div class="pick-cont" th:classappend="${brandPickStat.count==1}?'active'" th:id="${'pick'+brandPickStat.count}"> <!-- .pick-cont.active : 컨텐츠 표시 -->
- <!-- 210329 : 브랜드 pick 슬라이드 추가 -->
- <div class="swiper-container">
- <div class="swiper-wrapper" id="id007">
- <th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
- <div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${bannerData.strVar1}]]);"><!-- 해당 배너 상세 이동 -->
- <div class="txtWrap">
- <p class="title">
- <input type="hidden" name="title" th:value="${bannerData.strTitle1}">
- </p>
- <span th:text="${bannerData.subText1}">2020 FALL/WINTER 신상살펴보기</span>
- </div>
- <img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="">
- </a>
- </div>
- </th:block>
- </div>
- </div>
- <!-- //210329 : 브랜드 pick 슬라이드 추가 -->
- <!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
- <div class="pick-post"><!-- (pick-post)슬라이드 키클래스(해당 배너 관련 상품) -->
- <th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
- <div class="item_prod" th:if="${goodsStat.count<4}">
- <div class="item_state">
- <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM007');">
- <div class="itemPic">
- <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
- <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>
- <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>
- </th:block>
- <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
- </div>
- <div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">35,900</p>
- <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA') + ' ~'}"></p>
- </a>
- </div>
- </div>
- </th:block>
- </div> <!--pick-post 종료 -->
- <!-- 210524 : pick-post 형제로 버튼그룹 이동 -->
- <div class="btn_group_flex">
- <div>
- <button class="btn btn_default" th:onclick="fnNextBrand([[${brandPickStat.size}]],[[${brandPickStat.count}]])">다음 브랜드 보기<span></span></button>
- </div>
- </div>
- <!-- //210329 : 브랜드 pick 상품 swiper 제거 -->
- <!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='008' and !mainData.ContentsList.empty}">
- <!-- 8. 가로 긴 배너 슬라이드 -->
- <div class="inner wide">
- <div class="main_1stage">
- <div class="swiper-container post-bnnWide">
- <div class="swiper-wrapper">
- <th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
- <div class="swiper-slide silderBannerArea">
- <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
- <a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
- <div class="bnnbox" style="background:#bdc3c7;">
- <div class="txtWrap bannerNote">
- <p class="noteArea">
- <input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
- </p>
- <!-- <p>아우터 + 이너 단독세일</p>-->
- </div>
- <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
- </div>
- </a>
- </th:block>
- </div>
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='009'}">
- <!-- 9. MD추천 스타일 -->
- <div class="inner">
- <div class="main_recomm">
- <div class="titWrap">
- <h2 th:text="${contentsTitle}">MD가 추천하는 스타일</h2>
- </div>
- <div class="inner_head">
- <div class="swiper-container recomm-head"> <!--(recomm-head)슬라이드 키클래스-->
- <ul class="swiper-wrapper">
- <th:block th:each="titleData, titleStat : ${mainData.mdPickList}" >
- <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
- <li class="swiper-slide"> <!-- li .btn.active : 메뉴 표시 --><!--data-filter 사용 안하시면 제거하셔도 좋습니다-->
- <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>
- </li>
- </th:block>
- </th:block>
- </ul>
- </div>
- </div>
- <th:block th:each="titleData, titleStat : ${mainData.mdPickList}">
- <div class="inner_body">
- <div class="swiper-container recomm-post recomm_item" th:classappend="${titleStat.count==1}?'active'" th:id="${'recomm'+titleStat.count}">
- <div class="swiper-wrapper" >
- <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}">
- <th:block th:each="goodsData, goodsStat : ${titleData.goodsList}">
- <div class="swiper-slide">
- <div class="item_prod">
- <div class="item_state">
- <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>
- <a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM009');">
- <div class="itemPic">
- <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
- <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>
- <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>
- </th:block>
- <img alt="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
- </div>
- <p class="itemBrand" th:text="${goodsData.brandGroupNm}">TBJ</p>
- <div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
- <div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
- <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')}]]
- <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>
- </p>
- <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">
- [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~
- </p>
- </a>
- </div>
- </div>
- </div>
- </th:block>
- </th:block>
- </div>
- <!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='010'}">
- <!-- 10. 당신을 위한 제안 -->
- <div class="inner wide">
- <div class="main_foryou">
- <div class="titWrap">
- <h2 th:text="${mainData.contentsTitle}">당신을 위한 제안</h2>
- </div>
- <div class="swiper-container post-sug">
- <div class="swiper-wrapper" id="recomItemArea">
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='011'}">
- <!-- 11. TV 슬라이드 -->
- <div class="inner wide bg_dark" th:if="${mainData.ContentsList != null}">
- <div class="titWrap">
- <h2 data-style="unusual" th:text="${mainData.contentsTitle}">STYLE24 TV</h2>
- </div>
- <div class="main_tv" >
- <div class="swiper-container post-tv">
- <div class="swiper-wrapper ">
- <div class="swiper-slide" th:each="item, stat : ${mainData.ContentsList}">
- <div class="movbox">
- <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>
- <iframe th:if="${item.strVar1=='M'}" class="pd_mov" th:src="${kollusMediaUrl+'/'+item.strVar2+'?enable_initialize_focus=false'}" allowfullscreen></iframe>
- <!-- <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>-->
- </div>
- </div>
- </div>
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- <!-- </th:block>-->
- </th:block>
- </th:block>
- </section>
- </main>
- <script th:inline="javascript">
- /*<![CDATA[*/
- var targetTime = '';
- if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
- targetTime = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
- }
- if(targetTime != null && targetTime != ''){
- /* 핫딜 countDown */
- var endTime = new Date(targetTime); // 남은시간 지정
- endTime = (Date.parse(endTime) / 1000);
- var countdown = document.getElementById("tiles"); // get tag element
- getCountdown();
- setInterval(function () { getCountdown(); }, 1000);
- function getCountdown(){
- // find the amount of "seconds" between now and target
- var now = new Date();
- now = (Date.parse(now) / 1000);
- var timeLeft = endTime - now;
- var days = Math.floor(timeLeft / 86400);
- var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
- var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
- var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
- if (hours < '10') { hours = '0' + hours; }
- if (minutes < '10') { minutes = '0' + minutes; }
- if (seconds < '10') { seconds = '0' + seconds; }
- // format countdown string + set tag value
- countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
- }
- function pad(n) {
- return (n < 10 ? '0' : '') + n;
- }
- }
- // 스크립트 제거
- function fnRemoveHTML(text){
- var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
- reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
- reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
- return reText;
- }
- // 컨텐츠 호출
- $(document).ready(function() {
- // 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
- /*
- var pcId = gagajf.getCookie("RB_PCID");
- 20210927 xodud1202 > 수빈과장님 요청
- fnGetEigenApi(pcId); */
- post_visual.slideTo(2, 0, false); // 접속 시, 슬라이드페이지 이동
- // 몰메인 띠배너 표출
- $("#divTopbanner").show();
- setHtop();
- let randomNum = Math.floor( ( Math.random() * 4 ) );
- $(".it_nav .btn").eq(randomNum).trigger('click');
- // 몰메인 <br> 태그
- $('.mainTitle').each(function (){
- var brText = $(this).find("input[name=mainTitlee]").val();
- let tag = fnRemoveHTML(brText);
- $(this).append(tag);
- });
- // 몰메인 <br> 태그
- // $('.mainSubTitle').each(function (){
- // var brText = $(this).find("input[name=mainSubTitlee]").val();
- // let tag = fnRemoveHTML(brText);
- // $(this).append(tag);
- // });
- // 브랜드픽 <br> 태그
- $('#id007 .title').each(function (){
- var brText = $(this).find("input[name=title]").val();
- let tag = fnRemoveHTML(brText);
- $(this).append(tag);
- });
- // 가로긴배너 슬라이드
- $('.silderBannerArea').each(function (){
- let tag = '';
- if(!gagajf.isNull($(this).find("input[name=bannerNote]").val())) {
- var noteText = $(this).find("input[name=bannerNote]").val();
- tag = fnRemoveHTML(noteText);
- $(this).find('.noteArea').append(tag);
- }
- });
- // 스타일리포트 <br> 태그
- $('.styleArea').each(function (){
- let tag = '';
- let tag2 = '';
- if(!gagajf.isNull($(this).find("input[name=styleTitle]").val())) {
- var titleText = $(this).find("input[name=styleTitle]").val();
- tag = fnRemoveHTML(titleText);
- $(this).find('.styleTitleC').append(tag);
- }
- if(!gagajf.isNull($(this).find("input[name=styleNote]").val())) {
- var noteText = $(this).find("input[name=styleNote]").val();
- tag2 = fnRemoveHTML(noteText);
- $(this).find('.styleNoteC').append(tag2);
- }
- });
- });
- function setHtop() {
- if($('header').hasClass('main')) {
- $('#htopMain').show();
- $('#htopSub').hide();
- } else {
- $('#htopMain').hide();
- $('#gnb').hide();
- $('#htopSub').show();
- }
- }
- var fnNextBrand = function (tot, idx){
- if(tot == idx){
- $("#pickBtn1").click();
- }else{
- $("#pickBtn"+(idx+1)).click();
- }
- }
- /**
- * EigenApi
- * size : 상품수
- * nh : 키워드수
- * */
- var fnGetEigenApi = function (id){
- $.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
- var keywordTag = '';
- var itemTag = '';
- let dataJson = result.groupedResults;
- let key1 = Object.keys(dataJson);
- if (status === 'success') {
- if (!gagajf.isNull(result.products) && result.products.length > 0) {
- $("#recomItemArea").html('');
- $.each(result.products, function (idx, item) {
- if (idx == 0 || idx == 5) {
- itemTag += '<div class="swiper-slide';
- if(idx==0){
- itemTag += ' type1';
- }else{
- itemTag += ' type2';
- }
- itemTag += ' ">\n';
- itemTag += ' <ol class="list_cate">\n';
- }
- itemTag += ' <li class="first" id="key'+idx+'" data-idx="'+idx+'">\n';
- itemTag += ' <dl>\n';
- itemTag += ' <dt>\n';
- itemTag += ' <button>\n';
- itemTag += ' <span class="fold_rank">'+(idx+1)+'</span>\n';
- itemTag += ' <span class="fold_txt">'+ item.sourceId + '</span>\n';
- itemTag += ' </button>\n';
- itemTag += ' </dt>\n';
- itemTag += ' <dd>\n';
- itemTag += ' <div class="swiper-container post-sug-items">\n';
- itemTag += ' <div class="swiper-wrapper">\n';
- for (var i=0; i<key1.length; i++) {
- var key = key1[i];
- if(item.sourceId == key){
- $.each(dataJson[key], function (keyIdx, keyItem){
- itemTag += ' <div class="swiper-slide">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="" class=" pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- });
- //if(i == key1.length-1){
- itemTag += ' <div class="swiper-slide">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <a href="javascript:void(0)" class="itemLink" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <span class="more_txt">더보기</span>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- //}
- }
- }
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </dd>\n';
- itemTag += ' </dl>\n';
- itemTag += ' </li>\n';
- if (idx == 4 || idx == 9) {
- itemTag += ' </ol>\n';
- itemTag += '</div>\n';
- }
- });
- if(itemTag.indexOf('swiper-slide') >-1 ){
- $("#recomItemArea").html(itemTag);
- fnSwiperScript();
- }
- }
- }
- });
- }
- /*]]>*/
- </script>
- <script type="text/javascript">
- var fnSwiperScript = function (){
- // post_sug
- var numCnt = 0;
- var post_sug = new Swiper('.swiper-container.post-sug', {
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.swiper-pagination',
- },
- // autoplay: {
- // delay: 24700,
- // disableOnInteraction: false,
- // },
- on : {
- slideChange: function(){
- foryouIndex = 0;
- if(numCnt === 0){
- $(".swiper-slide.type1 .list_cate > li").removeClass('on');
- $(".swiper-slide.type2 .list_cate > li").removeClass('on');
- $(".swiper-slide.type2 .list_cate .first").addClass('on');
- numCnt = 1;
- } else {
- $(".swiper-slide.type1 .list_cate > li").removeClass('on');
- $(".swiper-slide.type2 .list_cate > li").removeClass('on');
- $(".swiper-slide.type1 .list_cate .first").addClass('on');
- numCnt = 0;
- }
- }
- },
- });
- var foryouIndex = 0;
- var cntNum = 0;
- function foryouInterval(_foryouIndex) {
- var foryouCateItems1 = $(".main_foryou .post-sug .swiper-slide.type1.swiper-slide-active .list_cate li");
- var foryouCateItems2 = $(".main_foryou .post-sug .swiper-slide.type2.swiper-slide-active .list_cate li");
- $(".main_foryou .post-sug .swiper-slide.type1 .list_cate li").removeClass("on");
- $(".main_foryou .post-sug .swiper-slide.type2 .list_cate li").removeClass("on");
- if($(".main_foryou .post-sug .swiper-slide.type1").hasClass("swiper-slide-active")){
- $(foryouCateItems1[(_foryouIndex ) % 5]).addClass("on");
- if (_foryouIndex >= 5) foryouIndex = 0;
- foryouIndex++;
- (foryouCateItems1).click(function () {
- foryouIndex = $(this).index();
- clearInterval(stopInter);
- stopInter = startTimeInterval();
- });
- }
- if($(".main_foryou .post-sug .swiper-slide.type2").hasClass("swiper-slide-active")){
- $(foryouCateItems2[(_foryouIndex ) % 5]).addClass("on");
- if (_foryouIndex >= 5) foryouIndex = 0;
- foryouIndex++;
- $(foryouCateItems2).click(function () {
- foryouIndex = $(this).index();
- clearInterval(stopInter);
- stopInter = startTimeInterval();
- });
- }
- }
- function startTimeInterval(){
- return setInterval(function () {
- foryouInterval(foryouIndex);
- }, 5000);
- }
- var stopInter = startTimeInterval();
- //setTimeout(function () {
- // foryouInterval(foryouIndex);
- // if (foryouIndex >= 5) foryouIndex = 0;
- // foryouIndex++;
- //}, 2000);
- var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
- autoHeight: true, //210720_ 추가
- slidesPerView: 3,
- spaceBetween: 10,
- speed : 1000,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- });
- }
- </script>
- <script type="text/javascript">
- //210624_ 추가 : 슬라이드 속성 추가.
- // post-visual
- // 비주얼 슬라이드 카운팅
- var pickvisualCont = $('.post-visual .swiper-slide');
- var pickvisualLength = pickvisualCont.length;
- if (pickvisualLength < 2) {
- // $(".main_visual .swiper-pagination").css({"display": "none"});
- var post_visual = new Swiper('.swiper-container.post-visual', {
- autoplay: false,
- loop:false,
- speed:1000,
- // pagination: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- } else {
- var post_visual = new Swiper('.swiper-container.post-visual', {
- slideTo: 2,
- speed:1000,
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- loop:true,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- }
- // post-trendy
- var post_trendy = new Swiper('.swiper-container.post-trendy', {
- speed:1000,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.swiper-pagination',
- },
- });
- // post-it
- var post_it = new Swiper('.swiper-container.post-it', {
- slidesPerView: 2.22,
- spaceBetween: 8,
- observer: true,
- observeParents: true,
- speed : 1000,
- freeMode: true,
- autoplay: false,
- });
- $(".it_nav .btn").click(function(){
- var itActive = $(this).attr('data-tab');
- $(".it_nav .btn").removeClass('active');
- $(".it_item").removeClass('active');
- $(this).addClass('active');
- $('#'+itActive).addClass('active');
- });
- // post-stylereport
- var post_stylereport = new Swiper('.swiper-container.post-stylereport', {
- slidesPerView: 1,
- speed:1000,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.swiper-pagination',
- },
- spaceBetween: 8,
- });
- //post-deal
- var post_deal = new Swiper('.swiper-container.post-deal', {
- slidesPerView: 2.22,
- spaceBetween: 8,
- observer: true,
- observeParents: true,
- speed : 1000,
- freeMode: true,
- autoplay: false,
- });
- //post-pick
- //post-pick-head
- var Head_pick = new Swiper(".pick-head", {
- slidesPerView: "auto",
- spaceBetween: 0,
- autoHeight: true,
- preventClicks: true,
- preventClicksPropagation: false,
- observer: true,
- observeParents: true
- });
- var $pickHd = $('.pick-head .swiper-wrapper .swiper-slide .btn');
- $pickHd.click(function(){
- var target = $(this).parent();
- $pickHd.parent().removeClass('on')
- target.addClass('on');
- muCenter(target);
- })
- function muCenter(target){
- var snbwrap = $('.pick-head .swiper-wrapper');
- var targetPos = target.position();
- var box = $('.pick-head');
- var boxHarf = box.width()/2;
- var pos;
- var listWidth=0;
- snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
- var selectTargetPos = targetPos.left + target.outerWidth()/2;
- if (selectTargetPos <= boxHarf) { // left
- pos = 0;
- }else if ((listWidth - selectTargetPos) <= boxHarf) { //right
- pos = listWidth-box.width();
- }else {
- pos = selectTargetPos - boxHarf;
- }
- setTimeout(function(){snbwrap.css({
- "transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
- "transition-duration": "500ms"
- })}, 200);
- }
- $(".pick-head li .btn").click(function(){
- var itActive = $(this).attr('data-tab');
- $(".pick-head li .btn").removeClass('active');
- $(".pick-cont").removeClass('active');
- $(this).addClass('active');
- $('#'+itActive).addClass('active');
- });
- //post-pick-post
- var post_pick = new Swiper(".pick-cont .swiper-container", {
- //slidesPerView: 1,
- loop:true,
- // watchOverflow:true,
- //210520_ 추가 : 슬라이드 1개일 경우 롤링 제거.
- speed: 1000,
- //210520_ 추가 : 자동재생 시간 추가.
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- observer: true,
- observeParents: true
- });
- // post-recomm
- // recomm-head
- var Head_recomm = new Swiper(".swiper-container.recomm-head", {
- slidesPerView: "auto",
- spaceBetween: 10,
- autoHeight: true,
- loop:false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- });
- $(".recomm-head li .btn").click(function(){
- var recommActive = $(this).attr('data-tab');
- $(".recomm-head li .btn").removeClass('active');
- $(".recomm-post").removeClass('active');
- $(this).addClass('active');
- $('#'+recommActive).addClass('active');
- });
- // recomm-post
- var post_recomm = new Swiper(".recomm-post", {
- slidesPerView: 2.22,
- spaceBetween: 8,
- observer: true,
- observeParents: true,
- speed : 1000,
- freeMode: true,
- autoplay: false,
- });
- //210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
- // post-bnnWide
- // 와이드배너 슬라이드 카운팅
- $(".main_1stage .post-bnnWide").each(function(index){
- var pickbnnWdCont = $(this).find('.swiper-slide');
- var pickbnnWdLength = pickbnnWdCont.length;
- if (pickbnnWdLength < 2) {
- var post_bnnWide = new Swiper ($(this), {
- loop: false,
- watchOverflow: true,
- autoplay: false,
- pagination: false,
- });
- } else {
- var post_bnnWide = new Swiper ($(this), {
- loop: true,
- slidesPerView: 1,
- speed : 1000,
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- pagination: {
- el: '.swiper-pagination',
- },
- });
- }
- });
- // post-bnnEvent
- // 이벤트배너 슬라이드 카운팅
- var pickbnnEvCont = $('.post-bnnEvent .swiper-slide');
- var pickbnnEvLength = pickbnnEvCont.length;
- if (pickbnnEvLength < 2) {
- var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
- loop: false,
- speed : 1000,
- autoplay: false,
- pagination:false,
- });
- } else {
- var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
- loop: true,
- slidesPerView: 1,
- speed : 1000,
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- pagination: {
- el: '.swiper-pagination',
- },
- });
- }
- // post-tv
- var post_tv = new Swiper ('.post-tv', {
- loop: true,
- centeredSlides: true,
- speed : 1000,
- autoplay: false,
- pagination: {
- el: '.main_tv .swiper-pagination',
- clickable: true,
- },
- });
- </script>
- <!-- Criteo 홈페이지 태그 -->
- <script type="text/javascript">
- window.criteo_q = window.criteo_q || [];
- var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
- window.criteo_q.push(
- { event: "setAccount", account: 6762}, // 이 라인은 업데이트하면 안됩니다
- { event: "setEmail", email: criteoEmail }, // 빈 문자일 수 있습니다
- { event: "setSiteType", type: deviceType},
- { event: "viewHome"});
- </script>
- <!--// Criteo 홈페이지 태그 -->
- <!-- Enliple(모비온) Insite naver Quick start -->
- <script type="text/javascript">
- // 인사이트 마케팅
- (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");
- // 네이버 인사이트 지연
- (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");
- </script>
- <!--// Enliple(모비온) Insite naver Quick end -->
- </th:block>
- </body>
- </html>
|