| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238 |
- <!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/GoodsLayoutMob">
- <!--
- *******************************************************************************
- * @source : GoodsDetailFormMob.html
- * @desc : 상품상세 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER DATE AUTHOR DESCRIPTION
- * === =========== ========== =============================================
- * 1.0 2021.04.02 eskim 최초 작성
- *******************************************************************************
- -->
- <body>
- <th:block layout:fragment="content">
- <script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
- <form id="nPayForm" name="nPayForm"></form>
- <form id="nPayWishForm" name="nPayWishForm" method="get">
- <input type="hidden" name="SHOP_ID" />
- <input type="hidden" name="ITEM_ID" />
- </form>
- <form name="cartForm" id="cartForm" method="post">
- <input type="hidden" name="mode">
- <input type="hidden" name="goodsCd" th:value="${params.goodsCd}" />
- <input type="hidden" name="contentsLoc" th:value="${params.contentsLoc}" />
- <input type="hidden" name="ithrCd" th:value="${params.ithrCd}" />
- <input type="hidden" name="planDtlSq" th:value="${params.planDtlSq}" />
- <input type="hidden" name="adminYn" th:value="${params.adminYn}" />
- <input type="hidden" name="optCd" />
- <input type="hidden" name="optCd1" />
- <input type="hidden" name="optCd2" />
- <input type="hidden" name="addPrice" />
- <input type="hidden" name="ordQty" />
- <input type="hidden" name="stock" />
- <input type="hidden" name="minOrdQty" th:value="${goodsInfo.minOrdQty}"/>
- <input type="hidden" name="maxOrdQty" th:value="${goodsInfo.maxOrdQty}"/>
- <input type="hidden" name="currPrice" th:value="${goodsInfo.currPrice}"/>
- <input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
- <input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
- <main role="" id="" class="container pd" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
- <!-- ★ 컨텐츠 시작 -->
- <section class="pd_detail">
- <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
- <div class="pd_info">
- <div class="pd_info1" data-speed="10">
- <div class="inner wide" th:if="${(goodsImgList != null and !goodsImgList.empty) or (goodsVideoList != null and !goodsVideoList.empty)}">
- <div class="thumb_box">
- <div class="area_slider">
- <div class="swiper-container thumb_list">
- <div class="swiper-wrapper">
- <th:block th:each="goodsVideo, status : ${goodsVideoList}">
- <div class="swiper-slide">
- <div class="movbox">
- <th:block th:if="${goodsVideo.videoGb == 'Y'}">
- <iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- <!-- <div id="utbplayer"></div>
- <script src="https://www.youtube.com/iframe_api"></script>아래 원문에서 복잡하게 기술되었던 부분
- <script th:inline="javascript">
- /*<![CDATA[*/
- var player;
- function onYouTubeIframeAPIReady(){
- player = new YT.Player('utbplayer',{
- width:'100%',
- videoId:[[${goodsVideo.kmcKey}]],
- playerVars:{'autoplay':1,'playsinline':1},
- events:{ 'onReady':onPlayerReady,
- 'onStateChange': onPlayerStateChange
- }
- });
- }
- function onPlayerReady(e){
- e.target.mute();
- e.target.playVideo();
- }
- var done = false;
- function onPlayerStateChange(event) {
- if (event.data == YT.PlayerState.PLAYING && !done) {
- setTimeout(stopVideo, 6000);
- done = true;
- }
- }
- function stopVideo() {
- player.stopVideo();
- }
- /*]]>*/
- </script> -->
- </th:block>
- <th:block th:unless="${goodsVideo.videoGb == 'Y'}">
- <button id="prodMovBtn" type="button" class="btn_play" data-setplay="play">동영상보기</button>
- <iframe id="child" class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey}" frameborder="0" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe>
- </th:block>
- </div>
- </div>
- </th:block>
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')? (status.count +1): status.count }">
- <div class="swiper-slide" th:id="${'navLocate'+ count}"
- th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1')
- or #strings.contains(goodsImg.sysImgNm,'_L1')
- or #strings.contains(goodsImg.sysImgNm,'_L2'))}">
- <div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div> <!-- mov -->
- </th:block>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- <!-- 210728_ 수정 : 팝업 좌우버튼 추가. -->
- <div class="swiper-button-next"></div>
- <div class="swiper-button-prev"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="inner">
- <!-- 210409_ 구조변경 : .covered 추가 -->
- <div class="covered">
- <div class="timer_box" style="display:none;">
- <p>
- <span class="tt">남은시간</span>
- <span class="timer">
- <em id="d-days">0</em>
- <em id="d-hours">0</em>
- <em id="d-minutes">0</em>
- <em id="d-seconds">0</em>
- </span>
- </p>
- </div>
- <div class="descript_box">
- <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
- <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
- <p class="price_blk">
- <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
- <span class="org_price" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" ><del><em th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</em>원</del></span>
- <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
- </p>
- <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
- <div class="btn_group_flex" th:if="${goodsCouponList != null and !goodsCouponList.empty}">
- <div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
- </div>
- </div>
- </div>
- </div>
- <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
- <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
- </div>
- <div class="inner" th:if="${goodsInfo.selfGoodsYn =='Y' and goodsInfo.goodsType =='G056_N'}"> <!-- 자사상품,일반상품 -->
- <div class="option_box">
- <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
- <div class="opt_header">
- <span class="title">컬러</span>
- <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
- </div>
- <ul>
- <li th:each="goodsOption1, status : ${goodsOption1List}">
- <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]],'IN15_01')"> <!-- 해당 컬러 상품페이지로 이동 -->
- <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </a>
- </li>
- </ul>
- </div>
- <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
- <div class="opt_header">
- <span class="title">사이즈</span>
- <span class="size">
- <em class="selectOptCd1"></em>
- <em class="selectOptCd1addPrice"></em>
- </span>
- </div>
- <div class="form_field">
- <div th:each="goodsOption2, status : ${goodsOption2List}">
- <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
- th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
- <th:block th:if="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
- <label th:for="${goodsOption2.optCd}"><span th:text="${goodsOption2.optCd2}" >90</span></label>
- </th:block>
- <th:block th:unless="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}">
- <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )"><span th:text="${goodsOption2.optCd2}">90</span></label>
- </th:block>
- </div>
- </div>
- </div>
- <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
- </div>
- </div>
- <div class="inner" th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
- <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
- <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
- <script type="text/javascript" >
- /*버튼설정*/
- naver.NaverPayButton.apply({
- BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
- TYPE : "MA", // 버튼 모음 종류 설정
- COLOR : 1, // 버튼 모음의 색 설정
- COUNT : 2, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
- ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
- BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
- WISHLIST_BUTTON_HANDLER : wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
- "":""
- });
-
- /*네이버구매하기*/
- function buy_nc(url) {
- $(".container").addClass('btPop_open');
- }
-
- <!-- 구매불가 -->
- function not_buy_nc() {
- mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
- return false;
- }
-
- <!-- 찜하기 -->
- function wishlist_nc() {
- let goodsCd = "[[${goodsInfo.goodsCd}]]";
- let goodsNm = "[[${goodsInfo.goodsNm}]]";
- let colorCd = "[[${goodsInfo.colorCd}]]";
- let currPrice = "[[${goodsInfo.currPrice}]]";
- let sysImgNm = "[[${goodsInfo.sysImgNm}]]";
- let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
-
- let data = {};
- data.goodsCd = goodsCd;
- data.goodsNm = goodsNm;
- data.colorCd = colorCd;
- data.currPrice = currPrice;
- data.sysImgNm = sysImgNm;
- data.selfGoodsYn = selfGoodsYn;
-
- let jsonData = JSON.stringify(data);
-
- $.ajax( {
- type : "POST",
- url : "/pg/create/npay/zzim",
- dataType : 'json',
- data : jsonData,
- beforeSend : function(xhr, settings) {
- xhr.setRequestHeader("AJAX" , "true");
- xhr.setRequestHeader('Accept' , 'application/json');
- xhr.setRequestHeader('Content-Type' , 'application/json');
- },
- error: function(xhr, status, error) {
- mcxDialog.alert(status + '; ' + error);
- },
- success : function(result) {
- if (result.state == "success") {
- $('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
- $('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);
-
- document.nPayWishForm.action = result.actionMobile;
- document.nPayWishForm.submit();
- } else {
- mcxDialog.alert(result.message);
- }
- }
- });
- }
- </script>
- </th:block>
- </div>
- <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
- (goodsCouponList != null and !goodsCouponList.empty) or
- (tmtbList != null and !tmtbList.empty) or
- (freeGoodsList != null and !freeGoodsList.empty) or
- (goodsCoupon1List != null and !goodsCoupon1List.empty)}" >
- <div class="benefit_box">
- <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or
- (tmtbList != null and !tmtbList.empty) or
- (freeGoodsList != null and !freeGoodsList.empty) or
- (goodsCoupon1List != null and !goodsCoupon1List.empty)}" >
- <dt>쇼핑혜택</dt>
- <dd>
- <th:block th:if="${goodsCoupon1List != null and !goodsCoupon1List.empty}">
- <span th:each="goodsCoupon, status : ${goodsCoupon1List}" th:if="${status.first}"><em>
- <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
- <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
- </em> 즉시할인</span>
- </th:block>
- <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
- <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
- <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
- <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
- </em> 쿠폰 할인</span>
- </th:block>
- <th:block th:if="${tmtbList != null and !tmtbList.empty}">
- <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
- <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'원'}"></th:block></em> 이상 구매 시
- <em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
- </span>
- </th:block>
- <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
- <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
- <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'N'}" th:text="${'외 택1'}"></th:block></span>
- <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
- </dd>
- </dl>
- <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
- <dt>카드혜택</dt>
- <dd>
- <th:block th:each="cardInfo, status : ${cardInfoList}">
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
- <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
- </th:block>
- <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
- </dd>
- </dl>
- </div>
- </div>
- </div>
- <div class="inner tmtb" th:if="${goodsList != null and !goodsList.empty}" >
- <div class="pd_together" id="goodsTmtbArea">
- <h3 class="tit">
- 함께하면 할인되는 다다익선 상품
- </h3>
- <div class="area_slider">
- <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
- <div class="swiper-wrapper">
- <div class="swiper-slide" th:each="goodsInfo, status : ${goodsList}">
- <div class="item_prod">
- <div class="item_state">
- <button type="button" class="itemLike enp_mobon_wish" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsInfo.goodsCd}, goodsNm=${goodsInfo.goodsFullNm}, ithrCd='IN15_02', contentsLoc='', planDtlSq=''">관심상품 추가</button>
- <a href="javascript:void(0);" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], '','IN15_02','','','pc_detail');" class="itemLink" >
- <div class="itemPic">
- <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=156'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </div>
- <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
- <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
- <p class="itemPrice">
- <th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"></th:block>
- </p>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="inner wide">
- <div class="brand_home">
- <a href="javascript:void(0);" class="link_go" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" th:text="|${goodsInfo.brandGroupNm} 브랜드홈|" >NBA 브랜드홈</a>
- </div>
- </div>
- <div class="inner wide">
- <div class="content pd_descrp">
- <div class="cont_head">
- <h3 class="sr-only">상품상세정보</h3>
- </div>
- <div class="cont_body">
- <!-- 상품설명 노출 -->
- <div class="descrp_box" th:if="${goodsInfo.tobeFormYn == 'Y'}">
- <div class="desc_simple"> <!-- 상품 간략설명-->
- <span class="tit_desc" th:if="${goodsInfo.goodsTitle != null and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
- <p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
- 슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다.
- </p>
- </div>
- <div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
- <span class="tit_desc">상품특징</span>
- <p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
- - 지퍼플러 장식을 더해 완성도를 높여줌
- </p>
- </div>
- </div>
- <!-- //상품설명 노출 -->
- <!-- 공지사항 노출 -->
- <div class="mdhtml_box bnnoti" th:if="${goodsNoticeList != null and !goodsNoticeList.empty}">
- <th:block th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
- </div>
- <!-- 상세 동영상 노출 -->
- <div class="mdhtml_box" th:if="${goodsDescVideoList != null and !goodsDescVideoList.empty}">
- <!-- 관리자 에디터입력 내용 공지 html -->
- <th:block th:each="goodsVideo, status : ${goodsDescVideoList}">
- <div class="movblock">
- <th:block th:if="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
- <div style="height:4rem"></div><!-- 여백용 html -->
- <iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </th:block>
- <th:block th:unless="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
- <div style="height:4rem"></div><!-- 여백용 html -->
- <iframe th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey+'?player_version=html5' }" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
- </th:block>
- </div>
- </th:block>
- </div>
- <!-- 상세 베너 -->
- <div class="mdhtml_box bnnoti" th:if="${goodsDescBannerList != null and !goodsDescBannerList.empty}">
- <th:block th:each="goodsBanner, status : ${goodsDescBannerList}" th:with="target=${(goodsBanner.linkTarget == 'N')? '_blank': '_self'}">
- <th:block th:if="${goodsBanner.linkUrl != null and not #strings.equals(goodsBanner.linkUrl, '#')}">
- <div style="height:4rem"></div><!-- 여백용 html -->
- <p><a th:href="${goodsBanner.linkUrl}" th:target="${target}"><img th:src="${imgUrl+goodsBanner.imgPath}" alt=""></a></p>
- </th:block>
- <th:block th:unless="${goodsBanner.linkUrl != null and not #strings.equals(goodsBanner.linkUrl, '#')}" >
- <div style="height:4rem"></div><!-- 여백용 html -->
- <p><img th:src="${imgUrl+goodsBanner.imgPath}" alt=""></p>
- </th:block>
- </th:block>
- </div>
- <!-- 관리자 에디터입력 내용 노출 -->
- <div class="mdhtml_box bnnoti" th:if="${goodsInfo.goodsTopDesc != null and !goodsInfo.goodsTopDesc.empty }" >
- <div style="height:4rem"></div><!-- 여백용 html -->
- <th:block th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block>
- </div>
- <th:block th:if="${goodsInfo.tobeFormYn == 'N' and goodsInfo.goodsDesc != null and !goodsInfo.goodsDesc.empty}" >
- <div style="height:4rem"></div><!-- 여백용 html -->
- <div class="mdhtml_box" >
- <div id="goodsDescHtml"></div>
- </div>
- </th:block>
- <th:block th:if="${goodsInfo.tobeFormYn == 'Y'}">
- <!-- 착용컷 노출 -->
- <div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_C1')
- or #strings.contains(goodsImgList,'_C2')
- or #strings.contains(goodsImgList,'_C3')
- or #strings.contains(goodsImgList,'_C4')
- or #strings.contains(goodsImgList,'_C5')}">
- <span class="tit_view">OUTFIT VIEW</span>
- <span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
- or #strings.contains(goodsImg.sysImgNm,'_C2')
- or #strings.contains(goodsImg.sysImgNm,'_C3')
- or #strings.contains(goodsImg.sysImgNm,'_C4')
- or #strings.contains(goodsImg.sysImgNm,'_C5')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //착용컷 노출 -->
- <!-- 상품컷 노출 -->
- <div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
- or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
- or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
- or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
- or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
- or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
- or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
- or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
- or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
- or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
- or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
- <span class="tit_view">PRODUCT VIEW</span>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01') or #strings.contains(goodsImg.sysImgNm,'_02')
- or #strings.contains(goodsImg.sysImgNm,'_D1') or #strings.contains(goodsImg.sysImgNm,'_D2')
- or #strings.contains(goodsImg.sysImgNm,'_D3') or #strings.contains(goodsImg.sysImgNm,'_D4')
- or #strings.contains(goodsImg.sysImgNm,'_D5') or #strings.contains(goodsImg.sysImgNm,'_D6')
- or #strings.contains(goodsImg.sysImgNm,'_D7') or #strings.contains(goodsImg.sysImgNm,'_D8')
- or #strings.contains(goodsImg.sysImgNm,'_D9') or #strings.contains(goodsImg.sysImgNm,'_D10')
- or #strings.contains(goodsImg.sysImgNm,'_D11') or #strings.contains(goodsImg.sysImgNm,'_D12')
- or #strings.contains(goodsImg.sysImgNm,'_D13') or #strings.contains(goodsImg.sysImgNm,'_D14')
- or #strings.contains(goodsImg.sysImgNm,'_D15') or #strings.contains(goodsImg.sysImgNm,'_D16')
- or #strings.contains(goodsImg.sysImgNm,'_D17') or #strings.contains(goodsImg.sysImgNm,'_D18')
- or #strings.contains(goodsImg.sysImgNm,'_D19') or #strings.contains(goodsImg.sysImgNm,'_D20')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //상품컷 노출 -->
- <!-- 원단 노출 -->
- <div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_F1')}">
- <span class="tit_view">FABRIC</span>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}" >
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //원단 노출 -->
- <!-- 라벨 노출 -->
- <div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1')
- or #strings.contains(goodsImgList,'_L2')}">
- <span class="tit_view">LABEL INFO</span>
- <div class="view">
- <span>
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
- or #strings.contains(goodsImg.sysImgNm,'_L2')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </span>
- </div>
- </div>
- <!-- //네이밍룰 안맞는 이미지 노출 -->
- <div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01')}">
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsImgList}" >
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- </th:block>
- <!-- 세트상품일 경우구상상품의 정보도 노출 -START -->
- <th:block th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
- <th:block th:each="goodsCompose, status : ${goodsComposeList}">
- <th:block th:if="${ goodsCompose.tobeFormYn == 'N' and goodsCompose.goodsDesc != null and !goodsCompose.goodsDesc.empty}" >
- <div style="height:4rem"></div><!-- 여백용 html -->
- <div class="mdhtml_box" >
- <div class="mdhtml_box" >
- <div th:id="${'goodsDescHtml_' + goodsCompose.compsGoodsCd}"></div>
- </div>
- </div>
- </th:block>
- <th:block th:if="${goodsCompose.tobeFormYn == 'Y'}">
- <!-- 상품명 -->
- <div class="mdhtml_box">
- <span class="tit_view" th:text="${goodsCompose.compsGoodsNm}">상품명</span>
- </div>
- <!-- 착용컷 노출 -->
- <div class="view_outfit_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_C1')
- or #strings.contains(goodsCompose.goodsImgList,'_C2')
- or #strings.contains(goodsCompose.goodsImgList,'_C3')
- or #strings.contains(goodsCompose.goodsImgList,'_C4')
- or #strings.contains(goodsCompose.goodsImgList,'_C5')}">
- <span class="tit_view">OUTFIT VIEW</span>
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${status.first}">
- <span class="model_info" th:text="${goodsImg.modelInfo}">(모델정보 : 185cm / 78kg / XL 착용)</span>
- </th:block>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
- or #strings.contains(goodsImg.sysImgNm,'_C2')
- or #strings.contains(goodsImg.sysImgNm,'_C3')
- or #strings.contains(goodsImg.sysImgNm,'_C4')
- or #strings.contains(goodsImg.sysImgNm,'_C5')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //착용컷 노출 -->
- <!-- 상품컷 노출 -->
- <div class="view_detail_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_01') or #strings.contains(goodsCompose.goodsImgList,'_02')
- or #strings.contains(goodsCompose.goodsImgList,'_D1') or #strings.contains(goodsCompose.goodsImgList,'_D2')
- or #strings.contains(goodsCompose.goodsImgList,'_D3') or #strings.contains(goodsCompose.goodsImgList,'_D4')
- or #strings.contains(goodsCompose.goodsImgList,'_D5') or #strings.contains(goodsCompose.goodsImgList,'_D6')
- or #strings.contains(goodsCompose.goodsImgList,'_D7') or #strings.contains(goodsCompose.goodsImgList,'_D8')
- or #strings.contains(goodsCompose.goodsImgList,'_D9') or #strings.contains(goodsCompose.goodsImgList,'_D10')
- or #strings.contains(goodsCompose.goodsImgList,'_D11') or #strings.contains(goodsCompose.goodsImgList,'_D12')
- or #strings.contains(goodsCompose.goodsImgList,'_D13') or #strings.contains(goodsCompose.goodsImgList,'_D14')
- or #strings.contains(goodsCompose.goodsImgList,'_D15') or #strings.contains(goodsCompose.goodsImgList,'_D16')
- or #strings.contains(goodsCompose.goodsImgList,'_D17') or #strings.contains(goodsCompose.goodsImgList,'_D18')
- or #strings.contains(goodsCompose.goodsImgList,'_D19') or #strings.contains(goodsCompose.goodsImgList,'_D20')}">
- <span class="tit_view">PRODUCT VIEW</span>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01') or #strings.contains(goodsImg.sysImgNm,'_02')
- or #strings.contains(goodsImg.sysImgNm,'_D1') or #strings.contains(goodsImg.sysImgNm,'_D2')
- or #strings.contains(goodsImg.sysImgNm,'_D3') or #strings.contains(goodsImg.sysImgNm,'_D4')
- or #strings.contains(goodsImg.sysImgNm,'_D5') or #strings.contains(goodsImg.sysImgNm,'_D6')
- or #strings.contains(goodsImg.sysImgNm,'_D7') or #strings.contains(goodsImg.sysImgNm,'_D8')
- or #strings.contains(goodsImg.sysImgNm,'_D9') or #strings.contains(goodsImg.sysImgNm,'_D10')
- or #strings.contains(goodsImg.sysImgNm,'_D11') or #strings.contains(goodsImg.sysImgNm,'_D12')
- or #strings.contains(goodsImg.sysImgNm,'_D13') or #strings.contains(goodsImg.sysImgNm,'_D14')
- or #strings.contains(goodsImg.sysImgNm,'_D15') or #strings.contains(goodsImg.sysImgNm,'_D16')
- or #strings.contains(goodsImg.sysImgNm,'_D17') or #strings.contains(goodsImg.sysImgNm,'_D18')
- or #strings.contains(goodsImg.sysImgNm,'_D19') or #strings.contains(goodsImg.sysImgNm,'_D20')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //상품컷 노출 -->
- <!-- 원단 노출 -->
- <div class="view_fabric_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_F1')}">
- <span class="tit_view">FABRIC</span>
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //원단 노출 -->
- <!-- 라벨 노출 -->
- <div class="view_label_box" th:if="${#strings.contains(goodsCompose.goodsImgList,'_L1')
- or #strings.contains(goodsCompose.goodsImgList,'_L2')}">
- <span class="tit_view">LABEL INFO</span>
- <div class="view">
- <span>
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
- or #strings.contains(goodsImg.sysImgNm,'_L2')}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=250'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </span>
- </div>
- </div>
- <!-- //네이밍룰 안맞는 이미지 노출 -->
- <div class="view_detail_box" th:if="${not #strings.contains(goodsCompose.goodsImgList,'_01')}">
- <div class="view">
- <th:block th:each="goodsImg, status : ${goodsCompose.goodsImgList}" >
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </th:block>
- </div>
- </div>
- <!-- //라벨 노출 -->
- </th:block>
- </th:block>
- </th:block>
- <!-- 세트상품일 경우구상상품의 정보도 노출 -END -->
- <!-- 관리자 에디터입력 내용 노출 하다단 html -->
- <div class="mdhtml_box bnnoti" th:if="${goodsInfo.goodsDownDesc != null and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
- <!-- 브랜드 노출 -->
- <div class="brand_box">
- <p class="name" th:text="${goodsInfo.brandGroupNm}">TBJ 티비제이</p>
- <a href="javascript:void(0);" class="brend_home" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" ><span>브랜드 홈 바로가기</span></a>
- </div>
- <!-- //브랜드 노출 -->
- <!-- 상품필수정보 노출 -->
- <div class="required_box">
- <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
- <span class="title">상품고시정보</span>
- <div class="tbl type1">
- <table>
- <tbody>
- <tr th:each="goodsNoti, status : ${goodsNotiList}" >
- <th th:text="${goodsNoti.niItemNm}">스타일</th>
- <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
- <span class="title">상품고시정보</span>
- <th:block th:each="goodsCompose, status : ${goodsComposeList}">
- <div class="tbl type1">
- <table>
- <tbody>
- <tr th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
- <th th:text="${goodsNoti.niItemNm}">스타일</th>
- <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
- </tr>
- </tbody>
- </table>
- </div>
- </th:block>
- </div>
- <th:block th:if="${goodsInfo.goodsType == 'G056_N' and goodsSafeNo != null}" >
- <th:block th:if="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
- <div class="area_kcl no-mark">
- <div>
- <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 제품 상세정보 내 별도 표기</p>
- <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
- </div>
- </div>
- </th:block>
- <th:block th:unless="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
- <th:block th:if="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
- <div class="area_kcl">
- <div><i class="ico ico_kcl"></i></div>
- <div>
- <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 공급자적합성확인</p>
- <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
- </div>
- </div>
- </th:block>
- <th:block th:unless="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
- <div class="area_kcl" >
- <div><i class="ico ico_kcl"></i></div>
- <div>
- <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
- <p class="tit normal">
- <th:block th:if="${goodsSafeNo.certDiv}" th:text="${goodsSafeNo.certDiv}"></th:block>
- <th:block th:if="${goodsSafeNo.certOrganName}" th:text="${' /' + goodsSafeNo.certOrganName}"></th:block>
- </p>
- </th:block>
- <th:block th:unless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
- <p class="tit normal" >
- <th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block>
- </p>
- </th:block>
- <p class="normal" th:if="${goodsSafeNo.certNum}">
- <th:block th:if="${goodsSafeNo.certFormGb == 'G084_4' or goodsSafeNo.certFormGb == 'G084_5' }">
- <span>인증번호:</span> <th:block th:text="${goodsSafeNo.certNum}">CB123A123-1234</th:block>
- </th:block>
- <th:block th:unless="${goodsSafeNo.certFormGb == 'G084_4' or goodsSafeNo.certFormGb == 'G084_5' }">
- <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.certNum}">CB123A123-1234</a>
- </th:block>
- </p>
- </div>
- </div>
- </th:block>
- </th:block>
- <p class="t_info dot_info mt10">
- 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
- </p>
- </th:block>
- <th:block th:if="${goodsInfo.goodsType == 'G056_S'}">
- <th:block th:each="goodsCompose, status : ${goodsComposeList}">
- <th:block th:if="${goodsCompose.goodsSafeNo != null}">
- <th:block th:if="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
- <div class="area_kcl no-mark">
- <div>
- <p class="tit normal"><th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block> / 제품 상세정보 내 별도 표기</p>
- <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
- </div>
- </div>
- </th:block>
- <th:block th:unless="${goodsCompose.goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
- <th:block th:if="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
- <div class="area_kcl">
- <div><i class="ico ico_kcl"></i></div>
- <div>
- <p class="tit normal"><th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block> / 공급자적합성확인</p>
- <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
- </div>
- </div>
- </th:block>
- <th:block th:unless="${goodsCompose.goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
- <div class="area_kcl" >
- <div><i class="ico ico_kcl"></i></div>
- <div>
- <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
- <p class="tit normal" >
- <th:block th:if="${goodsCompose.goodsSafeNo.certDiv}" th:text="${goodsCompose.goodsSafeNo.certDiv}"></th:block>
- <th:block th:if="${goodsCompose.goodsSafeNo.certOrganName}" th:text="${' /' + goodsCompose.goodsSafeNo.certOrganName}"></th:block>
- </p>
- </th:block>
- <th:block th:unless="${goodsCompose.goodsSafeNo.certFormGb != 'G084_4' and goodsCompose.goodsSafeNo.certFormGb != 'G084_5' }">
- <p class="tit normal">
- <th:block th:if="${goodsCompose.goodsSafeNo.certFormNm}" th:text="${goodsCompose.goodsSafeNo.certFormNm}"></th:block>
- <th:block th:if="${goodsCompose.goodsSafeNo.certTypeNm}" th:text="${' ' + goodsCompose.goodsSafeNo.certTypeNm}"></th:block>
- </p>
- </th:block>
- <p class="normal" th:if="${goodsCompose.goodsSafeNo.certNum}">
- <th:block th:if="${goodsCompose.goodsSafeNo.certFormGb == 'G084_4' or goodsCompose.goodsSafeNo.certFormGb == 'G084_5' }">
- <span>인증번호:</span> <th:block th:text="${goodsCompose.goodsSafeNo.certNum}">CB123A123-1234</th:block>
- </th:block>
- <th:block th:unless="${goodsCompose.goodsSafeNo.certFormGb == 'G084_4' or goodsCompose.goodsSafeNo.certFormGb == 'G084_5' }">
- <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsCompose.goodsSafeNo.certNum})}"
- target="_blank" th:text="${goodsCompose.goodsSafeNo.certNum}">CB123A123-1234</a>
- </th:block>
- </p>
- </div>
- </div>
- </th:block>
- </th:block>
- <p class="t_info dot_info mt10" >
- 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
- </p>
- </th:block>
- </th:block>
- </th:block>
- <div class="area_infotbl">
- <span class="title">상품기본정보</span>
- <th:block th:if="${goodsInfo.goodsType == 'G056_N'} ">
- <div class="tbl type1">
- <table>
- <tbody>
- <tr>
- <th>상품코드</th>
- <td th:text="${goodsInfo.goodsCd}">14443216</td>
- </tr>
- <tr>
- <th>상품구분</th>
- <td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
- </tr>
- <tr>
- <th>브랜드</th>
- <td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
- </tr>
- <tr>
- <th>상품명</th>
- <td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
- </tr>
- <th:block th:if="${goodsNotiList != null and !goodsNotiList.empty}">
- <th:block th:each="goodsNoti, status : ${goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
- <tr>
- <th th:text="${goodsNoti.niItemNm}">제조사</th>
- <td th:text="${goodsNoti.niContent}"></td>
- </tr>
- </th:block>
- </th:block>
- <tr>
- <th>제조국</th>
- <td th:text="${goodsInfo.originNm}">베트남</td>
- </tr>
- </tbody>
- </table>
- </div>
- </th:block>
- <th:block th:unless="${goodsInfo.goodsType == 'G056_N'} ">
- <th:block th:if="${goodsComposeList != null and !goodsComposeList.empty}">
- <th:block th:each="goodsCompose, status : ${goodsComposeList}">
- <div class="tbl type1">
- <table>
- <tbody>
- <tr>
- <th>상품코드</th>
- <td th:text="${goodsCompose.compsGoodsCd}">14443216</td>
- </tr>
- <tr>
- <th>상품구분</th>
- <td th:text="${goodsCompose.goodsGbNm}">병행수입</td>
- </tr>
- <tr>
- <th>브랜드</th>
- <td th:text="${goodsCompose.brandGroupNm}">TBJ</td>
- </tr>
- <tr>
- <th>상품명</th>
- <td th:text="${goodsCompose.compsGoodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
- </tr>
- <th:block th:if="${goodsCompose.goodsNotiList != null and !goodsCompose.goodsNotiList.empty}">
- <th:block th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
- <tr>
- <th th:text="${goodsNoti.niItemNm}">제조사</th>
- <td th:text="${goodsNoti.niContent}"></td>
- </tr>
- </th:block>
- </th:block>
- <tr>
- <th>제조국</th>
- <td th:text="${goodsCompose.originNm}">베트남</td>
- </tr>
- </tbody>
- </table>
- </div>
- </th:block>
- </th:block>
- </th:block>
- <p class="t_info dot_info mt10">
- 주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
- </p>
- </div>
- </div>
- <!-- //상품필수정보 노출 -->
- </div>
- <div class="btn_more_box covered">
- <div class="btn_group_flex">
- <div>
- <button type="button" class="btn btn_default">
- <span>상세정보 더보기</span>
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="inner">
- <!-- 리뷰영역 -->
- <div class="riview_box" th:if="${reviewDisplayYn == 'Y'}">
- <div class="ex_review">
- <a href="javascript:void(0);" id="btn_pdReview_pop" th:onclick="cfGoodsReview([[${goodsInfo.goodsCd}]])">
- <span class="tit">리뷰<em class="number">(<th:block th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></span>
- <div class="star_score" th:if="${goodsInfo.reviewRegCnt > 0 }">
- <span class="star" th:with="starScore=${#numbers.formatDecimal((goodsInfo.score*100/5), 0,0)}">
- <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
- </span>
- <span class="score" th:text="|${goodsInfo.score}점|">4.3점</span>
- </div>
- <div class="star_score" th:unless="${goodsInfo.reviewRegCnt > 0 }">
- <span class="star">
- <em class="progbar" style="width:0%;"></em> <!-- 평점 style로 표기 -->
- </span>
- <span class="score">0점</span>
- </div>
- </a>
- </div>
- <div class="area_slider" id="btn_pdBestReview_pop" th:if="${bestReviewList != null and !bestReviewList.empty}">
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" th:each="bestReview, status : ${bestReviewList}" >
- <!-- 베스트 리뷰 등록시 노출 -->
- <div class="best_review">
- <a href="javascript:void(0);" th:onclick="cfGoodsReviewDetail([[${goodsInfo.goodsCd}]],'Y', '',[[${bestReview.reviewSq}]])">
- <div class="star_score" th:with="starScore=${#numbers.formatDecimal((bestReview.iscore*100/5), 0,0)}">
- <span class="star">
- <em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
- </span>
- <em class="ico ico_besttag"></em>
- </div>
- <div class="lap">
- <th:block th:if="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
- <div class="pic" >
- <th:block th:each="reviewAttach, attachStatus : ${bestReview.reviewAttachList}" th:if="${attachStatus.first}">
- <th:block th:if="${reviewAttach.fileGb == 'M'}" >
- <span class="thumb mov" th:style="${'background-image:url('+kollusMediaUrl+'/poster/'+reviewAttach.kmcKey+');'}"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
- </th:block>
- <th:block th:unless="${reviewAttach.fileGb == 'M'}" >
- <span class="thumb" th:style="${'background-image:url('+imgUrl+ reviewAttach.sysFileNm+');'}"></span>
- </th:block>
- </th:block>
- </div>
- </th:block>
- <th:block th:unless="${bestReview.reviewAttachList != null and !bestReview.reviewAttachList.empty}">
- <div class="pic none" >
- </div>
- </th:block>
- <div class="txt_best_review">
- <p th:text="${bestReview.reviewContent}">옷</p>
- </div>
- </div>
- </a>
- </div>
- <!-- //베스트 리뷰 등록시 노출 -->
- </div>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- <!-- //리뷰영역 -->
- <!-- 문의,사이즈정보,배송/교환/반품 -->
- <div class="exinfo_box">
- <ul>
- <li>
- <div class="ex_qna">
- <a href="javascript:void(0);" id="btn_pdQnaList_pop" th:onclick="cfGoodsQng([[${goodsInfo.goodsCd}]])">
- <span class="tit">문의<em class="number">(<th:block th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></span>
- </a>
- </div>
- </li>
- <li>
- <div class="ex_size">
- <a href="javascript:void(0)" id="btn_pdSizeInfo_pop" th:onclick="cfGoodsSizeInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.colorCd}]] )">
- <span class="tit">사이즈 정보</span>
- </a>
- </div>
- </li>
- <li>
- <div class="ex_shipping">
- <a href="javascript:void(0)" id="btn_pdDelivery_Pop" th:onclick="cfGoodsDelivery([[${goodsInfo.goodsCd}]])">
- <span class="tit">배송/교환/반품</span>
- </a>
- <!-- 해당 배송정보 선택노출 -->
- <span class="txt_shippingfee" th:if="${goodsInfo.delvFee > 0}">배송비 <th:block th:text="${#numbers.formatInteger(goodsInfo.delvFee, 0,'COMMA')}" ></th:block>원
- <th:block th:if="${goodsInfo.minOrdAmt > 0}">(<th:block th:text="${#numbers.formatInteger(goodsInfo.minOrdAmt, 0,'COMMA')}" ></th:block>원 이상 무료배송)</th:block>
- </span>
- <span class="txt_shippingfee" th:if="${goodsInfo.delvFee <= 0}">무료배송</span>
- <span class="txt_shippingfee" th:if="${goodsInfo.quikDelvYn == 'Y'}">총알배송(오전 10시까지 주문 시)</span>
- <!-- //해당 배송정보 선택노출 -->
- </div>
- </li>
- </ul>
- </div>
- <!-- //문의,사이즈정보,배송/교환/반품 -->
- </div>
- <div class="inner" id="otherGoodsArea" style="display:none;">
- <div class="recommendedArea">
- <!-- 이상품과 함께 본 상품영역-->
- <div class="pd_clickother" id="goodsTogetherbArea">
- </div>
- <!-- //이상품과 함께 본 상품영역-->
- <!-- STYLE24의 스타일링 추천 -->
- <div class="pd_recommend" th:if="${lookbookList != null and !lookbookList.empty}" th:with="ithrCd=aa , contentsLoc=bb" >
- <h3 class="tit">STYLE24의 스타일링 추천</h3>
- <!-- 상품이미지pic -->
- <div class="area_slider pic_img" >
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" th:each="lookbook, status : ${lookbookList}">
- <div class="page">
- <div class="pic">
- <span class="thumb" th:style="${'background-image:url(' + imgUrl+ lookbook.sysFileNm+');'}"></span>
- <!-- 상품피커 -->
- <th:block th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}"
- th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}">
- <div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}" >
- <div>
- <button type="button" th:onclick="fnLookbookPicker(this,[[${lookbookGoods.goodsCd}]]);"><span class="ico ico_picker"></span></button>
- <div class="pick_descr">
- <a href="javascript:void(0)"><th:block th:text="${lookbookGoods.goodsFullNm}"></th:block></a>
- </div>
- </div>
- </div>
- <!-- //상품피커 -->
- </th:block>
- </div>
- </div>
- </div>
- </div>
- <!-- Add Pagination -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- <!-- //상품이미지pic -->
- <!-- 상품이미지pic 리스트 -->
- <div class="area_slider pic_list" >
- <div class="box" th:each="lookbook, status : ${lookbookList}">
- <div class="swiper-container" th:if="${lookbook.lookbookGoodsList != null and !lookbook.lookbookGoodsList.empty}">
- <div class="swiper-wrapper">
- <div class="swiper-slide" th:each="lookbookGoods, goodsStatus : ${lookbook.lookbookGoodsList}" >
- <div class="item_prod" th:classappend="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}? 'unable' : ''"
- th:attr="goodsCd=${lookbookGoods.goodsCd}, optCdInfo=${lookbookGoods.optCdInfo},
- minOrdQty=${lookbookGoods.minOrdQty}, goodsType=${lookbookGoods.goodsType},
- ithrCd=${ithrCd}, contentsLoc=${contentsLoc}"> <!-- 판매불가 상품에 unable 추가 -->
- <div class="item_state">
- <th:block th:each="optCd : ${#strings.arraySplit(lookbookGoods.optCdInfo,',')}">
- <input type="hidden" name="lookbookGoodsOptCd" th:value="${optCd}"/>
- </th:block>
- <button type="button" class="itemLike" th:classappend="${lookbookGoods.wishYn == 'Y'}? 'likeit active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${lookbookGoods.goodsCd}, goodsNm=${lookbookGoods.goodsFullNm}, ithrCd=${ithrCd}, contentsLoc='', planDtlSq=''">관심상품 추가</button>
- <th:block th:if="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
- <a href="javascript:void(0);" class="itemLink" >
- </th:block>
- <th:block th:unless="${(lookbookGoods.stockQty <= 0 or lookbookGoods.soldoutYn == 'Y')}">
- <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${lookbookGoods.goodsCd}]], '','IN15_06','' )">
- </th:block>
- <div class="itemPic">
- <img class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+lookbookGoods.sysImgNm+'?RS=96'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </div>
- <p class="itemBrand" th:text="${lookbookGoods.brandGroupNm}">BRAND NAME</p>
- <div class="itemName" th:text="${lookbookGoods.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
- <p class="itemPrice" th:text="${#numbers.formatInteger(lookbookGoods.currPrice, 0,'COMMA')}">80,100</p>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="btn_group_flex">
- <div>
- <button type="button" class="btn btn_default" onclick="fnAddCartLookBookGoods(this);"><span>모두 쇼핑백 담기</span></button>
- </div>
- </div>
- </div>
- </div>
- <!-- //상품이미지pic 리스트 -->
- <script>
- $('#otherGoodsArea').css('display','block');
- </script>
- </div>
- <!-- //STYLE24의 스타일링 추천 -->
- <!-- 동일브랜드 추천상품 -->
- <div class="pd_clickother" id="goodsRecommendbArea">
- </div>
- <!-- //동일브랜드 추천상품 -->
- <!-- 이 상품과 비슷한 상품영역 -->
- <div class="pd_clickother" id="goodsLikebArea">
- </div>
- <!-- //이 상품과 비슷한 상품영역 -->
- </div>
- </div>
- <!-- 구매하기팝업 -->
- <div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">
- <a href="javascript:void(0);" class="btn btPop_close">Close </a>
- <div class="header btPop_head btPopAuto_head">
- 구매하기팝업
- </div>
- <div class="body btPop_body btPopAuto_body">
- <div class="option_result op1">
- <!-- 옵션 -->
- <div class="option_box">
- <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
- <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
- <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
- <div class="opt_header">
- <span class="title">컬러</span>
- <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
- </div>
- <ul>
- <li th:each="goodsOption1, status : ${goodsOption1List}">
- <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]], 'IN15_01')"> <!-- 해당 컬러 상품페이지로 이동 -->
- <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="">
- </a>
- </li>
- </ul>
- </div>
- <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
- <div class="opt_header">
- <span class="title">사이즈</span>
- <span class="size">
- <em class="selectOptCd1"></em>
- <em class="selectOptCd1addPrice"></em>
- </span>
- </div>
- <div class="form_field">
- <th:block th:each="goodsOption2, status : ${goodsOption2List}">
- <div>
- <th:block th:if="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}" >
- <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
- th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
- <label th:for="${goodsOption2.optCd}" ><span th:text="${goodsOption2.optCd2}">90</span></label>
- </th:block>
- <th:block th:unless="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}" >
- <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
- th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"/>
- <label th:for="${goodsOption2.optCd}" th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" ><span th:text="${goodsOption2.optCd2}">90</span></label>
- </th:block>
- </div>
- </th:block>
- </div>
- </div>
- <!-- 해당상품 품절시 노출 -->
- <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
- <!-- //해당상품 품절시 노출 -->
- <div class="opt_count">
- <div class="opt_header">
- <span class="title">수량</span>
- </div>
- <div class="number_count">
- <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
- <input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" readonly>
- <input type="hidden" name="coption" value="" th:attr="price=${goodsInfo.currPrice}">
- <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
- </div>
- </div>
- </th:block>
- </th:block>
- <th:block th:if="${goodsInfo.selfGoodsYn =='N' or goodsInfo.goodsType =='G056_S'}"> <!-- 입점상품 -->
- <div class="opt_select">
- <div class="form_wrap">
- <div class="form_field">
- <div class="select_custom option_open">
- <div class="combo">
- <div class="select">옵션을 선택해주세요.</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="opt_result">
- </div>
- </th:block>
- </div>
- <div style="margin-top:10px;">
- <th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
- <th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
- <script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.mobile.js.url')}" src="" charset="UTF-8"></script>
- <script th:inline="javascript">
- if(!wcs_add) var wcs_add = {};
- wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
- wcs.inflow("style24.com");
- wcs_do();
- </script>
- <script type="text/javascript" >
- /*버튼설정*/
- naver.NaverPayButton.apply({
- BUTTON_KEY : "[[${buttonKey}]]", // 네이버페이에서 제공받은 버튼 인증 키 입력
- TYPE : "MA", // 버튼 모음 종류 설정
- COLOR : 1, // 버튼 모음의 색 설정
- COUNT : 2, // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
- ENABLE : "Y", // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
- BUY_BUTTON_HANDLER : buy_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
- WISHLIST_BUTTON_HANDLER : wishlist_nc, // 찜하기 버튼 이벤트 Handler 함수 등록
- "":""
- });
- /*네이버구매하기*/
- function buy_nc(url) {
- let goodsType = "[[${goodsInfo.goodsType}]]";
- let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
- if(goodsType == "G056_N") {
- if(selfGoodsYn == "Y") {
- // 자사 일반 상품 정보
- let goodsCd = "[[${goodsInfo.goodsCd}]]";
- let optCd = $(".opt_size .form_field input[type=radio]:checked").attr("optcd");
- let goodsQty = $(".opt_count .number_count input[name=cea]").val();
- if (!goodsQty || goodsQty < 1) {
- mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
- return false;
- }
- if (!optCd) {
- mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
- return false;
- }
- let compsList = [];
- let obj = new Object();
- obj.goodsCd = goodsCd;
- obj.optCd = optCd;
- obj.goodsQty = goodsQty;
- obj.goodsType = goodsType;
- obj.cartGb = "N";
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- // 장바구니담기
- cfnAddCart(compsList);
- } else {
- // 입점 일반 상품 정보
- let goodsCd = "[[${goodsInfo.goodsCd}]]";
- let compsList = [];
- if (!goodsCd) {
- mcxDialog.alert("상품정보가 존재하지 않습니다. 새로고침 후 다시 시도해주세요.");
- return false;
- }
- $(".opt_result .number_count input[name=cea]").each(function() {
- let optCd = $(this).attr("optcd");
- let goodsQty = $(this).val();
- if (!optCd) {
- mcxDialog.alert("상품 옵션을 확인 할 수 없습니다. 새로고침 후 다시 시도해주세요."); /*옵션*/
- return false;
- }
- if (!goodsQty || goodsQty < 1) {
- mcxDialog.alert("구매 수량을 확인해주세요."); /*수량*/
- return false;
- }
- let obj = new Object();
- obj.goodsCd = goodsCd;
- obj.optCd = optCd;
- obj.goodsQty = goodsQty;
- obj.goodsType = goodsType;
- obj.cartGb = "N";
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- });
- // 장바구니담기
- cfnAddCart(compsList);
- }
- } else {
- // 세트 상품 정보
- let goodsCd = "[[${goodsInfo.goodsCd}]]";
- let cartGoodsList = [];
- $(".option_result .opt_result .result_item").each(function() {
- let compsList = [];
- let goodsList = {
- cartCompsList : new Array()
- }
- let goodsQty = $(this).find(".number_count input[name=cea]").val();
- $(this).find(".bundle").each(function() {
- var obj = new Object();
- obj.cartGb = "N";
- obj.goodsType = goodsType;
- obj.goodsCd = goodsCd;
- obj.itemCd = $(this).find("input[name=selOption]").attr("goodscd");
- obj.optCd = $(this).find("input[name=selOption]").attr("optcd");
- obj.goodsQty = goodsQty;
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- });
- goodsList.cartCompsList = compsList;
- cartGoodsList.push(goodsList);
- });
- // 장바구니담기
- cfnAddCart(cartGoodsList);
- }
- return false;
- }
- function buy_nc_req(cartSqArr) {
- let data = { cartSqArr : cartSqArr
- , backUrl : location.href
- , goodsUrl : _PAGE_GOODS_DETAIL
- };
- let jsonData = JSON.stringify(data);
- $.ajax( {
- type : "POST",
- url : "/pg/nPayReq",
- dataType : 'json',
- data : jsonData,
- beforeSend : function(xhr, settings) {
- xhr.setRequestHeader("AJAX" , "true");
- xhr.setRequestHeader('Accept' , 'application/json');
- xhr.setRequestHeader('Content-Type' , 'application/json');
- },
- error: function(xhr, status, error) {
- mcxDialog.alert(status + '; ' + error);
- },
- success : function(result) {
- if (result.state == "sucess") {
- enp('create', 'conversion', 'is24', { device: 'M', paySys: 'naverPay' }); // 모비온 네이버주문형 클릭시
- document.nPayForm.action = result.npayOrderUrl + "/" + result.orderKey + "/" + result.resultNo;
- document.nPayForm.submit();
- } else {
- mcxDialog.alert(result.message);
- }
- }
- });
- }
- <!-- 구매불가 -->
- function not_buy_nc() {
- mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
- return false;
- }
- <!-- 찜하기 -->
- function wishlist_nc() {
- let goodsCd = "[[${goodsInfo.goodsCd}]]";
- let goodsNm = "[[${goodsInfo.goodsNm}]]";
- let colorCd = "[[${goodsInfo.colorCd}]]";
- let currPrice = "[[${goodsInfo.currPrice}]]";
- let sysImgNm = "[[${goodsInfo.sysImgNm}]]";
- let selfGoodsYn = "[[${goodsInfo.selfGoodsYn}]]";
- let data = {};
- data.goodsCd = goodsCd;
- data.goodsNm = goodsNm;
- data.colorCd = colorCd;
- data.currPrice = currPrice;
- data.sysImgNm = sysImgNm;
- data.selfGoodsYn = selfGoodsYn;
- let jsonData = JSON.stringify(data);
- $.ajax( {
- type : "POST",
- url : "/pg/create/npay/zzim",
- dataType : 'json',
- data : jsonData,
- beforeSend : function(xhr, settings) {
- xhr.setRequestHeader("AJAX" , "true");
- xhr.setRequestHeader('Accept' , 'application/json');
- xhr.setRequestHeader('Content-Type' , 'application/json');
- },
- error: function(xhr, status, error) {
- mcxDialog.alert(status + '; ' + error);
- },
- success : function(result) {
- if (result.state == "success") {
- $('#nPayWishForm input[name=SHOP_ID]').val(result.shopId);
- $('#nPayWishForm input[name=ITEM_ID]').val(result.itemId);
- document.nPayWishForm.action = result.actionMobile;
- document.nPayWishForm.submit();
- } else {
- mcxDialog.alert(result.message);
- }
- }
- });
- }
- </script>
- </th:block>
- </th:block>
- </div>
- </div>
- <!-- 총 결재금액 -->
- <div class="price_box">
- <p class="number">
- 총 <span id="goodsTotalQty">0</span>개
- </p>
- <p class="price">
- <span>
- <b id="goodsTotalPrice">0</b><em>원</em>
- </span>
- </p>
- </div>
- </div>
- <div class="body btPop_foot btPopAuto_foot">
- <!-- 하단버튼 -->
- <div class="btn_box">
- <button type="button" class="gift" onclick="fnAddCart('G');" th:if="${goodsInfo.giftPackYn == 'Y'}"><span><span>선물해보세요!</span></span></button>
- <th:block th:if="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
- <button type="button" class="cart enp_mobon_cart" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
- <button type="button" class="buyNow" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
- </th:block>
- <th:block th:unless="${goodsInfo.stockQty > 0 and goodsInfo.goodsStat == 'G008_90'}">
- <button class="cantbuying" style="display:block;">SOLD OUT</button>
- </th:block>
- </div>
- </div>
- </div>
- <!-- 구매하기팝업 -->
- <!-- 옵션선택팝업 -->
- <div class="pop_option_select">
- <div class="close">닫기</div>
- <div class="pp_body">
- <div class="pp_cont">
- <div class="opt_select">
- <div class="opt_header">
- <span class="title">옵션선택</span>
- <div class="check_excluding form_field">
- <div>
- <input id="soldoutSkipYn" name="soldoutSkipYn" type="checkbox" value="Y" th:onclick="fnOption1(1,[[${goodsInfo.goodsCd}]]);"><label for="soldoutSkipYn"><span>품절제외</span> </label>
- </div>
- <div class="guidance" >
- <!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->
- <p>품절 옵션이 제외되었습니다</p>
- </div>
- <script>
- function getGuidance() {
- if($('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked")){
- $(".guidance").addClass("ontoast");
- setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);
- }
- }
- </script>
- </div>
- </div>
- <!-- 일반상품일때 -->
- <th:block th:if="${goodsInfo.selfGoodsYn =='N' }"> <!-- 입점상품 -->
- <div class="nomOption">
- <div class="form_wrap">
- <div class="form_field" th:id="${'form_field1_'+goodsInfo.goodsCd}">
- <div class="select_custom item_opt1 item_opt1_1" th:classappend="${goodsInfo.goodsCd}" th:attr="id=${goodsInfo.goodsCd}" >
- <div class="combo">
- <div class="select">선택</div>
- <ul class="list" style="display: none;">
- <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsInfo.goodsCd}|" >선택</li> -->
- <th:block th:each="goodsOption, optionStatus : ${goodsOption1List}" >
- <li th:onclick="fnOption2([[${optionStatus.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
- th:attr="aria-disabled=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}">
- <div th:text="${goodsOption.optCd1}">상품옵션</div>
- <div th:if="${goodsOption.addPrice > 0}" th:text="|${#numbers.formatInteger(goodsOption.addPrice, 0,'COMMA')}원|">0원</div>
- <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="selfGoodsYn=${goodsOption.selfGoodsYn}"/>
- </li>
- </th:block>
- </ul>
- </div>
- </div>
- </div>
- <div class="form_field" th:id="${'form_field2_'+goodsInfo.goodsCd}">
- <div class="select_custom item_opt2 item_opt2_1" th:classappend="${goodsInfo.goodsCd}" disabled th:attr="qty=${goodsInfo.minOrdQty}">
- <div class="combo">
- <div class="select">선택</div>
- <ul class="list" th:id="|goodsOpt2${goodsInfo.goodsCd}|" >
- <!-- 옵션2 -->
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </th:block>
- <!-- //일반상품일때 -->
- <!-- 셋트상품일때 -->
- <th:block th:if="${goodsInfo.goodsType =='G056_S' }"> <!-- 세트상품 -->
- <div class="setOption" th:if="${goodsComposeList != null and !goodsComposeList.empty}" >
- <div class="form_wrap" th:each="goodsCompose, status : ${goodsComposeList}">
- <div class="form_field" th:id="${'form_field1_'+goodsCompose.compsGoodsCd}">
- <p class="title" th:text="${goodsCompose.compsGoodsFullNm}">슬림핏</p>
- <div class="select_custom item_opt1" th:classappend="${'item_opt1_'+status.count +' '+goodsCompose.compsGoodsCd}" th:attr="id=${goodsCompose.compsGoodsCd}, qty=${goodsCompose.qty}"
- th:if="${goodsCompose.goodsOption1List != null and !goodsCompose.goodsOption1List.empty}" >
- <div class="combo">
- <div class="select">선택</div>
- <ul class="list" style="display: none;">
- <th:block th:each="goodsOption, optionStatus : ${goodsCompose.goodsOption1List}" >
- <!-- <li class="selected" th:id="|selfGoodsOpt1${goodsCompose.compsGoodsCd}|" th:if=${optionStatus.first}>선택</li> -->
- <li th:onclick="fnOption2([[${status.count}]], [[${goodsOption.goodsCd}]],[[${goodsOption.optCd1}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]])"
- th:attr="aria-disabled=${(goodsCompose.goodsStat != 'G008_90' or goodsOption.stockQty <= 0)? 'true':''}, data-soldout=${(goodsOption.stockQty <= 0)? 'true':''}"
- ><th:block th:text="${goodsOption.optCd1Nm}"></th:block>
- <input type="hidden" name="opt" th:value="${goodsOption.goodsCd}" th:attr="optCd1=${goodsOption.optCd1},optCd1Nm=${goodsOption.optCd1Nm},optCd2=${goodsOption.optCd2},optCd=${goodsOption.optCd}"/>
- </li>
- </th:block>
- </ul>
- </div>
- </div>
- </div>
- <div class="form_field" th:id="${'form_field2_'+goodsCompose.compsGoodsCd}">
- <div class="select_custom item_opt2" th:classappend="${'item_opt2_'+status.count +' '+goodsCompose.compsGoodsCd}" disabled>
- <div class="combo">
- <div class="select">선택</div>
- <ul class="list" th:id="|goodsOpt2${goodsCompose.compsGoodsCd}|">
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </div>
- <!-- //옵션선택팝업 -->
- </section>
- <!-- ★ 컨텐츠 종료 -->
- <!-- 바닥메뉴 -->
- <div class="product_floormenu" th:classappend="${(goodsInfo.stockQty <= 0 or goodsInfo.goodsStat != 'G008_90')? 'soldout':''}"><!-- ☞☞ 제품이 품절되면 soldout클래스 추가 -->
- <div class="share_like">
- <button type="button" class="share">공유하기</button>
- <!-- <th:block th:include="~{web/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block> -->
- <button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'likeit active' : ''"
- onclick="cfnPutWishList(this);"
- th:attr="goodsCd=${params.goodsCd}, goodsNm=${goodsInfo.goodsFullNm}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=${params.planDtlSq}">위시리스트</button>
- </div>
- <div class="prd_buy">
- <button type="button" class="buying btPop_auto" id="btn_purchase">구매하기</button>
- <button type="button" class="cantbuying">SOLD OUT</button>
- </div>
- <!-- (공통) 공유팝업 -->
- <div class="modal fade" id="tglShare" tabindex="-1" role="dialog" aria-labelledby="aModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="aModalLabel">공유하기</h5>
- </div>
- <th:block th:include="~{mob/goods/GoodsIncludeFormMob :: goodsSnsForm}"></th:block>
- </div>
- </div>
- </div>
- <script>
- // 공유팝업
- $('.product_floormenu .share').click(function(e){
- e.preventDefault();
- $('#tglShare').modal("show");
- });
- </script>
- </div>
- <!-- //바닥메뉴 -->
- <div class="pd_pop full_pop pd_itemthumb_pop" id="pdItemThumbPop" style="display: none;" th:if="${goodsImgList != null and !goodsImgList.empty}" >
- <div class="full_popup_wrap">
- <h5 class="sr-only">상품썸네일 크게보기</h5>
- <div class="btn_close">
- <a href="javascript:void(0);" id="btn_close_itemThumbPop" onclick="cfCloseLayer('pdItemThumbPop')">닫기버튼</a>
- </div>
- <div class="full_pop_container">
- <th:block th:each="goodsImg, status : ${goodsImgList}" th:with="count=${(videoYn == 'Y')? (status.count +1): status.count }">
- <div th:id="${'popThumb'+ count}" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_F1.')
- or #strings.contains(goodsImg.sysImgNm,'_L1.')
- or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
- <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
- </div>
- </th:block>
- </div>
- </div>
- </div>
- </main>
- </form>
- <!-- 바로구매 및 선물하기 장바구니 등록 정보 저장을 위한 form -->
- <form id="directOrderForm" method="POST" action="/order/noMember"></form>
- <script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
- <script th:inline="javascript">
- /*<![CDATA[*/
- var cateNm = "";
- // 다다익선 상품
- //var fnGoodsTmtbSearch = function(params) {
- // gagajf.ajaxSubmit("/goods/detail/tmtb/frame", "html", "goodsTmtbArea", params);
- //}
- // 품절처리
- var fnOptionSoldout = function(){
- let $target=$("#cartForm").find('.form_field');
- let soldout = false;
- for(var i=0;i<$target.find('input[name="opt"]').length;i++){
- if($target.find('input[name="opt"]').eq(i).attr('disabled')) {
- soldout = true;
- }
- }
- let goodsType = [[${goodsInfo.goodsType}]];
- if (soldout && goodsType == 'G056_N'&& $("#cartForm input[name=selfGoodsYn]").val() == 'Y') {
- $(".info_restock").show();
- }
- }
- //사이즈 클릭시 - 단품
- var fnViewStock = function(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
- let $obj = $(obj);
- let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
- let $target = null;
- if (selfGoodsYn == "Y"){
- //$target = $obj;
- $target = $obj.parent().find('input[name=opt]');
- $target.prop("checked",true);
- $(".selectOptCd1").html(optCd2);
- }else{
- $target = $obj.find('input[name="opt2"]');
- }
- let addPrice = $target.attr("addPrice");
- $(".selectOptCd1addPrice").html('');
- if (Number(addPrice) > 0) $(".selectOptCd1addPrice").html("(+" + addPrice.addComma() + "원)");
- $("#cartForm input[name=optCd]").val(optCd);
- $("#cartForm input[name=optCd1]").val(optCd1);
- $("#cartForm input[name=optCd2]").val(optCd2);
- $("#cartForm input[name=addPrice]").val(addPrice);
- $("#cartForm input[name=ordQty]").val("");
- let maxCnt = maxOrdQty;
- let params = new Object();
- params.goodsCd = goodsCd;
- params.optCd = optCd;
- params.optCd1 = optCd1;
- params.optCd2 = optCd2;
- params.selfGoodsYn = selfGoodsYn;
- $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
- let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
- if (maxCnt > itemCnt) {
- maxCnt = itemCnt;
- }
- if (minOrdQty > itemCnt) {
- $target.prop("disabled", true);
- }else{
- $("#cartForm input[name=ordQty]").val(minOrdQty);
- $("#cartForm input[name=maxOrdQty]").val(maxCnt);
- $("#cartForm input[name=minOrdQty]").val(minOrdQty);
- $("#cartForm input[name=cea]").val(minOrdQty);
- //$("#cartForm input[name=cea]").attr("readonly",false);
- $("#cartForm input[name=stock]").val(itemCnt);
- $('.price_box').show();
- fnSetTotalPrice();
- // 모바일에서 작업해야함
- if ('P' != _frontGb) {
- $("#cartForm input[name=opt]").parent().find('label').removeClass('on');
- $("#cartForm input[name=opt]").each(function(){
- if ($(this).attr('optCd') == optCd){
- $(this).parent().find('label').addClass('on');
- }
- });
- }
- }
- }, "text");
- }
- //사이즈 클릭시 - 입점단품
- var fnViewStockSelfNo = function(obj) {
- let $obj = $(obj);
- let $target = $obj.find('input[name="opt2"]');
- let goodsCd = $target.attr("goodsCd");
- //let currPrice = $target.attr("currPrice");
- let currPrice = $('#cartForm input[name=currPrice]').val();
- let optCd = $target.attr("optCd");
- let optCd1 = $target.attr("optCd1");
- let optCd1Nm = $target.attr("optCd1Nm");
- let optCd2 = $target.attr("optCd2");
- let minOrdQty = $target.attr("minOrdQty");
- let maxOrdQty = $target.attr("maxOrdQty");
- let addPrice = $target.attr("addPrice");
- let selfGoodsYn = $target.attr("selfGoodsYn");
- let optQty = minOrdQty;
- let params = new Object();
- params.goodsCd = goodsCd;
- params.optCd = optCd;
- params.optCd1 = optCd1;
- params.optCd2 = optCd2;
- params.selfGoodsYn = selfGoodsYn;
- // 중복선택 확인 opt_result
- var overlap = 0;
- $('.pd_detail .opt_result .number_count').each(function() {
- if ($('input[name="coption"]', this).val() == optCd) {
- ++overlap;
- }
- });
- if (overlap > 0) {
- mcxDialog.alert("이미 선택하신 옵션입니다.");
- return false;
- }
- $.get("/goods/detail/ajaxGoodsStockQty", $.param(params), function(result) {
- let itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
- if (maxOrdQty > itemCnt) {
- maxOrdQty = itemCnt;
- }
- if (minOrdQty > itemCnt) {
- mcxDialog.alert("주문 가능한 옵션이 아닙니다. 옵션을 다시 선택해 주세요.");
- return false;
- }
- //상품정보
- let price = parseInt(currPrice)+ parseInt(addPrice);
- let tag = "";
- tag += '<div class="result_item result_'+optCd+'">\n';
- tag += ' <div class="opt_header">\n';
- tag += ' <div class="bundle">\n';
- tag += ' <span class="item_option">'+optCd1Nm+'/'+optCd2+'</span>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' <div class="number_count">\n';
- tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
- tag += ' <input type="text" name="cea" optCd="'+optCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'">\n';
- tag += ' <input type="hidden" name="coption" value="'+optCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
- tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
- tag += ' </div>\n';
- tag += ' <div class="item_price">\n';
- tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
- tag += ' </div>\n';
- tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+optCd+'\')"><span>삭제</span></button>\n';
- tag += '</div>\n';
- let $objUp = $('.pd_detail .opt_result');
- $objUp.prepend(tag);
- fnSetTotalPrice();
- $('.form_field .select_custom.item_opt1').find('.combo .select').html('선택');
- $('.form_field .select_custom.item_opt2').attr('disabled', true);
- $('.form_field .select_custom.item_opt2').find('.combo .select').html('선택');
- $('.pop_option_select').css("display", "none");
- }, "text");
- }
- //세트 사이즈 클릭시
- function fnViewStockSet(obj, goodsCd, optCd, optCd1, optCd2, minOrdQty, maxOrdQty) {
- let target=$('.select_custom.item_opt2');
- let targetSize = target.length; //구성품 갯수
- let goodsOption = [];
- let cnt = 0;
- let itemSize = 0;
- let resultOptCd = "";
- target.each(function(){
- if (typeof ($(this).find('.select').find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(this).find('.select').find('input[name=opt2]').val())){
- if (goodsCd != $(this).find('.select').find('input[name=opt2]').attr('goodscd')){
- itemSize ++;
- resultOptCd += $(this).find('.select').find('input[name=opt2]').attr('optcd') + "_";
- goodsOption.push($(this).find('input[name=opt2]').val()); //goodsCd|optCd|qty
- }
- }
- });
- //내가 선택한 상품
- if (typeof ($(obj).find('input[name=opt2]').val()) != 'undefined' && !gagajf.isNull($(obj).find('input[name=opt2]').val())){
- itemSize ++;
- }
- //내가 선택하 옵션
- resultOptCd += $(obj).find('input[name=opt2]').attr('optcd') + "_";
- goodsOption.push($(obj).find('input[name=opt2]').val()); //goodsCd|optCd|qty
- // 중복선택 확인 opt_result
- let arrSelOpt = resultOptCd.split("_"); // 내가 선택한 옵션목록
- let selCnt = 0;
- let overlap = 0;
- $('.pd_detail .opt_result .number_count').each(function() {
- let val = $('input[name="coption"]', this).val();
- val = val.replaceAll('result_', '');
- let arrOpt = val.split("_");
- for(var i=0;i<arrOpt.length;i++){
- for(var j=0;j<arrSelOpt.length;j++){
- if (gagajf.isNull(arrOpt[i]) || gagajf.isNull(arrSelOpt[j])) continue;
- if (arrOpt[i] == arrSelOpt[j]){
- selCnt++;
- }
- }
- }
- if (Number(itemSize) == Number(selCnt)) {
- ++overlap;
- }
- });
- if (overlap > 0) {
- mcxDialog.alert("이미 선택하신 옵션입니다.");
- return false;
- }
- let mGoodsCd = $("#cartForm input[name=goodsCd]").val();
- let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
- if (targetSize == itemSize){
- let optQty = minOrdQty;
- let data = {arrGoodsOption : goodsOption
- ,minOrdQty : $("#cartForm input[name=minOrdQty]").val()
- ,maxOrdQty : $("#cartForm input[name=maxOrdQty]").val()
- ,goodsCd : mGoodsCd
- ,selfGoodsYn : selfGoodsYn
- };
- let jsonData = JSON.stringify(data);
- gagajf.ajaxJsonSubmit('/goods/detail/ajaxGoodsSetStockQty', jsonData, function(result) {
- var itemCnt = eval(result); //해당 아이템에 선택되어진 사이즈의 수량
- if (maxOrdQty > itemCnt) {
- maxOrdQty = itemCnt;
- }
- if (minOrdQty > itemCnt) {
- mcxDialog.alert("주문 가능한 옵션이 아닙니다. 옵션을 다시 선택해 주세요.");
- return false;
- }
- //상품정보
- let $selObj = $('.pop_option_select .setOption .form_wrap');
- let currPrice = Number($('#cartForm input[name=currPrice]').val());
- let price = currPrice;
- let addPrice = 0;
- resultOptCd = "";
- $selObj.each(function() {
- resultOptCd += $(this).find('input[name=opt2]').attr('optcd') + "_";
- });
- let tag = "";
- tag += '<div class="result_item result_'+resultOptCd+'">\n';
- tag += ' <div class="opt_header">\n';
- $selObj.each(function() {
- tag += ' <div class="bundle">\n';
- tag += ' <span class="item_name">'+$(this).find('.title').text()+'</span>\n';
- tag += ' <span class="item_option">'+$(this).find('input[name=opt2]').attr('optcd1Nm')+'/'+$(this).find('input[name=opt2]').attr('optcd2')+'</span>\n';
- tag += ' <input type="hidden" name="selOption" goodsCd="'+$(this).find('input[name=opt2]').attr('goodsCd')+'" optCd="'+$(this).find('input[name=opt2]').attr('optCd')+'" qty="'+$(this).find('.item_opt1 ').attr('qty')+'" /> \n';
- tag += ' </div>\n';
- addPrice += Number($(this).find('input[name=opt2]').attr('addprice'));
- });
- price = Number(currPrice) + Number(addPrice);
- tag += ' </div>\n';
- tag += ' <div class="number_count">\n';
- tag += ' <span class="minus min_val" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>\n';
- tag += ' <input type="text" name="cea" optCd="'+resultOptCd+'" maxlength="3" style="ime-mode:disabled" value="' +optQty+'" readonly minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'">\n';
- tag += ' <input type="hidden" name="coption" value="'+resultOptCd+'" goodsCd="'+goodsCd+'" price="'+currPrice+'" addPrice="'+addPrice+'">\n';
- tag += ' <span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>\n';
- tag += ' </div>\n';
- tag += ' <div class="item_price">\n';
- tag += ' <p><em id="goodsPrice">'+price.addComma() +'</em>원</p>\n';
- tag += ' </div>\n';
- tag += ' <button type="button" class="btn_delete_item" onclick="fnSelectGoodsDel(\''+resultOptCd+'\')"><span>삭제</span></button>\n';
- tag += '</div>\n';
- let $objUp = null;
- $objUp = $('.pd_detail .opt_result');
- $objUp.prepend(tag);
- fnSetTotalPrice();
- target=$('.select_custom.item_opt1');
- target.each(function(){
- $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
- });
- $('.pop_option_select').css("display", "none");
- });
- }
- }
- // 옵션1 조회
- var fnOption1 = function(ridx,goodsCd){
- // 품절제외 여부
- let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
- // 입점
- if("N" == $("#cartForm input[name=selfGoodsYn]").val() ){
- let data = {goodsCd : goodsCd
- ,optionSoldoutSkip : optionSoldoutSkip
- ,mastrGoodsCd : goodsCd
- };
- let jsonData = JSON.stringify(data);
- $('.form_field .select_custom.item_opt2.' +goodsCd ).attr('disabled', true);
- $('.form_field .select_custom.item_opt2.' +goodsCd ).find('.combo .select').html('선택');
- fnOption1Display(ridx, jsonData, goodsCd );
- }else if("G056_S" == $("#cartForm input[name=goodsType]").val() ){
- let idx = 1;
- target=$('.select_custom.item_opt1');
- target.each(function(){
- $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
- });
- target.each(function(){
- let data = {goodsCd : $(this).attr('id')
- ,optionSoldoutSkip : optionSoldoutSkip
- ,mastrGoodsCd : $('#cartForm input[name=goodsCd]').val()
- };
- let jsonData = JSON.stringify(data);
- fnOption1Display(idx, jsonData, $(this).attr('id') );
- idx++;
- });
- }
- }
- // 옵션1 노출처리
- var fnOption1Display = function(ridx, jsonData, goodsCd ){
- gagajf.ajaxJsonSubmit('/goods/detail/option1/list', jsonData, function(result) {
- if (result.dataList != null && result.dataList.length > 0) {
- let tag = "";
- let $obj = null;
- let selfGoodsYn = 'N';
- $.each(result.dataList, function(idx, item) {
- if (idx == 0){
- //$('.form_field .select_custom.item_opt1.' +item.goodsCd ).attr('disabled', false)
- //------
- tag += '<div class="select_custom item_opt1 item_opt1_'+ridx+ ' '+goodsCd+'" id="'+goodsCd+'" qty="'+item.qty+'">\n';
- tag += '<div class="combo">\n';
- tag += '<div class="select">선택</div>\n';
- tag += '<ul class="list" style="display: none;">\n';
- //------
- //tag += '<li class="selected" id="selfGoodsOpt'+item.goodsCd+'">선택</li>\n';
- selfGoodsYn = item.selfGoodsYn;
- }
- let soldoutYn = "";
- let disabledYn = "";
- if (item.stockQty <= 0) soldoutYn = "true";
- if (soldoutYn == "true" || item.goodsStat != 'G008_90') disabledYn = "true";
- tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnOption2('+ ridx+', \''+ item.goodsCd+'\' , \''+ item.optCd1+'\', \''+ item.minOrdQty+'\', \''+ item.maxOrdQty+'\' )">\n';
- tag += '<div>' +item.optCd1Nm +'</div>';
- tag += '<input type="hidden" name="opt" value="'+ item.goodsCd+'" optCd1="'+ item.optCd1 +'" qty="'+ item.qty +'" />\n';
- tag += '</li>\n';
- });
- if (!gagajf.isNull(tag)){
- //------
- tag += '</ul>\n';
- tag += '</div>\n';
- tag += '</div>\n';
- //------
- }
- if (selfGoodsYn == "Y"){
- if (ridx == 1){
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
- }else if (ridx == 2){
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_2');
- }else if (ridx == 3){
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_3');
- }else if (ridx == 4){
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_4');
- }else{
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_5');
- }
- }else{
- $obj = $('.pop_option_select .select_custom.item_opt1.item_opt1_1');
- ridx = 1; // 입점은 1로 고정
- }
- // $obj.html('');
- // $obj.append(tag);
- $obj.remove();
- $('#form_field1_'+ goodsCd).append(tag);
- if (selfGoodsYn == "Y"){
- if (ridx == 1){
- var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
- //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
- //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
- }else if (ridx == 2){
- var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_2 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').attr('disabled',true);
- }else if (ridx == 3){
- var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_3 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').attr('disabled',true);
- }else if (ridx == 4){
- var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
- }else{
- var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').attr('disabled',true);
- }
- }else{
- var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
- //$('.pop_option_select .select_custom.item_opt2 .combo .list > li').eq(0).trigger("click");
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').attr('disabled',true);
- //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').addClass('on');
- //$('.pop_option_select .select_custom.item_opt1.item_opt1_1').find('.list').css('display','block');
- }
- }
- //품절 제외 메세지 처리
- getGuidance();
- });
- }
- // 옵션2 조회
- var fnOption2 = function(ridx, goodsCd, optCd1, minOrdQty, maxOrdQty){
- // 품절제외 여부
- let optionSoldoutSkip = $('.pop_option_select').find('input[name=soldoutSkipYn]').is(":checked") ? 'Y' : 'N';
- let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
- let data = {goodsCd : goodsCd
- ,optCd1 : optCd1
- ,optionSoldoutSkip : optionSoldoutSkip
- ,mastrGoodsCd : $('#cartForm input[name=goodsCd]').val()
- };
- let jsonData = JSON.stringify(data);
- gagajf.ajaxJsonSubmit('/goods/detail/option2/list', jsonData, function(result) {
- if (result.dataList != null && result.dataList.length > 0) {
- let tag = "";
- let $obj = null;
- let qty = 0; // 구성수량
- if (selfGoodsYn == "Y"){
- if (ridx == 1){
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
- }else if (ridx == 2){
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_2');
- }else if (ridx == 3){
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_3');
- }else if (ridx == 4){
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_4');
- }else{
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_5');
- }
- qty = $obj.parent().parent().find('.select_custom').attr('qty'); // 구성수량
- }else{
- $obj = $('.pop_option_select .select_custom.item_opt2.item_opt2_1');
- qty = $obj.attr('qty'); // 구성수량
- ridx = 1; // 입점은 1로 고정
- }
- $.each(result.dataList, function(idx, item) {
- if (idx == 0){
- //$obj = $('#goodsOpt2'+item.goodsCd);
- //$obj = $('.form_field .select_custom.item_opt2.item_opt2_1');
- // $obj.html('');
- $obj.remove();
- // $('.form_field .select_custom.item_opt2.' +item.goodsCd ).attr('disabled', false)
- //------
- tag += '<div class="select_custom item_opt2 item_opt2_'+ridx+ ' '+goodsCd+'" qty="'+minOrdQty+'">\n';
- tag += '<div class="combo">\n';
- tag += '<div class="select">선택</div>\n';
- tag += '<ul class="list">\n';
- //------
- //tag += '<li class="selected" id="goodsOpt2'+item.goodsCd+'">선택</li>\n';
- }
- let soldoutYn = "";
- let disabledYn = "";
- let saleQty = (Number(qty) * Number(minOrdQty));
- if ("Y" == item.soldoutYn || Number(item.stockQty) < Number(saleQty)) soldoutYn = "true";
- if (soldoutYn == "true") disabledYn= "true";
- if (selfGoodsYn == "Y"){
- tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSet(this, \''+ item.goodsCd+'\' , \''+ item.optCd+'\' , \''+ item.optCd1+'\' , \''+ item.optCd2+'\', \''+ minOrdQty+'\', \''+ maxOrdQty+'\')">\n';
- }else{
- tag += '<li aria-disabled="'+disabledYn+'" data-soldout="'+soldoutYn +'" onclick="fnViewStockSelfNo(this)">\n';
- }
- tag += '<div class="opt_name">'+ item.optCd2+'</div>\n';
- if (item.addPrice > 0){
- tag += '<div class="opt_price">+'+ item.addPrice.addComma() +'원</div>\n';
- }
- tag += '<input type="hidden" name="opt2" value="'+ item.goodsCd+'|'+item.optCd +'|'+qty +'" goodsCd="'+item.goodsCd+'" currPrice="'+ item.currPrice +'" addPrice="'+item.addPrice+'" optCd="'+item.optCd+'" optCd1="'+item.optCd1+'" optCd1Nm="'+item.optCd1Nm+'" optCd2="'+item.optCd2+'" minOrdQty="'+minOrdQty+'" maxOrdQty="'+maxOrdQty+'" selfGoodsYn="'+selfGoodsYn+'"/>\n';
- tag += '</li>\n';
- });
- if (!gagajf.isNull(tag)){
- //------
- tag += '</ul>\n';
- tag += '</div>\n';
- tag += '</div>\n';
- //------
- }
- // $obj.append(tag);
- $('#form_field2_'+ goodsCd).prepend(tag);
- if (selfGoodsYn == "Y"){
- if (ridx == 1){
- var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
- }else if (ridx == 2){
- var opt_selecter02_2 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_2');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_2').find('.list').css('display','block');
- }else if (ridx == 3){
- var opt_selecter02_3 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_3');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_3').find('.list').css('display','block');
- }else if (ridx == 4){
- var opt_selecter02_4 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_4');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_4').find('.list').css('display','block');
- }else{
- var opt_selecter02_5 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_5');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_5').find('.list').css('display','block');
- }
- }else{
- var opt_selecter02_1 = new sCombo('.pop_option_select .select_custom.item_opt2.item_opt2_1');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').addClass('on');
- //$('.pop_option_select .select_custom.item_opt2.item_opt2_1').find('.list').css('display','block');
- }
- }
- });
- }
- // 수량 변경 클릭
- var fnAdjustOrderEa = function(obj) {
- let $obj = $(obj);
- let $target = $obj.parent().children('input[name="cea"]');
- let ea =parseInt($target.val());
- let minOrdQty = 0;
- let maxOrdQty = 0;
- if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
- if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
- mcxDialog.alert("사이즈를 선택해 주세요.");
- return false;
- }
- minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
- maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
- }else{
- minOrdQty = parseInt( $target.attr('minOrdQty'));
- maxOrdQty = parseInt( $target.attr('maxOrdQty'));
- }
- if ($obj.attr('adjust') == '-') --ea;
- else ++ea;
- //var maxOrdQty = $("#cartForm input[name=maxOrdQty]").val();
- //if (maxOrdQty && ea > maxOrdQty) ea = maxOrdQty;
- //if (ea.toString().length > maxOrdQty) --ea;
- if (ea < 1) ea = minOrdQty;
- $target.val(ea);
- $target.attr('value', ea);
- fnChangeOrderEa($target[0]);
- }
- //옵션 갯수 변경
- var fnChangeOrderEa = function(obj) {
- let $obj = $(obj);
- let $target = $obj.parent().children('input[name="cea"]');
- let ea = parseInt($obj.val());
- let optCd = $(obj).attr('optCd');
- let minOrdQty = parseInt($("#cartForm input[name=minOrdQty]").val());
- let maxOrdQty = parseInt($("#cartForm input[name=maxOrdQty]").val());
- if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
- if(gagajf.isNull($("#cartForm input[name=optCd2]").val())){
- mcxDialog.alert("사이즈를 선택해 주세요.");
- return false;
- }
- }else{
- maxOrdQty = parseInt($(obj).attr('maxOrdQty'));
- minOrdQty = parseInt($(obj).attr('minOrdQty'));
- optCd = $(obj).attr('optCd');
- }
- let alertMsg = '';
- if (ea < minOrdQty) {
- alertMsg = minOrdQty+"개 부터 구매 가능합니다.";;
- ea = minOrdQty;
- }
- if (ea > maxOrdQty) {
- alertMsg = maxOrdQty+"개 까지만 구매 가능합니다.";
- ea = maxOrdQty;
- }
- if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
- $("#cartForm input[name=cea]").val(ea);
- $("#cartForm input[name=ordQty]").val(ea);
- }
- //obj.value = ea;
- $target.val(ea);
- $target.attr('value', ea);
- if (alertMsg != ''){
- mcxDialog.alert(alertMsg);
- return false;
- }
- if (ea <= 1){
- $('.number_count').find('.minus').addClass('min_val');
- }else{
- $('.number_count').find('.minus').removeClass('min_val');
- }
- if ("Y" == $("#cartForm input[name=selfGoodsYn]").val() && "G056_N" == $("#cartForm input[name=goodsType]").val()){
- }else{
- let addPrice = parseInt($obj.parent().find('input[name="coption"]').attr('addprice'));
- let goodsPrice = parseInt($obj.parent().find('input[name="coption"]').attr('price'));
- let totalPrice = ((goodsPrice+addPrice) * ea);
- $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').val(ea);
- $('.opt_result .result_'+optCd+' .number_count').find('input[name=cea]').attr('value',ea);
- $('.opt_result .result_'+optCd+' .item_price').find('em').text(totalPrice.addComma());
- }
- fnSetTotalPrice();
- }
- //합계 계산
- var fnSetTotalPrice = function() {
- //let f = document.cartForm;
- let totalEa = 0;
- let totalPrice = 0;
- $('input[name="cea"]').each(function() {
- let ea = parseInt($(this).val());
- let addPrice = 0;
- if("G056_N" == $("#cartForm input[name=goodsType]").val() && "Y" == $("#cartForm input[name=selfGoodsYn]").val()){
- let target=$('.opt_size').find('input[name=opt]');
- target.each(function() {
- if ($(this).is(":checked")){
- addPrice += Number($(this).attr('addPrice'));
- }
- });
- }else{
- addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
- }
- let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
- totalEa += ea;
- if (goodsPrice > 0) {
- totalPrice += ((goodsPrice+addPrice) * ea);
- }
- });
- $('#goodsTotalQty').html(totalEa.addComma());
- $('#goodsTotalPrice').html(totalPrice.addComma());
- }
- // 선택상품 삭제
- var fnSelectGoodsDel = function(optCd){
- $('.result_'+optCd).remove();
- fnSetTotalPrice();
- }
- //장바구니담기
- var fnAddCart = function(btnType){
- let params = [];
- let goodsType = $("#cartForm input[name=goodsType]").val();
- let selfGoodsYn = $("#cartForm input[name=selfGoodsYn]").val();
- if (goodsType == 'G056_N' && selfGoodsYn == 'Y' ){
- if (gagajf.isNull($("#cartForm input[name=optCd2]").val())) {
- mcxDialog.alert("사이즈를 선택해 주세요.");
- return;
- }
- let compsList = [];
- let obj = new Object();
- obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
- obj.optCd = $("#cartForm input[name=optCd]").val();
- obj.goodsQty = $("#cartForm input[name=ordQty]").val();
- obj.goodsType = $("#cartForm input[name=goodsType]").val();
- obj.cartGb = btnType;
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- // 장바구니담기
- cfnAddCart(compsList);
- }else {
- let target = $('#cartForm input[name=cea]');
- let targetSize = target.length;
- if (targetSize <= 0){
- mcxDialog.alert("옵션을 선택해 주세요.");
- return false;
- }
- let cartGoodsList = [];
- if (goodsType == 'G056_N'){
- let compsList = [];
- if(btnType == "G" && targetSize > 1) {
- mcxDialog.alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.");
- return false;
- }
- target.each(function() {
- let ea = parseInt($(this).val());
- let goodsCd = $(this).parent().find('input[name="coption"]').attr('goodscd');
- let optCd = $(this).parent().find('input[name="coption"]').val();
- //let addPrice = parseInt($(this).parent().find('input[name="coption"]').attr('addprice'));
- //let goodsPrice = parseInt($(this).parent().find('input[name="coption"]').attr('price'));
- var obj = new Object();
- obj.cartGb = btnType;
- obj.goodsType = $("#cartForm input[name=goodsType]").val();
- obj.goodsCd = goodsCd
- obj.optCd = optCd;
- obj.goodsQty = ea;
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- });
- // 장바구니담기
- cfnAddCart(compsList);
- }else{ // 세트
- if(btnType == "G" && targetSize > 1) {
- mcxDialog.alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.");
- return false;
- }
- target.each(function() {
- let compsList = [];
- let goodsList = {
- cartCompsList : new Array()
- }
- let ea = parseInt($(this).val());
- let targetItem = $(this).parent().parent().find('.bundle'); // 구성상품
- targetItem.each(function() {
- var obj = new Object();
- obj.cartGb = btnType;
- obj.goodsType = $("#cartForm input[name=goodsType]").val();
- obj.goodsCd = $("#cartForm input[name=goodsCd]").val();
- obj.itemCd = $(this).find('input[name=selOption]').attr('goodsCd');
- obj.optCd = $(this).find('input[name=selOption]').attr('optCd');
- obj.goodsQty = ea;
- obj.afLinkCd =$("#cartForm input[name=afLinkCd]").val();
- obj.ithrCd =$("#cartForm input[name=ithrCd]").val();
- obj.contentsLoc =$("#cartForm input[name=contentsLoc]").val();
- obj.planDtlSq = $("#cartForm input[name=planDtlSq]").val();
- compsList.push(obj);
- });
- goodsList.cartCompsList = compsList;
- cartGoodsList.push(goodsList);
- });
- // 장바구니담기
- cfnAddCart(cartGoodsList);
- }
- }
- }
- // 룩북속 상품 쇼핑백 담기
- var fnAddCartLookBookGoods = function(obj){
- let $obj = $(obj);
- let $target = $obj.parent().parent().parent().find('.swiper-container').find('.item_prod');
- let goodsSize = $target.length;
- let btnType = "C";
- let goodsIdx = 0;
- $target.each(function(){
- let params = [];
- goodsIdx ++;
- if ($(this).hasClass('unable')) {
- }else{
- // 옵션확인
- let goodsCnt = $(this).find('input[name=lookbookGoodsOptCd]').length;
- if (goodsCnt == 1){
- let arrOpt = $(this).find('input[name=lookbookGoodsOptCd]').val();
- let arrOptInfo = arrOpt.split(':');
- let obj = new Object();
- obj.goodsCd = $(this).attr("goodsCd");
- //obj.optCd = $(this).attr("optCd");
- obj.optCd = arrOptInfo[1];
- obj.goodsQty = $(this).attr("minOrdQty");
- obj.goodsType = $(this).attr("goodsType");
- obj.cartGb = btnType;
- obj.afLinkCd = '';
- obj.ithrCd = $(this).attr("ithrCd");
- obj.contentsLoc = $(this).attr("contentsLoc");
- obj.planDtlSq = '';
- obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
- if (goodsIdx == goodsSize){
- obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
- }
- params.push(obj);
- // 장바구니담기
- cfnAddCart(params);
- }else{
- let $goods = $(this);
- let cartGoodsList = [];
- let compsList = [];
- let goodsList = {
- cartCompsList : new Array()
- }
- let arrInfo = $(this).find('input[name=lookbookGoodsOptCd]').val().split(','); // 상품코드단위
- $.each(arrInfo, function(idx, item) {
- let arrOptInfo = item.split(':');
- let obj = new Object();
- obj.cartGb = btnType;
- obj.goodsType = $goods.attr("goodsType");
- obj.goodsCd = $goods.attr("goodsCd");
- obj.itemCd =arrOptInfo[0];
- obj.optCd = arrOptInfo[1];
- obj.goodsQty = $goods.attr("minOrdQty");
- obj.afLinkCd = '';
- obj.ithrCd = $goods.attr("ithrCd");
- obj.contentsLoc = $goods.attr("contentsLoc");
- obj.planDtlSq = ''
- obj.multiGoodsGb = 'O' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
- if (goodsIdx == goodsSize){
- obj.multiGoodsGb = 'E' // 단품, 세트 혼합쇼핑백처리일경우, 마지막이 아닌경우는 'O'아니고 NULL 아닌값
- }
- compsList.push(obj);
- });
- goodsList.cartCompsList = compsList;
- cartGoodsList.push(goodsList);
- // 장바구니담기
- cfnAddCart(cartGoodsList);
- }
- }
- });
- // 장바구니담기
- /* if (params.length > 0){
- cfnAddCart(params);
- } */
- }
- //룩북 피커 선택시 레이어 노출
- var fnLookbookPicker = function(obj,goodsCd){
- let $obj = $(obj);
- var str = '<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">\n';
- //let $target = $obj.parent().parent().parent().find('.item_prod');
- let $target = $('.pic_list').find('.item_prod');
- let goodsImg = '';
- let brandName = '';
- let goodsName = '';
- let currPrice = '';
- let listPrice = '';
- let dcRate = '';
- let soldout = '';
- $target.each(function(){
- if ($(this).attr('goodsCd') == goodsCd) {
- if ($(this).hasClass('unable')) soldout = 'sold_out';
- goodsImg = $(this).find('.itemPic').children('.pd_img').attr('src');
- brandName = $(this).find('.itemBrand').text();
- goodsName = $(this).find('.itemName').text();
- currPrice = $(this).find('.itemPrice').text();
- return false;
- }
- });
- if (gagajf.isNull(goodsName)){
- return false;
- }
- $("#reco_pop").remove();
- let tag = '';
- tag += ' <div class="modal-dialog" role="document">\n';
- tag += ' <div class="modal-content">\n';
- tag += ' <div class="modal-header">\n';
- tag += ' <h5 class="modal-title"><span class="sr_only">제품정보</span></h5>\n';
- tag += ' </div>\n';
- tag += ' <div class="modal-body">\n';
- tag += ' <div class="itemsGrp rowtype">\n';
- tag += ' <div class="item_prod '+ soldout+'"> <!-- 품절일때 sold_out 클래스 추가 요청 -->\n';
- tag += ' <div class="item_state">\n';
- tag += ' <a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+goodsCd+'\',\'\',\'IN15_06\')">\n';
- tag += ' <div class="itemPic">\n';
- tag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+goodsImg +'?RS=70" onerror="this.src=\'/images/pc/thumb/bg_item_none.png\'">\n';
- tag += ' </div>\n';
- tag += ' <p class="itemBrand">'+brandName+'</p>\n';
- tag += ' <div class="itemName">'+goodsName+'</div>\n';
- tag += ' <p class="itemPrice">\n';
- tag += ' '+currPrice+'\n';
- tag += ' </p>\n';
- tag += ' </a>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' </div>\n';
- tag += ' <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer(\'recoPop\')" class="close-modal">Close</a>\n';
- if ($('#reco_pop').length == 0) {
- $('body').append(str+tag+'</div>');
- $('#reco_pop').modal("show");
- }
- }
- // 상품평 상세 레이어 호출후 콜백에서 호출하므로 여기에 있어야함
- var fnReviewDetailLayerCollBack = function(){
- }
- $(document).ready( function() {
- // 상품상세 홈버튼 위치 변경
- $("#htopSub .button_wrap").addClass("pd");
- $('.timer_box').css('display', 'none');
- //상품상세 적용
- // 입점 html 에 태그가 정상적이지 않아 스크립트로 처리
- if ("G056_S" == [[${goodsInfo.goodsType}]] ){
- let goodsComposeList = ([[${goodsComposeList}]]);
- if (goodsComposeList.length > 0){
- var titStr = "";
- $.each(goodsComposeList, function(idx, item) {
- if ("N" == item.tobeFormYn && !gagajf.isNull(item.goodsDesc)){
- titStr = '<span class="tit_view">'+item.compsGoodsNm+'</span>';
- $('#goodsDescHtml_'+ item.compsGoodsCd).html(titStr + item.goodsDesc);
- }
- });
- }
- }else{
- let goodsDesc = [[${goodsInfo.goodsDesc}]];
- if ("N" == [[${goodsInfo.tobeFormYn}]] && !gagajf.isNull(goodsDesc)){
- $('#goodsDescHtml').html([[${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}]]);
- }
- }
- //210526_ 추가 : 이미지 style 속성 제거
- $(".mdhtml_box style").remove();$(".mdhtml_box img").removeAttr("style");
- var params = new Object();
- params.goodsCd = [[${params.goodsCd}]];
- params.viewDt = [[${params.viewDt}]];
- params.preview = [[${params.preview}]];
- params.adminYn = [[${params.adminYn}]];
- params.goodsType = [[${params.goodsType}]];
- params.supplyCompCd = [[${params.supplyCompCd}]];
- params.brandGroupNm = [[${goodsInfo.brandGroupNm}]];
- // 함께본 상품(ajax html)
- params.goodsOtherGb = "together";
- params.ithrCd = "IN15_03";
- fnGoodsTogetherSearch(params);
- // 추천 상품(ajax html)
- params.goodsOtherGb = "recommend";
- params.ithrCd = "IN15_04";
- fnGoodsRecommendSearch(params);
- // 비슷한 상품(ajax html)
- params.goodsOtherGb = "like";
- params.ithrCd = "IN15_05";
- fnGoodsLikeSearch(params);
- // selecter
- $(function(){
- var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
- });
- var opt_selecter01_1 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_1');
- $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_1 .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- var opt_selecter01_2 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_2');
- $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_2 .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- var opt_selecter01_3 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_3');
- $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_3 .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- var opt_selecter01_4 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_4');
- $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_4 .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- var opt_selecter01_5 = new sCombo('.pop_option_select .select_custom.item_opt1.item_opt1_5');
- $('.pd .pop_option_select .select_custom.item_opt1.item_opt1_5 .combo .list > li').click(function(e) {
- $(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);
- return false;
- });
- if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
- $('.timer_box').css('display', 'block');
- /* 행사 남은시간 */
- function promotionTimer() {
- var endTime = new Date([[${goodsInfo.socialEddt}]]); // 남은시간 지정 30 March 2021 9:56:00 GMT+0900
- endTime = (Date.parse(endTime) / 1000);
- 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; }
- if (Number(days) > 0 ){
- // hours = Number(hours) + (Number(days) * 24);
- $('#d-days').html(days);
- }else{
- $('#d-days').hide();
- }
- $('#d-hours').html(hours);
- $('#d-minutes').html(minutes);
- $('#d-seconds').html(seconds);
- }
- setInterval(function() { promotionTimer(); }, 1000);
- }
- //상품상세정보 더보기
- $(document).on('click','.pd_descrp .btn_more_box button',function(e){
- $('.pd_descrp .cont_body').toggleClass('on');
- $(this).toggleClass('active');
- $(this).parents('.btn_more_box').toggleClass('covered');
- var descrpToggle = $(this).find('span');
- $(descrpToggle).text($(descrpToggle).text() == '상세정보 더보기' ? '상세정보 접기' : '상세정보 더보기');
- //210525_더보기 닫을 시 현재 위치로 화면 포커스
- if($('.pd_descrp .btn_more_box').hasClass('covered') === true){
- var offset = $('.pd_descrp .btn_more_box').offset();
- $('html').animate({scrollTop : offset.top - 80}, 400);
- }
- return false;
- });
- //슬라이드 - 함께하면 할인되는 다다익선 상품
- var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
- slidesPerView: 3,
- spaceBetween: 8,
- speed: 1000,
- });
- //슬라이드 - 베스트리뷰
- var riviewSwiper = new Swiper('.riview_box .area_slider .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 1,
- spaceBetween: 8,
- speed: 1000,
- //loop: true,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- //슬라이드 - 제품사진
- //210728_ 추가 : 네비게이션 버튼 추가 및 썸네일 영상일 경우, navigation 버튼 노출/비노출 설정.
- //슬라이드 - 제품사진
- var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
- slidesPerView:1,
- speed: 1000,
- a11y: {
- enabled: true,
- notificationClass: 'swiper-notification',
- prevSlideMessage: '이전 슬라이드',
- nextSlideMessage: '다음 슬라이드',
- firstSlideMessage: '첫번째 슬라이드 입니다',
- lastSlideMessage: '마지막 슬라이드 입니다',
- paginationBulletMessage: '슬라이드 {{index}}로 이동',
- },
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- navigation: {
- nextEl: ".pd .thumb_box .area_slider .swiper-button-next",
- prevEl: ".pd .thumb_box .area_slider .swiper-button-prev",
- },
- on : {
- slideChangeTransitionEnd : function(){
- if($('.thumb_list .swiper-slide-active iframe').length){
- $('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').show();
- }else{
- $('.pd_detail .thumb_box .swiper-button-next, .pd_detail .thumb_box .swiper-button-prev').hide();
- }
- }
- }
- });
- /* var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {
- slidesPerView:1,
- speed: 1000,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- }); */
- //슬라이드 - STYLE24의 스타일링 추천
- var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {
- slidesPerView: 1,
- spaceBetween: 0,
- speed: 1000,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 3,
- spaceBetween: 8,
- speed: 1000,
- });
- $(".pic_list > div").hide();
- $(".pic_list > div").eq(0).fadeIn();
- rcmdPicimgSwiper.on('slideChange', function () {
- var pic_index=this.activeIndex;
- $(".pic_list > div").hide();
- $(".pic_list > div").eq(pic_index).fadeIn();
- });
- //슬라이드 - 베스트리뷰팝업
- var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 1,
- speed: 1000,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- //슬라이드 - 포토,영상리뷰팝업
- var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
- observer: true,
- observeParents: true,
- slidesPerView: 1,
- speed: 1000,
- pagination: {
- el: '.swiper-pagination',
- type: 'fraction',
- },
- });
- //--상품문의 창 순서 -
- var qnaCount = 0;
- //팝업 - 상품문의 리스트
- $(document).on('click','#btn_pdQnaList_pop',function(e){
- qnaCount = 1;
- return false;
- });
- //팝업 - 상품문의 작성
- $(document).on('click','#btn_pdQnaWrite_pop',function(e){
- qnaCount = 2;
- return false;
- });
- $(document).on('click','.pd_qnawrite_pop .close-modal',function(e){
- if(qnaCount === 2){
- $('#layer_goods_qna').modal('show');
- setTimeout(fnGoodsQnaList, 100); //일반상품상세 용
- qnaCount = 1;
- }
- return false;
- });
- //--상품문의 창 순서 -
- //--상품리뷰 창 순서 -
- var reviewCount = 0;
- //팝업 - 상품상세 베스트리뷰
- $(document).on('click','.pd_detail #btn_pdBestReview_pop a',function(e){
- reviewCount = 1;
- return false;
- })
- //팝업 - 상품상세>리뷰팝업>포토상세(포토영상상세)
- $(document).on('click','.pd_review_pop .area_rv_photo a',function(e){
- $("#layer_review_best").modal("show");
- reviewCount = 2;
- return false;
- })
- //팝업 - 상품상세>리뷰팝업>포토상세(베스트상세)
- $(document).on('click','.pd_review_pop .area_rv_best a',function(e){
- $("#layer_review_best").modal("show");
- reviewCount = 2;
- return false;
- })
- //팝업 - 상품상세>리뷰팝업>포토상세 닫기
- $(document).on('click','#layer_review_best .close-modal',function(e){
- if(reviewCount === 2){
- $('.pd_review_pop').modal('show');
- }
- return false;
- });
- //팝업 - 포토/영상 (list)
- $(document).on('click','.pd_review_pop #btn_more_photoreview',function(e){
- reviewCount = 2;
- return false;
- })
- $(document).on('click','#layer_review_photo .close-modal',function(e){
- if(reviewCount === 2){
- $('.pd_review_pop').modal('show');
- }
- return false;
- });
- //--상품리뷰 창 순서 -
- $(document).on('click','.pd_detail .thumb_box .thumb',function(e){
- $('html, body').addClass('lock'); // 210827_ lock 추가
- $('#pdItemThumbPop').css("display", "block");
- $("#pdItemThumbPop").scrollTop(0);
- var thumbIndex = $(this).parent().attr('id').replace("navLocate", "");
- var scrollThumbPop = $('#popThumb'+thumbIndex).height() * (thumbIndex-1);
- $('#pdItemThumbPop').animate({scrollTop : scrollThumbPop}, 1000);
- return false;
- }).on('click','.full_popup_wrap .btn_close, #btn_close_itemThumbPop',function(e){ // 210827_ lock 해제
- $("#pdItemThumbPop").scrollTop(0);
- $("#pdItemThumbPop").hide();
- $('html, body').removeClass('lock');
- return false;
- });
- // 포토,베스트리뷰숨김
- var review_open=$(".btn_review_open");
- //$(document).on('click','.btn_review_open',function(e){
- // $(this).toggleClass('active');
- // $(this).next(".review_list").toggleClass('active');
- // return false;
- //});
- $(document).on('click','.pd_review .btn_review_open',function(e){
- $(this).toggleClass('active');
- $(this).next(".review_list").toggleClass('active');
- if($(this).hasClass('active')){
- $(".pd_review.best").css("position", "absolute");
- //$(".pd_review.best").css("bottom", "0");
- } else {
- $(".pd_review.best").css("position", "relative");
- //$(".pd_review.best").css("bottom", "auto");
- }
- return false;
- });
- //팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업
- $(document).on('click','.Purchase_pop .option_result .option_open',function(e){
- $(".pop_option_select").show();
- return false;
- });
- $(document).on('click','.pop_option_select .close',function(e){
- $(".pop_option_select").hide();
- $('.option_result .option_open').removeClass('on');
- let target=$('.select_custom.item_opt1');
- target.each(function(){
- $('.form_field .select_custom.item_opt1.' +$(this).attr('id') ).find('.combo .select').html('선택');
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).attr('disabled', true);
- $('.form_field .select_custom.item_opt2.' +$(this).attr('id') ).find('.combo .select').html('선택');
- });
- return false;
- });
- //관심상품 등록
- $(document).on('click','.pd .itemLike',function(e){
- $(this).toggleClass('active');
- return false;
- });
- fnOptionSoldout();
- // 광고 스크립트용
- var goodsNavigation = [[${goodsNavigation}]];
- var cate1No = "";
- var cate2No = "";
- var cate3No = "";
- var cate4No = "";
- var cate5No = "";
- var cate1Nm = "";
- var cate2Nm = "";
- var cate3Nm = "";
- var cate4Nm = "";
- var cate5Nm = "";
- if (!gagajf.isNull(goodsNavigation)) {
- cate1No = goodsNavigation.cate1No;
- cate2No = goodsNavigation.cate2No;
- cate3No = goodsNavigation.cate3No;
- cate4No = goodsNavigation.cate4No;
- cate5No = goodsNavigation.cate5No;
- cateNm = cate3No;
- cate1Nm = goodsNavigation.cate1Nm;
- cate2Nm = goodsNavigation.cate2Nm;
- cate3Nm = goodsNavigation.cate3Nm;
- cate4Nm = goodsNavigation.cate4Nm;
- cate5Nm = goodsNavigation.cate5Nm;
- }
- // 광고 스크립트용
- var snsGoodsImg = _uploadGoodsUrl + "/" + [[${goodsInfo.sysImgNm}]];
- var snsUrl = location.protocol + _PAGE_GOODS_DETAIL + params.goodsCd +'&colorCd =' + params.colorCd ;
- var snsGoodsFullNm = [[${goodsInfo.goodsFullNm}]];
- <!-- 페이스북 카카오스토리 연동 관련 메타태그 -->
- $("meta[property='og:url']").attr('content', snsUrl);
- $("meta[property='og:title']").attr('content', snsGoodsFullNm);
- $("meta[property='og:description']").attr('content', snsGoodsFullNm);
- $("meta[property='og:image']").attr('content', snsGoodsImg);
- <!-- 트위터 관련 메타태그 -->
- $("meta[name='twitter:url']").attr('content', snsUrl);
- $("meta[name='twitter:title']").attr('content', snsGoodsFullNm);
- $("meta[name='twitter:description']").attr('content', snsGoodsFullNm);
- $("meta[name='twitter:image']").attr('content', snsGoodsImg);
- // 추천솔류션 meta 설정
- $("meta[property='eg:type']").attr('content',"product");
- $("meta[property='eg:cuid']").attr('content',eglqueueCuid);
- $("meta[property='eg:itemId']").attr('content', [[${goodsInfo.goodsCd}]] );
- $("meta[property='eg:itemName']").attr('content',[[${goodsInfo.goodsFullNm}]] );
- $("meta[property='eg:itemImage']").attr('content', snsGoodsImg);
- $("meta[property='eg:itemUrl']").attr('content',snsUrl);
- $("meta[property='eg:originalPrice']").attr('content',[[${goodsInfo.listPrice}]]);
- $("meta[property='eg:salePrice']").attr('content',[[${goodsInfo.currPrice}]]);
- $("meta[property='eg:category1']").attr('content',cate1No);
- $("meta[property='eg:category2']").attr('content',cate2No);
- $("meta[property='eg:category3']").attr('content',cate3No);
- $("meta[property='eg:category4']").attr('content',cate4No);
- $("meta[property='eg:category5']").attr('content',cate5No);
- $("meta[property='eg:category1_name']").attr('content',cate1Nm);
- $("meta[property='eg:category2_name']").attr('content',cate2Nm);
- $("meta[property='eg:category3_name']").attr('content',cate3Nm);
- $("meta[property='eg:category4_name']").attr('content',cate4Nm);
- $("meta[property='eg:category5_name']").attr('content',cate5Nm);
- $("meta[property='eg:brandId']").attr('content',[[${goodsInfo.brandGroupNo}]]);
- $("meta[property='eg:brandName']").attr('content',[[${goodsInfo.brandGroupNm}]]);
- $("meta[property='eg:regDate']").attr('content',[[${goodsInfo.regDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
- $("meta[property='eg:updateDate']").attr('content',[[${goodsInfo.updDt}]].toDate("YYYYMMDDHHmmss").format("YYYY-MM-DDTHH:mm:ssZ"));
- $("meta[property='eg:stock']").attr('content',[[${goodsInfo.goodsStockQty}]]);
- $("meta[property='eg:state']").attr('content',[[${goodsInfo.goodsStat}]]);
- $("meta[property='eg:description']").attr('content',null);
- $("meta[property='eg:extraImage']").attr('content',null);
- $("meta[property='eg:locale']").attr('content',"KR");
- $("meta[property='eg:isNew']").attr('content',([[${goodsInfo.formalGb}]] == 'G009_10')? 'True' :'False');
- $("meta[property='eg:etc1']").attr('content', [[${goodsInfo.selfGoodsYn}]]);
- // ep 쿠폰확인
- fnEpCouponDown([[${afLinkCd}]], [[${params.goodsCd}]], 1);
- $('.Purchase_pop .btPop_close').click(function(){
- $('html, body').css({'overflow': 'visible', 'height': '100%'});
- $('.container').removeClass('btPop_open');
- autome.style.top = 100 + "%";
- return false;
- });
- // 픽커모달
- $(document).on('click','.item_picker',function(e){
- //$("#reco_pop").modal("show");
- $("body").addClass("recoPop");
- return false;
- });
- $(document).on('click','#reco_pop .close-modal',function(e){
- $("body").removeClass("recoPop");
- return false;
- });
- // 상품평 상세 토글
- $(document).on('click','.pop_open_btn',function(){
- $('.modal.photo_comment_popup .pop_detail').toggleClass('active');
- });
- // 상품상세 asis html 이지미 경로 수정
- $(".pd_descrp .cont_body").find('img').each(function() {
- let tmpImgSrc = $(this).attr('src');
- if (tmpImgSrc.indexOf('Upload') == 1 ){ // /Upload
- $(this).attr('src' , tmpImgSrc.replace('/Upload', _imgUrl+"/Local").replace('/Upload/Local', "/Local"));
- }
- });
- // 현재 색상만 상세노출 처리
- let dpProductNo = [[${arrNoneProductNo}]];
- let selfGoodsYn = [[${goodsInfo.selfGoodsYn}]]
- if (!gagajf.isNull(dpProductNo) && "Y" == selfGoodsYn){
- let arrNoneProductNo = dpProductNo.split(',');
- // for(let i=0; i<arrNoneProductNo.length; i++){
- // $('#'+arrNoneProductNo[i]).css('display', 'none');
- // }
- arrNoneProductNo.forEach(function(item,index, array){
- if(!gagajf.isNull(item)) {
- $('#'+item).css('display', 'none');
- }
- });
- }
- });
- //pd전용 - 썸네일/헤더 블라인드 생성 : 210520_ 추가
- $('.pd .thumb_box .thumb_list .swiper-slide').prepend('<span></span>');
- // pd전용 - 스크롤 스크립트
- $(window).scroll(function(){
- var lastScrollTop = 0;
- var st = $(this).scrollTop();
- if($('header').hasClass("main") !== true){
- if (st > lastScrollTop){
- $(".app .gnb").css("position", "fixed");
- $(".htop").css("background", "#fff");
- $(".app .gnb .btn-expand").css("position", "fixed");
- $(".tabbar").removeClass("fixed");
- $(".thumb_list .swiper-slide span").animate({"opacity": 0}, 30);
- } else {
- $(".app .gnb").css("position", "fixed");
- $(".htop").css("background", "#fff");
- $(".app .gnb .btn-expand").css("position", "fixed");
- $(".tabbar").addClass("fixed");
- $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 30);
- setTimeout(function(){
- if($(window).scrollTop() === 0){
- $(".app .gnb").css("position", "relative");
- $(".app .gnb .btn-expand").css("position", "absolute");
- }
- },300)
- }
- if(st < 10) {
- $(".htop").css("background", "transparent");
- $(".thumb_list .swiper-slide span").animate({"opacity": 0.5}, 0);
- }
- lastScrollTop = st;
- }
- });
- let vh = window.innerHeight * 0.01;
- document.documentElement.style.setProperty('--vh', `${vh}px`);
- let goodsVideoList = [[${goodsVideoList}]];
- let videoFlag = false;
- if (goodsVideoList != null){
- $.each(goodsVideoList, function(idx, goodsVideo) {
- if ("M" == goodsVideo.videoGb){
- videoFlag = true;
- return false;
- }
- });
- }
- if (videoFlag){
- var player = document.getElementById('child');
- player.onload = function() {
- try {
- var controller = new VgControllerClient({
- target_window: document.getElementById('child').contentWindow
- });
- //console.log(controller.get_screen());
- //controller.enable_fullscreen_button(true);
- // 여기서부터 이벤트 리스너를 등록하거나, 웹페이지 Element에 메소드를 bind하면 됩니다.
- // 클릭 인지 테스트.
- var MovBtn = document.getElementById("prodMovBtn");
- MovBtn.addEventListener("click", function() {
- $(this).hide();
- controller.play();
- });
- controller.on('ready', function() {
- controller.set_ratio('fill');
- controller.play();
- controller.set_controls_inactive_time(1);
- });
- controller.on('play', function() {
- controller.set_controls_inactive_time(1);
- });
- controller.on('pause', function() {
- $("#prodMovBtn").show();
- });
- $(window).scroll(function(){
- var scrollTop= $(window).scrollTop();
- var movHeight = $(".movbox").outerHeight()/2.5;
- //console.log(movHeight);
- //console.log(scrollTop);
- if (scrollTop > movHeight){
- controller.pause();
- return false;
- } else {
- controller.play();
- return false;
- //controller.set_control_visibility(false);
- }
- });
- } catch(e) {
- // Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
- // 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
- // 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
- }
- };
- }
- // 210407_스크롤감지 헤더 그림자
- $('.pd_delivery_pop').scroll(function(){
- $(".pd_delivery_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
- $(".pd_delivery_pop .modal-header").css("border-bottom", "0px none");
- if($(".pd_delivery_pop").scrollTop() === 0){
- $(".pd_delivery_pop .modal-header").css("box-shadow", "none");
- $(".pd_delivery_pop .modal-header").css("border-bottom", "1px solid #eee");
- }
- });
- $('.pd_review_pop').scroll(function(){
- $(".pd_review_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
- $(".pd_review_pop .modal-header").css("border-bottom", "0px none");
- if($(".pd_review_pop").scrollTop() === 0){
- $(".pd_review_pop .modal-header").css("box-shadow", "none");
- $(".pd_review_pop .modal-header").css("border-bottom", "1px solid #eee");
- }
- });
- $('.pd_qnalist_pop').scroll(function(){
- $(".pd_qnalist_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
- $(".pd_qnalist_pop .modal-header").css("border-bottom", "0px none");
- if($(".pd_qnalist_pop").scrollTop() === 0){
- $(".pd_qnalist_pop .modal-header").css("box-shadow", "none");
- $(".pd_qnalist_pop .modal-header").css("border-bottom", "1px solid #eee");
- }
- });
- //window.onscroll = function() {
- // document.getElementsByClassName('.modal.pd_pop.pd_review_pop .pd_review .area_rv_empty .btn_group_flex').style.top =
- // window.pageYOffset + 'px';
- //};
- /*]]>*/
- </script>
- <!-- 광고 스크립트 -->
- <th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>
- <!-- //광고 스크립트 -->
- </th:block>
- </body>
- </html>
|