|
|
@@ -0,0 +1,354 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="mob/common/layout/DefaultLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : LookbookDetailFormMob.html
|
|
|
+ * @desc : 룩북 상세 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.05.09 bin2107 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main role="" id="" class="container br">
|
|
|
+
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content br_lookbook" th:if="${lookbookDetailList != null}">
|
|
|
+ <div class="inner">
|
|
|
+ <h2 class="collection_title" th:text="${lookbookInfo.title}">2020 F/W COLLECTION</h2>
|
|
|
+ </div>
|
|
|
+ <div class="inner wide">
|
|
|
+ <div class="recommendedArea">
|
|
|
+ <!-- 상품이미지pic -->
|
|
|
+ <div class="area_slider pic_img">
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <th:block th:each="item, stat : ${lookbookDetailList}">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="page">
|
|
|
+ <div class="pic">
|
|
|
+ <span class="thumb" th:style="${'background-image:url('+@environment.getProperty('domain.image')+item.sysFileNm+')'}"></span>
|
|
|
+ <!-- 상품피커 -->
|
|
|
+ <th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
|
|
|
+ <div class="item_picker" th:style="${'left:'+goodsItem.xlim+'%; top:'+goodsItem.ylim+'%;'}">
|
|
|
+ <button type="button" th:onclick="fnLookbookGoodsPopup([[${goodsItem.sysImgNm}]],[[${goodsItem.brandGroupNm}]],[[${goodsItem.goodsFullNm}]],[[${goodsItem.listPrice}]],[[${goodsItem.currPrice}]],[[${goodsItem.dcRate}]],[[${goodsItem.goodsCd}]],[[${goodsItem.stockQty}]],[[${goodsItem.soldoutYn}]])"><span class="ico ico_picker"></span></button>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <!-- //상품피커 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //상품이미지pic -->
|
|
|
+ <div class="lb_text" th:if="${lookbookDetailList != null}">
|
|
|
+ <th:block th:each="item, stat : ${lookbookDetailList}">
|
|
|
+ <div class="text_cont" th:text="${item.imgDesc}">
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <button class="btn btnText"><p>더보기</p><span></span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner" th:if="${lookbookDetailList != null}">
|
|
|
+ <div class="br_inlookbook">
|
|
|
+ <th:block th:each="item, stat : ${lookbookDetailList}">
|
|
|
+ <p class="title ioTit"><em>룩북 속 상품</em>(<th:block th:text="${#lists.size(item.lookbookGoodsList)}"></th:block>)</p>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <div class="area_slider">
|
|
|
+ <!-- 겉 상품 -->
|
|
|
+ <div class="items_outside">
|
|
|
+ <th:block th:each="item, stat : ${lookbookDetailList}">
|
|
|
+ <div class="itemsOut" th:id="${'itemsList'+stat.count}">
|
|
|
+ <div class="swiper-container items_inside swiper-container-initialized swiper-container-horizontal">
|
|
|
+ <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
|
|
|
+ <th:block th:if="${item.lookbookGoodsList != null and !item.lookbookGoodsList.empty}" th:each="goodsItem, goodsStatus : ${item.lookbookGoodsList}">
|
|
|
+ <div class="swiper-slide swiper-slide-active" style="width: 210.333px; margin-right: 20px;">
|
|
|
+ <div class="item_prod" th:classappend="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}? 'unable' : ''"
|
|
|
+ th:attr="goodsCd=${goodsItem.goodsCd}, optCdInfo=${goodsItem.optCdInfo}, minOrdQty=${goodsItem.minOrdQty}, goodsType=${goodsItem.goodsType}">
|
|
|
+ <div class="item_state">
|
|
|
+ <th:block th:each="optCd : ${#strings.arraySplit(goodsItem.optCdInfo,',')}">
|
|
|
+ <input type="hidden" name="lookbookGoodsOptCd" th:value="${optCd}"/>
|
|
|
+ </th:block>
|
|
|
+ <th:block th:if="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" >
|
|
|
+ </th:block>
|
|
|
+ <th:block th:unless="${(goodsItem.stockQty <= 0 or goodsItem.soldoutYn == 'Y')}">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsItem.goodsCd}]])">
|
|
|
+ </th:block>
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsItem.sysImgNm}">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsItem.brandGroupNm}">BRAND NAME1</p>
|
|
|
+ <div class="itemName" th:text="${goodsItem.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
|
|
|
+ <p class="itemPrice">[[${#numbers.formatInteger(goodsItem.currPrice,0,'COMMA')} + 원]]
|
|
|
+ <span class="itemPrice_original" th:if="${goodsItem.currPrice != goodsItem.listPrice}" th:text="${#numbers.formatInteger(goodsItem.listPrice,3,'COMMA')}">89,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsItem.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsItem.dcRate,0,0)}%|">10%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
|
|
|
+ <div class="swiper-scrollbar-drag" style="transition-duration: 0ms;"></div>
|
|
|
+ </div>
|
|
|
+ <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <!-- 룩북1 해당 아이템 -->
|
|
|
+ </div>
|
|
|
+ <!-- 겉 상품 종료 -->
|
|
|
+ </div>
|
|
|
+ <!-- 05.06_ 추가 : .ioTit , .ioBtn -->
|
|
|
+ <th:block th:each="item, stat : ${lookbookDetailList}">
|
|
|
+ <button class="btn ioBtn" th:onclick="fnAddCartLookBookGoods1(this,[[${stat.count}]]);">모두 쇼핑백 담기</button>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inner" th:if="${otherLookbookList}">
|
|
|
+ <!-- 다른룩북보기 슬라이드 -->
|
|
|
+ <div class="br_otherbrand">
|
|
|
+ <h3 class="br_subtitle">다른 룩북 보기</h3>
|
|
|
+ <div class="area_slider">
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <th:block th:if="${otherLookbookList}" th:each="oneData, status : ${otherLookbookList}">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a th:href="|javascript:cfnGoToLookbookDetail('${oneData.lookbookSq}','${oneData.brandCd}')|">
|
|
|
+ <div class="thumb">
|
|
|
+ <img th:src="${@environment.getProperty('domain.image')+oneData.sysFileNm}" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <p class="tt" th:text="${oneData.title}"></p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //다른룩북보기 슬라이드 -->
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- ★ 컨텐츠 종료 -->
|
|
|
+
|
|
|
+ <!-- 픽커모달 -->
|
|
|
+ <div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
+<!-- <div class="modal-dialog" role="document">-->
|
|
|
+<!-- <div class="modal-content">-->
|
|
|
+<!-- <div class="modal-header">-->
|
|
|
+<!-- <h5 class="modal-title"><span class="sr_only">제품정보</span></h5>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="modal-body">-->
|
|
|
+<!-- <div class="itemsGrp rowtype">-->
|
|
|
+<!-- <div class="item_prod">-->
|
|
|
+<!-- <div class="item_state">-->
|
|
|
+<!-- <a href="#none" class="itemLink">-->
|
|
|
+<!-- <div class="itemPic">-->
|
|
|
+<!-- <img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <p class="itemBrand">BRAND NAME</p>-->
|
|
|
+<!-- <div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>-->
|
|
|
+<!-- <p class="itemPrice">-->
|
|
|
+<!-- 80,100-->
|
|
|
+<!-- </p>-->
|
|
|
+<!-- </a>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>-->
|
|
|
+ </div>
|
|
|
+ <!-- //픽커모달 -->
|
|
|
+
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <script th:inline="javascript">
|
|
|
+ /*<![CDATA[*/
|
|
|
+ var lookbookGb = [[${lookbookInfo.lookbookGb}]];
|
|
|
+ var brandCd = [[${lookbookInfo.brandCd}]];
|
|
|
+ var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
|
|
|
+
|
|
|
+ var fnLookbookGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7,obj8,obj9){
|
|
|
+ $("#reco_pop .modal-dialog").remove();
|
|
|
+ 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 ';
|
|
|
+ if(obj9 == 'Y'){
|
|
|
+ tag += ' sold_out';
|
|
|
+ }
|
|
|
+ tag +='">\n';
|
|
|
+ tag +=' <div class="item_state">\n';
|
|
|
+ tag +=' <a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')" class="itemLink">\n';
|
|
|
+ tag +=' <div class="itemPic">\n';
|
|
|
+ tag +=' <img class="vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260" alt="">\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <p class="itemBrand">'+obj2+'</p>\n';
|
|
|
+ tag +=' <div class="itemName">'+obj3+'</div>\n';
|
|
|
+ tag +=' <p class="itemPrice">'+obj5.addComma()+'</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="#close-modal" rel="modal:close" class="close-modal ">Close</a>\n';
|
|
|
+
|
|
|
+ $("#reco_pop").append(tag);
|
|
|
+ $('#reco_pop').modal("show");
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function(){
|
|
|
+ //setHtop();
|
|
|
+
|
|
|
+ var spc = $('.swiper-pagination-current');
|
|
|
+ var spt = $('.swiper-pagination-total');
|
|
|
+ setInterval(function(){
|
|
|
+ for(var i=0; i<spc.length; i++){
|
|
|
+ if(spc[i].innerText.length < 2){
|
|
|
+ var itNum = spc[i].innerText.toString();
|
|
|
+ spc[i].innerText = 0+itNum;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(var i=0; i<spt.length; i++){
|
|
|
+ if(spt[i].innerText.length < 2){
|
|
|
+ var itNum2 = spt[i].innerText.toString();
|
|
|
+ spt[i].innerText = 0+itNum2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 10);
|
|
|
+
|
|
|
+ $(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;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function setHtop() {
|
|
|
+ if($('header').hasClass('main')) {
|
|
|
+ $('#htopMain').show();
|
|
|
+ $('#htopSub').hide();
|
|
|
+ } else {
|
|
|
+ $('#htopMain').hide();
|
|
|
+ $('#gnb').hide();
|
|
|
+ $('#htopSub').show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 룩북 슬라이드
|
|
|
+ var rcmdPicimgSwiper = new Swiper('.recommendedArea .area_slider .swiper-container', {
|
|
|
+ loop: true,
|
|
|
+ slidesPerView: 1,
|
|
|
+ spaceBetween: 0,
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ type: 'fraction',
|
|
|
+ },
|
|
|
+ //210414_자동롤링 추가
|
|
|
+ //autoplay : {
|
|
|
+ // delay : 3000, // 시간 설정
|
|
|
+ //},
|
|
|
+ on: {
|
|
|
+ slideChange:function(){
|
|
|
+ // 05.06_ 추가 : .ioTit , .ioBtn
|
|
|
+ $('.text_cont').removeClass('active');
|
|
|
+ $('.ioTit').removeClass('active');
|
|
|
+ $('.itemsOut').removeClass('active');
|
|
|
+ $('.ioBtn').removeClass('active');
|
|
|
+ $('.text_cont').eq(this.realIndex).addClass('active');
|
|
|
+ $('.ioTit').eq(this.realIndex).addClass('active');
|
|
|
+ $('.itemsOut').eq(this.realIndex).addClass('active');
|
|
|
+ $('.ioBtn').eq(this.realIndex).addClass('active');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ //룩북 속 상품
|
|
|
+ var inLookbookSwiper = new Swiper('.br_inlookbook .area_slider .swiper-container', {
|
|
|
+ slidesPerView: 3,
|
|
|
+ spaceBetween: 26,
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
+ //pagination: {
|
|
|
+ // el: '.swiper-pagination',
|
|
|
+ // type: 'fraction',
|
|
|
+ //},
|
|
|
+ });
|
|
|
+
|
|
|
+ //다른 룩북 보기
|
|
|
+ var otherBrandSwiper = new Swiper('.br_otherbrand .area_slider .swiper-container', {
|
|
|
+ slidesPerView: 2,
|
|
|
+ spaceBetween: 8,
|
|
|
+ //pagination: {
|
|
|
+ // el: '.swiper-pagination',
|
|
|
+ // type: 'fraction',
|
|
|
+ //},
|
|
|
+ });
|
|
|
+
|
|
|
+ // 더보기
|
|
|
+ var count = 0;
|
|
|
+ function view_fold(){
|
|
|
+ document.querySelector(".lb_text button").onclick = function () {
|
|
|
+ if(count === 0) {
|
|
|
+ //document.querySelector(".lb_text .text_cont").style.height = "auto";
|
|
|
+ $('.lb_text .text_cont').css('height', 'auto');
|
|
|
+ document.querySelector(".lb_text .btnText p").innerText="접기";
|
|
|
+ document.querySelector(".lb_text .btnText span").style.background="url(/images/mo/br_arrow_up.png)";
|
|
|
+ count = 1;
|
|
|
+ } else {
|
|
|
+ //document.querySelector(".lb_text .text_cont").style.height = "3.4rem";
|
|
|
+ $('.lb_text .text_cont').css('height', '3.4rem');
|
|
|
+ document.querySelector(".lb_text .btnText p").innerText="더보기";
|
|
|
+ document.querySelector(".lb_text .btnText span").style.background="url(/images/mo/br_arrow_down.png)";
|
|
|
+ count = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ view_fold();
|
|
|
+ /*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 픽커모달
|
|
|
+ $(document).ready(function () {
|
|
|
+
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
bin2107