| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769 |
- <!DOCTYPE html>
- <html lang="ko"
- xmlns:th="http://www.thymeleaf.org"
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
- layout:decorator="web/common/layout/DefaultLayoutWeb">
- <!--
- *******************************************************************************
- * @source : MallMainFormWeb.html
- * @desc : 몰메인 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER DATE AUTHOR DESCRIPTION
- * === =========== ========== =============================================
- * 1.0 2021.01.28 gagamel 최초 작성
- *******************************************************************************
- -->
- <body>
- <th:block layout:fragment="content">
- <div id="container" class="container main">
- <!-- <div class="breadcrumb"> (breadcrumb) </div> -->
- <div class="wrap ">
- <th:block th:if="${mainLayoutList}" th:each="mainLayoutData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SMM','')}">
- <th:block th:if="${contentsLoc=='001'}">
- <!-- 1. 비주얼 슬라이드 -->
- <div class="content wide main_visual" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
- <div class="cont_head dpnone">
- <p class="t_c">비주얼 슬라이드</p>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-visual">
- <div class="swiper-wrapper ">
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
- <div class="swiper-slide">
- <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
- <div class="txtWrap">
- <th:block th:if="${ContentsData.strVar5!=null && ContentsData.strVar5!=''}">
- <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></p>
- <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></p>
- <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E'}" >EVENT</p>
- </th:block>
- <dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
- <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></dt>
- <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></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>
- <button type="button" class="btn" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>자세히 보기</span></button>
- </div>
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
- </th:block>
- </div>
- </th:block>
- </div>
- <div class="swiper-button-prev sbtn01_lb"></div>
- <div class="swiper-button-next sbtn01_rb"></div>
- </div>
- <div class="swiper-controls">
- <div class="swiper-pagination"></div>
- <div class="slide-curb">
- <div class="slide-curb-play sbtn01_play">슬라이드 재생</div>
- <div class="slide-curb-pause sbtn01_stop">슬라이드 정지</div>
- </div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='002'}">
- <!-- 2. 스타일리포트 -->
- <div class="content main_stylereport" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
- <th:block th:if="${mainLayoutData.contentsTitle != null and !mainLayoutData.contentsTitle.empty}">
- <div class="cont_head">
- <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
- </div>
- </th:block>
- <div class="cont_body">
- <div class="ui_row">
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
- <div class="ui_col_3 styleArea" th:if="${ContentsStat.count<5}">
- <a th:href="${ContentsData.strVar1}">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
- <dl>
- <dt class="styleTitleC"> <!--th:text="${ContentsData.strTitle1}"-->
- <input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
- </dt>
- <dd class="styleNoteC"> <!--th:text="${ContentsData.subText1}"-->
- <input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
- </dd>
- <!--<dd>당신을 위해 준비한 아우터 픽을 만나보자</dd>-->
- </dl>
- </a>
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='003'}">
- <!-- 3. 트렌디한 신상아이템 -->
- <div class="content main_trendy" th:if="${mainLayoutData.goodsList != null}">
- <div class="cont_head">
- <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-trendy">
- <div class="swiper-wrapper">
- <th:block th:each="goodsData, goodsStat : ${mainLayoutData.goodsList}">
- <div class="swiper-slide" th:if="${goodsStat.count<21}">
- <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">
- <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=" vLHTC 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:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#가을느낌 물씬!</div>
- <div class="itemName" th:text="${goodsData.goodsFullNm}">스타 착용 여성 퍼 아플리케 오버핏 투마일 웨어링 점퍼</div>
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
- <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,3,'COMMA')}">89,000</span>
- <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>
- </div>
- </div>
- <div class="swiper-pagination"></div>
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='004'}">
- <!-- 4. 잇 아이템 -->
- <div class="content main_it" th:if="${mainLayoutData.BestItemList != null}">
- <div class="cont_head">
- <p class="displayH" id="id004">
- <input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
- </p>
- <!-- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">-->
- <!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
- <!-- <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_BEST_MAIN);"><span>전체보기</span></a>-->
- <!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
- <!-- </th:block>-->
- </div>
- <div class="cont_body">
- <div class="it_nav">
- <ul>
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.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>
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.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 sUiXc "> <!-- item_prod ranker d_detail -->
- <div class="item_state"> <!-- item_state AD soldout -->
- <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 th:text="${bestItemStat.count}"></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="BLACK-a" class="vLHTC 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="BLACK-a" class="vLHTC 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}">BRAND NAME</p>
- <div class="itemComment" th:unless="${bestItemData.goodsTnm == null or bestItemData.goodsTnm == ''}" th:text="${bestItemData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
- <div class="itemName" th:text="${bestItemData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]]
- <span class="itemPrice_original" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${#numbers.formatInteger(bestItemData.listPrice,3,'COMMA')}">89,000</span>
- <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 class="swiper-controls">
- <div class="swiper-scrollbar"></div>
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='005' and !mainLayoutData.ContentsList.empty}">
- <!-- 5. 프로모션배너 -->
- <div class="content main_2stage" th:if="${mainLayoutData.ContentsList != null}">
- <div class="cont_head dpnone">
- <p class="t_c">프로모션배너</p>
- </div>
- <div class="cont_body">
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
- <th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
- <div class="bnnbox_crop" th:if="${ContentsData.contentsType=='1'}">
- <div class=""> <!--style="width: 100%;height: 230px;float: none;overflow: hidden;"-->
- <a th:href="${ContentsData.strVar1}" target="_blank">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
- </a>
- </div>
- </div>
- <div class="bnnbox_crop" th:if="${ContentsData.contentsType=='2'}">
- <div class="bnn_half">
- <a th:href="${ContentsData.strVar1}" target="_blank">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
- </a>
- </div>
- <div class="bnn_half">
- <a th:href="${ContentsData.strVar2}" target="_blank">
- <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
- </a>
- </div>
- </div>
- </th:block>
- </th:block>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='006'}">
- <!-- 6. 타임딜 : 슬라이드 -->
- <th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
- <div class="content wide main_deal" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
- <div class="cont_head">
- <p class="displayH" id="id006">
- <input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
- </p>
- <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);"><span>전체보기</span></a>
- <div class="deal_progress">
- <div class="bar_current" id="barCurrent" style="width:33.333%"><span>HERE</span></div>
- <div class="bar_bg"></div>
- </div>
- <th:block th:each="socialData, socialStat : ${mainLayoutData.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="hotdeal">
- <div id="countdown">
- <div id="tiles"></div>
- </div>
- <div class="count_time">
- <span>HOURS</span>
- <span>MINS</span>
- <span>SECS</span>
- </div>
- </div>
- </div>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-deal">
- <div class="swiper-wrapper">
- <!-- <th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">-->
- <th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
- <div class="swiper-slide" th:if="${goodsStat.count<21}">
- <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.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}">BRAND NAME</p>
- <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
- <div class="itemName" th:text="${goodsData.goodsNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
- <p class="itemPrice">
- [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
- <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,0,'COMMA')} + '원'"></span>
- <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'"></span>
- <!--<span class="itemPercent" th:if="${planningGoods.currPrice != planningGoods.listPrice}" th:text="${(planningGoods.listPrice == 0 ? 0 : #numbers.formatDecimal((planningGoods.listPrice - planningGoods.currPrice) / (planningGoods.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>-->
- </p>
- </a>
- </div>
- </div>
- </div>
- </th:block>
- <!-- </th:block>-->
- </div>
- <div class="swiper-controls">
- <div class="swiper-scrollbar"></div>
- </div>
- </div>
- </div>
- </div>
- </th:block>
- </th:block>
- <th:block th:if="${contentsLoc=='007'}">
- <!-- 7. 브랜드픽 -->
- <div class="content main_pick" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
- <div class="cont_head">
- <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}">브랜드 PICK1</p>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-pick-nav">
- <div class="swiper-wrapper">
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
- <div class="swiper-slide"><img th:src="${@environment.getProperty('domain.image')+ContentsData.brandGroupImg}"></div>
- </th:block>
- </div>
- <div class="swiper-button-prev "></div>
- <div class="swiper-button-next "></div>
- </div>
- </div>
- <div class="swiper-container post-pick-for">
- <div class="swiper-wrapper">
- <th:block th:each="brandPickData, brandPickStat : ${mainLayoutData.brandPickList}">
- <div class="swiper-slide">
- <div class="pick_look">
- <div class="swiper-container post-lookbook">
- <div class="swiper-wrapper" id="id007">
- <th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
- <div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
- <a th:href="${bannerData.strVar1}">
- <div class="text_box">
- <p class="title">
- <input type="hidden" name="title" th:value="${bannerData.strTitle1}">
- </p>
- <p class="sub_text" th:text="${bannerData.subText1}"> 2020 FALL / WINTER 신상살펴보기1</p>
- </div>
- <div class="img_box">
- <img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="barnd lookbook">
- </div>
- </a>
- </div>
- </th:block>
- </div>
- <div class="swiper-controls">
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- <div class="pick_item">
- <div class="itemGrp">
- <th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
- <div class="item_prod" th:if="${goodsStat.count<4}">
- <div class="item_state">
- <button type="button" class="itemLike" tabindex="0" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM007', planDtlSq=''">관심상품 추가</button>
- <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="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
- </div>
- <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
- <div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
- <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
- <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>
- </div>
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='008'}">
- <!-- 8. 가로 긴 배너 슬라이드 -->
- <!-- bnn_1stage -->
- <div class="content wide main_1stage" th:if="${!mainLayoutData.ContentsList.empty}">
- <div class="cont_head dpnone">
- <p class="t_c">배너 슬라이드</p>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-bnnWide">
- <div class="swiper-wrapper ">
- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
- <div class="swiper-slide silderBannerArea">
- <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
- <a th:href="${ContentsData.strVar1}">
- <div class="bnnbox" style="background:#e3e7ea;">
- <div class="txtWrap bannerNote">
- <p class="noteArea"> <!--th:text="${ContentsData.strTitle1}"-->
- <input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
- </p>
- <!--<p>아우터 + 이너 단독세일</p>--> <!-- br 태그 줄바꿈해야함-->
- <!-- <button type="button" class="btn">VIEW MORE</button>-->
- </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>
- <div class="swiper-button-prev "></div>
- <div class="swiper-button-next "></div>
- </div>
- </div>
- <div class="cont_foot dpnone">
- CONT-FOOT
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='009'}">
- <!-- 9. MD추천 스타일 -->
- <div class="content main_recomm" >
- <div class="cont_head">
- <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
- </div>
- <div class="cont_body">
- <div class="sec_head">
- <div class="filter action tag_list">
- <th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}" >
- <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
- <button class="btn" th:attr="data-tab=${'tag'+titleStat.count}" th:text="${titleData.mdTitle}">따뜻한 무드2</button>
- </th:block>
- </th:block>
- </div>
- </div>
- <div class="sec_body">
- <th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}">
- <div th:id="${'tag'+titleStat.count}" class="tagitem" > <!--th:classappend="${titleStat.count} == 1? active"-->
- <div class="swiper-container post-recomm">
- <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" tabindex="0" 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=" vLHTC 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:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
- <div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
- <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
- <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
- <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>
- <div class="swiper-controls">
- <div class="swiper-pagination"></div>
- </div>
- </div>
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='011'}">
- <!-- 11. TV 슬라이드 -->
- <div class="content wide main_tv" th:if="${mainLayoutData.ContentsList != null}">
- <div class="cont_head">
- <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
- </div>
- <div class="cont_body">
- <div class="swiper-container post-tv">
- <div class="swiper-wrapper">
- <th:block th:each="item, stat : ${mainLayoutData.ContentsList}">
- <div class="swiper-slide">
- <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>
- </div>
- </div>
- </th:block>
- </div>
- <div class="swiper-button-prev white"></div> <!-- 클래스명 white 추가 -->
- <div class="swiper-button-next white"></div>
- </div>
- <div class="swiper-controls">
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${contentsLoc=='010'}">
- <!-- 10. 당신을 위한 제안 -->
- <div class="content main_foryou">
- <div class="cont_head">
- <p class="displayH" th:text="${mainLayoutData.contentsTitle}">당신을 위한 제안</p>
- <span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
- </div>
- <div class="cont_body">
- <div class="post-sug fy_nav">
- <div class="swiper-container">
- <div class="swiper-wrapper" id="keywordArea">
- </div>
- </div>
- <div class="swiper-controls">
- <div class="swiper-pagination"></div>
- </div>
- </div>
- <div id="recomItemArea">
- </div>
- </div>
- </div>
- </th:block>
- </th:block>
- <!-- End Of Main Contents -->
- </div>
- </div>
- <script th:inline="javascript">
- /* 핫딜 countDown */
- var target_date = '';
- if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
- target_date = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
- }
- if(target_date != null && target_date != ''){
- // var target_date = new Date().getTime() + (1000*3600*7); // set the countdown date
- var days, hours, minutes, seconds; // variables for time units
- var countdown = document.getElementById("tiles"); // get tag element
- getCountdown();
- var timerStop = setInterval(function () { getCountdown(); }, 1000);
- var fixDate = new Date().getTime();
- var fixTarget = (target_date - fixDate) / 1000;
- var width = (86400-fixTarget)*100/86400;
- function getCountdown(){
- // find the amount of "seconds" between now and target
- var current_date = new Date().getTime();
- var seconds_left = (target_date - current_date) / 1000;
- seconds_left = seconds_left % 86400;
- hours = pad( parseInt(seconds_left / 3600) );
- seconds_left = seconds_left % 3600;
- minutes = pad( parseInt(seconds_left / 60) );
- seconds = pad( parseInt( seconds_left % 60 ) );
- // format countdown string + set tag value
- countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
- var elem = document.getElementById("barCurrent");
- function progressMove(){
- width += (100-width)/fixTarget;
- elem.style.width = width + "%";
- }
- progressMove();
- if(seconds_left < 1){
- clearInterval(timerStop);
- elem.style.width = "100%";
- }
- }
- function pad(n) {
- return (n < 10 ? '0' : '') + n;
- }
- }
- // 컨텐츠 호출
- $(document).ready( function() {
- //$("#header").load("head.html");
- //$("#footer").load("foot.html");
- $(".tag_list .btn").eq(0).trigger('click');
- let randomNum = Math.floor( ( Math.random() * 4 ) );
- $(".it_nav .btn").eq(randomNum).trigger('click');
- // 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
- var pcId = gagajf.getCookie("RB_PCID");
- // 추천솔루션 API 호출
- //if(!gagajf.isNull(pcId)){
- fnGetEigenApi(pcId);
- //}
- });
- /**
- * EigenApi
- * size : 상품수
- * nh : 키워드수
- * */
- var fnGetEigenApi = function (id){
- // console.log('[fnGetEigenApi ID]'+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 = '';
- var itemTag2 = '';
- let dataJson = result.groupedResults;
- let key1 = Object.keys(dataJson);
- if (status === 'success') {
- if (!gagajf.isNull(result.products) && result.products.length > 0) {
- $("#keywordArea").html('');
- $("#recomItemArea").html('');
- $.each(result.products, function (idx, item) {
- if (idx == 0 || idx == 5) {
- keywordTag += '<div class="swiper-slide">\n';
- keywordTag += ' <ul>\n';
- }
- keywordTag += '<li>\n';
- keywordTag += ' <button class="btn btn_shape active" data-tab="fy' + (idx + 1) + '">\n';
- keywordTag += ' <div>\n';
- keywordTag += ' <span class="number">' + (idx + 1) + '</span>\n';
- keywordTag += ' <span>' + item.sourceId + '</span>\n';
- keywordTag += ' </div>\n';
- keywordTag += ' </button>\n';
- keywordTag += ' <a href="javascript:void(0);" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">자세히 보기</a>\n';
- keywordTag += '</li>\n';
- if (idx == 4 || idx == 9) {
- keywordTag += ' </ul>';
- keywordTag += '</div>';
- }
- for (var i=0; i<key1.length; i++) {
- var key = key1[i];
- // console.log("key : " + key + ", value : " + dataJson[key])
- if(item.sourceId == key){
- itemTag += '<div class="fy_item" id="fy'+(idx+1)+'">\n';
- $.each(dataJson[key], function (keyIdx, keyItem){
- if(idx%2 == 0) {
- if(keyIdx==0){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==1){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==2){
- itemTag += ' <div class="part lg">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==3){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==4){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==5){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==6){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }
- }else{
- if(keyIdx==0){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==1){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==2){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==3){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==4){
- itemTag += ' <div class="part">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==5){
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }else if(keyIdx==6){
- itemTag += ' <div class="part lg">\n';
- itemTag += ' <div class="item_prod">\n';
- itemTag += ' <div class="item_state">\n';
- itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
- itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
- itemTag += ' <div class="itemPic">\n';
- itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
- itemTag += ' </div>\n';
- itemTag += ' <div class="itemInfo">\n';
- itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
- itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
- itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
- itemTag += ' </div>\n';
- itemTag += ' </a>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- itemTag += ' </div>\n';
- }
- }
- });
- itemTag += '</div>\n';
- }
- }
- });
- $("#keywordArea").append(keywordTag);
- $("#recomItemArea").append(itemTag);
- // 위시 좋아요 처리
- if (cfCheckLogin()) {
- let targetT = $('.main_foryou').find('#recomItemArea').find('.item_state').find('button');
- //let targetTSize = targetT.length;
- targetT.each(function(){
- let goodsCd = $(this).attr('goodscd');
- var $this = $(this);
- let url = "/mypage/wish/list/check/"+goodsCd;
- var result = '';
- $.ajax({
- type: 'get'
- , async: false
- , url: url
- , success: function (data) {
- //likeit active
- if ("Y" == data){
- $this.addClass('likeit').addClass('active');
- }
- }
- });
- });
- }
- /* SLIDE - MAIN_RECOMM */
- //MAIN_RECOMM_키워드 탭
- $(".main_recomm .tag_list .btn").click(function () {
- var recommActive = $(this).attr('data-tab');
- $(".main_recomm .tag_list .btn").removeClass('active');
- $(".main_recomm .tagitem").removeClass('active');
- $(this).addClass('active');
- $('#' + recommActive).addClass('active');
- });
- function init() {
- if (main_recomm_slide != null) main_recomm_slide.destroy();
- var main_recomm_slide = new Swiper('.main_recomm .post-recomm', {
- slidesPerView: 5,
- slidesPerGroup: 5,
- speed: 1000,
- spaceBetween: 20,
- loop: true,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.main_recomm .swiper-pagination',
- clickable: true,
- },
- navigation: {
- nextEl: '.main_recomm .swiper-button-next',
- prevEl: '.main_recomm .swiper-button-prev',
- },
- observer: true,
- observeParents: true,
- });
- }
- init();
- /* SLIDE - MAIN_FORYOU */
- var cntNum = 0;
- var main_foryou_slide = new Swiper('.main_foryou .post-sug .swiper-container', {
- allowTouchMove: false,
- loop: false,
- effect: 'fade',
- autoHeight: false,
- autoplay: {
- delay: 25000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.post-sug .swiper-pagination',
- clickable: true,
- },
- on: {
- slideChange: function () {
- $(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
- $(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
- $(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
- foryouIndex = -1;
- if (cntNum === 0) {
- $('.fy_item').removeClass('active');
- $('#fy6').addClass('active');
- cntNum = 1;
- } else {
- $('.fy_item').removeClass('active');
- $('#fy1').addClass('active');
- cntNum = 0;
- }
- clearInterval(ti);
- ti = startTimeInterval();
- }
- },
- });
- function foryouInterval(_foryouIndex) {
- var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
- $(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
- $(foryouCateItems[_foryouIndex % 5]).removeClass("active");
- }
- function foryouFy_item(_Fy_itemIndex) {
- var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
- var fyActive = $(fynavItems).attr('data-tab');
- // $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- // $(".fy_item").addClass('active');
- $('#' + fyActive).addClass('active');
- }
- var foryouIndex = 0;
- var ti;
- function startTimeInterval() {
- return setInterval(function () {
- $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- foryouInterval(foryouIndex);
- foryouFy_item();
- if (foryouIndex >= 5) foryouIndex = 0;
- foryouIndex++;
- }, 5000);
- }
- $(".fy_nav .btn_shape").click(function () {
- var fyActive = $(this).attr('data-tab');
- $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- $(this).addClass('active');
- $('#' + fyActive).addClass('active');
- });
- $(".fy_nav ul li").click(function () {
- foryouIndex = $(this).index();
- clearInterval(ti);
- ti = startTimeInterval();
- });
- ti = startTimeInterval();
- }
- }
- });
- }
- /* SLIDE - MAIN_VISUAL */
- var agent = navigator.userAgent.toLowerCase();
- if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
- // ie일 경우
- var post01 = new Swiper('.main_visual .post-visual.swiper-container', {
- // Optional parameters
- loop: true,
- slidesPerView: 'auto',
- spaceBetween: 100,
- // initialSlide: 0,
- // 초기 슬라이드의 색인 번호입니다
- centeredSlides: true,
- // slidesOffsetBefore: 250,
- // 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
- speed : 1000,
- // Navigation arrows
- //autoplay: false,
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.post-visual .swiper-button-next',
- prevEl: '.post-visual .swiper-button-prev',
- },
- pagination: {
- el: '.main_visual .swiper-pagination',
- clickable: true,
- },
- });
- }else{
- // ie가 아닐 경우
- var post01 = new Swiper('.main_visual .post-visual', {
- // Optional parameters
- loop: true,
- slidesPerView: 'auto',
- spaceBetween: 70,
- // initialSlide: 0,
- // 초기 슬라이드의 색인 번호입니다
- centeredSlides: true,
- // slidesOffsetBefore: 250,
- // 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
- speed : 1000,
- // Navigation arrows
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.post-visual .swiper-button-next',
- prevEl: '.post-visual .swiper-button-prev',
- },
- pagination: {
- el: '.main_visual .swiper-pagination',
- clickable: true,
- },
- });
- }
- //MAIN_VISUAL_자동재생 스탑
- $(document).on('click','.main_visual .slide-curb-pause',function(e){
- post01.autoplay.stop();
- $(this).hide();
- $('.main_visual .slide-curb-play').show();
- });
- //MAIN_VISUAL_자동재생 시작
- $(document).on('click','.main_visual .slide-curb-play',function(e){
- post01.autoplay.start();
- $(this).hide();
- $('.main_visual .slide-curb-pause').show();
- });
- //210624_ 수정 : autoplay delay 변경.
- /* SLIDE - MAIN_TRENDY */
- var main_trendy_slide = new Swiper('.main_trendy .post-trendy', {
- watchSlidesProgress: true,
- watchSlidesVisibility: true,
- allowTouchMove: false,
- loop: false,
- loopAdditionalSlides : 1,
- speed : 1000,
- autoplay: {
- delay: 3000,
- disableOnInteraction:false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_trendy .swiper-button-next',
- prevEl: '.main_trendy .swiper-button-prev',
- },
- // pagination: {
- // el: '.main_trendy .swiper-pagination',
- // clickable: true,
- // },
- slidesPerView: 'auto',
- spaceBetween: 22,
- });
- main_trendy_slide.on('slideChange', function () {
- var newitemIndex = main_trendy_slide.activeIndex;
- var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;
- $(".main_trendy .swiper-slide").removeClass('scaleBig');
- $(".main_trendy .swiper-slide-visible").eq(0).addClass('scaleBig');
- $(".main_trendy .swiper-slide-visible").eq(3).addClass('scaleBig');
- $(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
- });
- main_trendy_slide.on('reachEnd', function () {
- var newitemIndex = main_trendy_slide.activeIndex + 1;
- var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;
- $(".main_trendy .swiper-slide").removeClass('scaleBig');
- $(".main_trendy .swiper-slide-visible").eq(1).addClass('scaleBig');
- $(".main_trendy .swiper-slide-visible").eq(4).addClass('scaleBig');
- $(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
- function l(n) {
- if (n.direction !== "none")
- {
- var t = n.direction === "next" ? n.currentIndex + 1 : n.currentIndex - 1;
- o(t)
- }
- }
- });
- /* SLIDE - MAIN_IT */
- var main_it_slide = new Swiper ('.main_it .post-it', {
- //loop: true,
- slidesPerView: 'auto',
- spaceBetween: 20,
- slidesPerView: 4,
- observer: true,
- observeParents: true,
- speed : 1000,
- freeMode: true,
- autoplay: false,
- scrollbar: {
- el: '.main_it .swiper-scrollbar',
- hide: false,
- },
- });
- //MAIN_IT_카테고리 탭
- $(".main_it .it_nav .btn").click(function(){
- var itActive = $(this).attr('data-tab');
- $(".main_it .it_nav .btn").removeClass('active');
- $(".main_it .it_item").removeClass('active');
- $(this).addClass('active');
- $('#'+itActive).addClass('active');
- });
- /* SLIDE - MAIN_DEAL */
- var main_deal_slide = new Swiper ('.main_deal .post-deal', {
- loop: false,
- slidesPerView: 4,
- // slidesToScroll: 4,
- // centeredSlides: true,
- speed : 1000,
- autoWidth: true,
- autoplay: false,
- freeMode:true,
- spaceBetween: 20,
- // autoplay: {
- // delay: 2000,
- // disableOnInteraction: false,
- // },
- scrollbar: {
- el: '.post-deal .swiper-scrollbar',
- hide: false,
- },
- });
- //210604_ 수정 : 브랜드 PICK 네비게이션 수정.
- /* 브랜드 PICK 갯수체크 210430_수정 */
- var pickCont = $('.post-pick-nav .swiper-slide');
- var pickLength = pickCont.length;
- if (pickLength < 7) { //210614_ 수정 : 슬라이드 갯수 7개 미만일시 롤링 기능 억제.
- /* SLIDE - MAIN_PICK */
- var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
- initialSlide: 0,
- slidesPerView: 6,
- // slidesPerGroup: 6,
- loop: false,
- watchOverflow : true,
- // slideToClickedSlide : true,
- slideToClickedSlide : true,
- loopAdditionalSlides : 1,
- watchSlidesVisibility: true,
- watchSlidesProgress: true,
- freeMode: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_pick .swiper-button-next',
- prevEl: '.main_pick .swiper-button-prev',
- },
- });
- } else {
- /* SLIDE - MAIN_PICK */
- var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
- initialSlide: 0,
- slidesPerView: 6,
- slidesPerGroup: 6,
- loop: false,
- // slideToClickedSlide : true,
- slideToClickedSlide : true,
- //loopAdditionalSlides : 1,
- watchSlidesVisibility: true,
- watchSlidesProgress: true,
- freeMode: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_pick .swiper-button-next',
- prevEl: '.main_pick .swiper-button-prev',
- },
- });
- }
- //210622_ 삭제 : 슬라이드 주석 삭제.
- var pickForCont = $('.post-pick-for > .swiper-wrapper > .swiper-slide');
- var pickForLength = pickForCont.length;
- if (pickForLength < 7) {
- var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
- initialSlide: 0,
- slidesPerView: 1,
- loop: false,
- watchOverflow : true,
- loopeSlides: 6,
- spaceBetween: 10,
- loopAdditionalSlides: 1,
- allowTouchMove: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- thumbs: {
- swiper: main_pick_nav
- },
- });
- }else{
- var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
- initialSlide: 0,
- slidesPerView: 1,
- loop: true,
- loopeSlides: 6,
- loopAdditionalSlides: 1,
- allowTouchMove: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- thumbs: {
- swiper: main_pick_nav
- },
- });
- }
- $(".main_pick .post-lookbook").each(function(index){
- var lookbookBnnCont = $(this).find('.swiper-slide');
- var lookbookBnnLength = lookbookBnnCont.length;
- if (lookbookBnnLength < 2) {
- var main_pick_lookbook = new Swiper ($(this), {
- slidesPerView: 1,
- speed : 1000,
- loop: false,
- watchOverflow: true, //loop와 함께 사용 불가.
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- pagination: {
- el: '.main_pick .post-lookbook .swiper-pagination',
- clickable: true,
- },
- });
- }else{
- var main_pick_lookbook = new Swiper ($(this), {
- slidesPerView: 1,
- speed : 1000,
- loop: true,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
- pagination: {
- el: '.main_pick .post-lookbook .swiper-pagination',
- clickable: true,
- },
- });
- }
- });
- //210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
- $(".main_1stage .post-bnnWide").each(function(index){
- var pickBnnCont = $(this).find('.swiper-slide');
- var pickBnnLength = pickBnnCont.length;
- if (pickBnnLength < 2) {
- /* SLIDE - MAIN_BANNER WIDE */
- var main_bnnWide_slide = new Swiper ($(this), {
- slidesPerView: 1,
- speed : 1000,
- initialSlide: 0,
- loop: false,
- watchOverflow: true, //loop와 함께 사용 불가.
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_1stage .swiper-button-next',
- prevEl: '.main_1stage .swiper-button-prev',
- },
- // allowTouchMove : false,
- // centeredSlides: true,
- });
- }else{
- /* SLIDE - MAIN_BANNER WIDE */
- var main_bnnWide_slide = new Swiper ($(this), {
- slidesPerView: 1,
- speed : 1000,
- initialSlide: 0,
- loop: true,
- autoplay: {
- delay: 4000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_1stage .swiper-button-next',
- prevEl: '.main_1stage .swiper-button-prev',
- },
- // allowTouchMove : false,
- // centeredSlides: true,
- });
- }
- });
- /* SLIDE - MAIN_RECOMM */
- //MAIN_RECOMM_키워드 탭
- $(".main_recomm .tag_list .btn").click(function(){
- var recommActive = $(this).attr('data-tab');
- $(".main_recomm .tag_list .btn").removeClass('active');
- $(".main_recomm .tagitem").removeClass('active');
- $(this).addClass('active');
- $('#'+recommActive).addClass('active');
- });
- function init(){
- if(main_recomm_slide != null) main_recomm_slide.destroy();
- var main_recomm_slide = new Swiper ('.main_recomm .post-recomm', {
- slidesPerView: 5,
- slidesPerGroup: 5,
- speed : 1000,
- spaceBetween: 20,
- loop : true,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.main_recomm .swiper-pagination',
- clickable: true,
- },
- navigation: {
- nextEl: '.main_recomm .swiper-button-next',
- prevEl: '.main_recomm .swiper-button-prev',
- },
- observer:true,
- observeParents: true,
- });
- }
- init();
- /* SLIDE - MAIN_FORYOU */
- var cntNum = 0;
- var main_foryou_slide = new Swiper ('.main_foryou .post-sug .swiper-container', {
- allowTouchMove: false,
- loop: false,
- effect: 'fade',
- autoHeight: false,
- autoplay: {
- delay: 25000,
- disableOnInteraction: false,
- },
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.post-sug .swiper-pagination',
- clickable: true,
- },
- on : {
- slideChange: function(){
- $(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
- $(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
- $(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
- foryouIndex = -1;
- if(cntNum === 0){
- $('.fy_item').removeClass('active');
- $('#fy6').addClass('active');
- cntNum = 1;
- } else {
- $('.fy_item').removeClass('active');
- $('#fy1').addClass('active');
- cntNum = 0;
- }
- clearInterval(ti);
- ti = startTimeInterval();
- }
- },
- });
- function foryouInterval(_foryouIndex) {
- var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
- $(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
- $(foryouCateItems[_foryouIndex % 5]).removeClass("active");
- }
- function foryouFy_item(_Fy_itemIndex) {
- var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
- var fyActive = $(fynavItems).attr('data-tab');
- // $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- // $(".fy_item").addClass('active');
- $('#'+fyActive).addClass('active');
- }
- var foryouIndex = 0;
- var ti;
- function startTimeInterval() {
- return setInterval(function () {
- $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- foryouInterval(foryouIndex);
- foryouFy_item();
- if (foryouIndex >= 5) foryouIndex = 0;
- foryouIndex++;
- }, 5000);
- }
- $(".fy_nav .btn_shape").click(function(){
- var fyActive = $(this).attr('data-tab');
- $(".fy_nav .btn_shape").removeClass('active');
- $(".fy_item").removeClass('active');
- $(this).addClass('active');
- $('#'+fyActive).addClass('active');
- });
- $(".fy_nav ul li").click(function(){
- foryouIndex = $(this).index();
- clearInterval(ti);
- ti = startTimeInterval();
- });
- ti = startTimeInterval();
- /* SLIDE - MAIN_TV */
- //210629_ 수정 : 슬라이드 1개일 때, loop랑 롤링 제거.
- var mainTvCont = $('.main_tv .swiper-slide');
- var mainTvLength = mainTvCont.length;
- if (mainTvLength < 2) {
- var main_tv_slide = new Swiper ('.main_tv .post-tv', {
- loop: false,
- watchOverflow:true,
- slidesPerView: 'auto',
- spaceBetween: 170,
- centeredSlides: true,
- speed : 1000,
- autoplay: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_tv .swiper-button-next',
- prevEl: '.main_tv .swiper-button-prev',
- },
- pagination: {
- el: '.main_tv .swiper-pagination',
- clickable: true,
- },
- });
- }else{
- var main_tv_slide = new Swiper ('.main_tv .post-tv', {
- loop: true,
- slidesPerView: 'auto',
- spaceBetween: 170,
- centeredSlides: true,
- speed : 1000,
- autoplay: false,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- navigation: {
- nextEl: '.main_tv .swiper-button-next',
- prevEl: '.main_tv .swiper-button-prev',
- },
- pagination: {
- el: '.main_tv .swiper-pagination',
- clickable: true,
- },
- });
- }
- // 스크립트 제거
- 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() {
- // 몰메인 <br> 태그
- $('.mainTitle').each(function (){
- var brText = $(this).find("input[name=mainTitlee]").val();
- // let tag = brText.replace(/(<br>|<br\/>|<br \/>)/g, '<br>');
- let tag = fnRemoveHTML(brText);
- $(this).append(tag);
- });
- // $('.mainSubTitle').each(function (){
- // var brText = $(this).find("input[name=mainSubTitlee]").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);
- }
- });
- // 잇아이템 <br> 태그
- if(!gagajf.isNull($("#id004").find("input[name=title]").val())){
- var id004Text = $("#id004").find("input[name=title]").val();
- let tag = fnRemoveHTML(id004Text);
- $("#id004").append(tag);
- }
- // 핫딜 <br> 태그
- if(!gagajf.isNull($("#id006").find("input[name=title]").val())){
- var id006Text = $("#id006").find("input[name=title]").val();
- let tag = fnRemoveHTML(id006Text);
- $("#id006").append(tag);
- }
- // 브랜드픽 <br> 태그
- $('#id007 .title').each(function (){
- let tag = '';
- if(!gagajf.isNull($(this).find("input[name=title]").val())){
- var brText = $(this).find("input[name=title]").val();
- tag = fnRemoveHTML(brText);
- $(this).append(tag);
- }
- });
- });
- /*]]>*/
- </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");
- </script>
- <!--// Enliple(모비온) Insite naver Quick end -->
- </th:block>
- </body>
- </html>
|