|
|
@@ -0,0 +1,171 @@
|
|
|
+<!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 : CategoryMainFormMob.html
|
|
|
+ * @desc : 카테고리메인 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.05.10 bin2107 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main role="" id="" class="container dp">
|
|
|
+ <section class="content dp_submain">
|
|
|
+ <th:block th:if="${cateMainLayoutList}" th:each="mainLayoutData, mainStat : ${cateMainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SCM','')},contentsTitle=${mainLayoutData.contentsTitle}">
|
|
|
+ <th:block th:if="${contentsLoc=='001'}">
|
|
|
+ <div class="inner wide" th:if="${planningList != null and !planningList.empty}">
|
|
|
+ <div class="submain_visual">
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" th:each="item, status : ${planningList}">
|
|
|
+ <div class="img">
|
|
|
+ <img th:src="${@environment.getProperty('domain.image') + '/' + item.imgPath1}" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="txtWrap">
|
|
|
+ <p th:text="${item.strTitle1}">겨울정기 가격제안전<br>겨울정기 가격</p>
|
|
|
+ <p class="txt_xs" th:text="${item.subText1}">나만의 겨울 스타일 찾기</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <th:block th:if="${contentsLoc=='004'}">
|
|
|
+ <div class="inner bg_gray">
|
|
|
+ <div class="sub_category">
|
|
|
+ <div class="cate_wrap">
|
|
|
+ </div>
|
|
|
+ <!-- 카테고리 3줄 이상일 경우 노출 -->
|
|
|
+ <div class="more_btn">
|
|
|
+ <button type="button" class="btn"><span>더보기</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <th:block th:if="${contentsLoc=='002'}">
|
|
|
+ <div class="inner wide" th:if="${newGoodsList != null}">
|
|
|
+ <div class="new_item">
|
|
|
+ <h2 class="dp_subtitle" th:text="${contentsTitle}">신상품</h2>
|
|
|
+ <div class="swiper-container item_list">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" th:each="item, status : ${newGoodsList}">
|
|
|
+ <div class="item_prod" th:if="${status.count<21}">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM001');">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm}" >
|
|
|
+ <button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SCM001', planDtlSq=''">관심상품 추가</button>
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
|
|
|
+ <div class="itemName" th:text="${item.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice" th:text="${#numbers.formatInteger(item.currPrice,3,'POINT')}">80,100</p>
|
|
|
+ <div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <th:block th:if="${contentsLoc=='003'}">
|
|
|
+ <div class="inner" th:if="${bestGoodsList != null}">
|
|
|
+ <div class="best_item">
|
|
|
+ <h2 class="dp_subtitle" th:text="${contentsTitle}">베스트 상품</h2>
|
|
|
+ <div class="item_list">
|
|
|
+ <div class="itemsGrp">
|
|
|
+ <div class=" item_prod" th:each="item, status : ${bestGoodsList}">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM002');">
|
|
|
+ <div class="shape" th:classappend="${status.count==1}?'ranker'"><span th:text="${status.index+1}"></span></div>
|
|
|
+ <div class=" itemPic">
|
|
|
+ <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm}" >
|
|
|
+ <button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SCM002', planDtlSq=''">관심상품 추가</button>
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
|
|
|
+ <div class=" itemName" th:text="${item.goodsFullNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
|
|
|
+ <p class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'POINT')}">89,000</p>
|
|
|
+ <p class="itemPrice">[[${#numbers.formatInteger(item.currPrice,1,'COMMA')}]]
|
|
|
+ <span class=" itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ </th:block>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <script th:inline="javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+ fnSetCategory1Depts();
|
|
|
+
|
|
|
+ var swiper = new Swiper('.submain_visual .swiper-container', {
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
+ pagination: {
|
|
|
+ el: '.submain_visual .swiper-pagination',
|
|
|
+ type: 'fraction',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on('click','.sub_category .more_btn',function(){
|
|
|
+ $(this).toggleClass('on');
|
|
|
+ $('.sub_category .cate_wrap').toggleClass('on');
|
|
|
+ if($(this).hasClass('on')){
|
|
|
+ $(this).find('span').text('접기');
|
|
|
+ }else{
|
|
|
+ $(this).find('span').text('더보기');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var dp_newitem_slide = new Swiper('.new_item .swiper-container', {
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ spaceBetween: 8,
|
|
|
+ centerMode: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 카테고리1Depts 설정
|
|
|
+ var fnSetCategory1Depts = function() {
|
|
|
+ let allCate = [[${allCateList}]];
|
|
|
+ $.each(allCate, function(idx1, cate1) {
|
|
|
+ if ([[${params.cate1No}]] == cate1.cate1No) {
|
|
|
+ let tag = '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate1.cateGb + '\', ' + cate1.cate1No + ');">전체</a>\n';
|
|
|
+ if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
|
|
|
+ $.each(cate1.cate2List, function(idx2, cate2) {
|
|
|
+ tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('.cate_wrap').html(tag);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
bin2107