Browse Source

상품상세 레이아웃

eskim 5 năm trước cách đây
mục cha
commit
ed959cb169

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 723 - 360
src/main/webapp/WEB-INF/views/web/goods/GoodsDetailFormWeb.html


+ 76 - 0
src/main/webapp/WEB-INF/views/web/goods/GoodsIncludeFormWeb.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : GoodsIncludeFormWeb.html
+ * @desc    : 상품상세 Include Page - 공용
+ *============================================================================
+ * Wivismall
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.03.02   eskim	   최초 작성
+ *******************************************************************************
+ -->
+ <!-- 상품상세 네비게이션  -->
+<th:block  th:fragment="goodsNaviForm">
+	<div class="breadcrumb"> 
+		<ul>
+			<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+			<th:block th:if="${goodsNavigation != null}">
+				<th:block th:if="${goodsNavigation.formalGb == '20'}">
+			<li><a href="javascript:void(0);" onclick="cfnGoToOutletMain('300')" >아울렛</a></li>
+			<li th:if="${goodsNavigation.cate1No}">
+				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryGoodsList('','',[[${goodsNavigation.formalGb}]],[[${goodsNavigation.cate1No}]])" th:text="${goodsNavigation.cate1Nm}">cate</a>
+			</li>
+				</th:block>
+				<th:block th:unless="${goodsNavigation.formalGb == '20'}">
+			<li th:if="${goodsNavigation.cate1No}">
+				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryMain([[${goodsNavigation.cateGb}]],[[${goodsNavigation.cate1No}]])"
+					th:text="${goodsNavigation.cate1Nm}">cate</a>
+			</li>
+				</th:block>
+			<li th:if="${goodsNavigation.cate2No}">
+				<th:block th:if="${goodsNavigation.cate3No}">
+				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryGoodsList('','',[[${goodsNavigation.formalGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]])"
+				th:text="${goodsNavigation.cate2Nm}">cate</a>
+				</th:block>
+				<th:block th:unless="${goodsNavigation.cate3No}"><strong th:text="${goodsNavigation.cate2Nm}">cate</strong></th:block>
+			</li>
+			<li th:if="${goodsNavigation.cate3No }">
+				<th:block th:if="${goodsNavigation.cate4No}">
+				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryGoodsList('','',[[${goodsNavigation.formalGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]], [[${goodsNavigation.cate3No}]])"
+				th:text="${goodsNavigation.cate3Nm}">cate</a>
+				</th:block>
+				<th:block th:unless="${goodsNavigation.cate4No}"><strong th:text="${goodsNavigation.cate3Nm}">cate</strong></th:block>
+			</li>
+			<li th:if="${goodsNavigation.cate4No }">
+				<th:block th:if="${goodsNavigation.cate5No}">
+				<a href="javascript:void(0);" th:onclick="cfnGoToCategoryGoodsList('','',[[${goodsNavigation.formalGb}]],[[${goodsNavigation.cate1No}]], [[${goodsNavigation.cate2No}]], [[${goodsNavigation.cate3No}]], [[${goodsNavigation.cate4No}]])"
+				th:text="${goodsNavigation.cate4Nm}">cate</a>
+				</th:block>
+				<th:block th:unless="${goodsNavigation.cate5No}"><strong th:text="${goodsNavigation.cate4Nm}">cate</strong></th:block>
+			</li>
+			<li th:if="${goodsNavigation.cate5No}">
+				<th:block th:text="${goodsNavigation.cate5Nm}">cate</th:block>
+			</li>
+			</th:block>
+		</ul> 
+	</div>
+</th:block>
+
+<!-- 상품상세 SNS  -->
+<th:block  th:fragment="goodsSnsForm" >
+<div class="sns_list" th:with="pastelUrl=${@environment.getProperty('domain.pastel')}, goodsView=${@environment.getProperty('upload.goods.view')}">
+	<ul>
+		<li><a href="javascript:void(0);" th:attr="onclick=|sendSns('kakaostory', '${pastelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsTnmFull}', '', '');|"></a></li>
+		<li><a href="javascript:void(0);" th:attr="onclick=|sendSns('facebook', '${pastelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsTnmFull}', '', '');|"></a></li>
+		<li><a href="javascript:void(0);" th:attr="onclick=|sendSns('twitter', '${pastelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsTnmFull+ '#파스텔몰'}', '', '');|"></a></li>
+		<li><a href="javascript:void(0);" th:attr="onclick=|sendSns('pinterest', '${pastelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsTnmFull}', '${goodsInfo.imgType == 'A' ? goodsView + goodsInfo.imgPath1 : goodsInfo.imgPath1}', '${goodsInfo.goodsTnmFull}');|"></a></li>
+		<li><a href="javascript:void(0)" class="btn_copy"></a></li>
+	</ul>
+</div>
+</th:block>
+
+</html>

+ 14 - 6
src/main/webapp/ux/pc/css/common.css

@@ -1121,6 +1121,14 @@ input[type="file"] {
     -webkit-border-radius: 5px;
     border-radius: 5px;
 }
+.select_custom[disabled] {
+  pointer-events: none;
+} 
+.select_custom[disabled] .select {
+  pointer-events: none;
+  color: #bbb;
+  background-color: #f5f5f5 !important;
+} 
 .select_custom .combo .list>li[aria-disabled="true"] {
 	text-decoration: line-through;
     background: #f5f5f5;
@@ -1338,9 +1346,9 @@ input[type="file"] {
 
 .bundle {display: inline-block;padding:0 10px;}
 .bundle:first-child {margin-left:-10px;}
-.bundle li{position: relative;}
-.bundle li:last-child::after{content: ''; display: block; width: 1px; height: 18px; background: #4e4e4e; position: absolute; top:50%; bottom:auto; right: -12px; left:auto; transform: translateY(-50%);}
-.bundle:last-child li::after{content: ''; display: none;}
+.bundle > li a {position: relative;}
+.bundle > li:last-child > a::after{content: ''; display: block; width: 1px; height: 18px; background: #4e4e4e; position: absolute; top:50%; bottom:auto; right: -20px; left:auto; transform: translateY(-50%);}
+.bundle:last-child li a::after{content: ''; display: none;}
 
 .gnb {height:58px; margin:0 auto; padding:0px 70px 20px; position: relative; min-width: 1460px; box-sizing:border-box;}
 .gnb::after {content: ''; display: block; clear: both;}
@@ -1368,7 +1376,7 @@ input[type="file"] {
 .all_menu > .area > ul > li > a{font-size:15px;color:#333}
 .all_menu > .area > ul > li.on .depth_menu{display:block}
 
-.all_menu.on .depth_menu{display:block;}
+/* .all_menu.on .depth_menu{display:block;}
 .all_menu .depth_menu{display:none;position:absolute;top:190px;left:0;width:100%;min-width:1350px;height:535px;padding:23px 21px;border:1px solid #fd4802;background:#fff;box-sizing:border-box;clear:both;z-index: 200;}
 .all_menu .depth_menu .step1{position: relative;float: left;top: 0px;box-sizing: border-box;width: 300px;height: 600px;padding: 4px 0px 0px 48px;z-index: 1;}
 .all_menu .depth_menu .step2{position: relative;float: left;width: calc(100% - 300px);height: 600px;box-sizing: border-box;padding-left: 30px;}
@@ -1398,7 +1406,7 @@ input[type="file"] {
 .all_menu .depth_menu a{padding:3px 0 2px !important;font-size:14px}
 
 .all_menu .depth_menu a:hover {font-weight: bold; color: #fd4802;}
-.all_menu .depth_menu ul:nth-child(3) a:hover {font-weight: bold; color: #445694;}
+.all_menu .depth_menu ul:nth-child(3) a:hover {font-weight: bold; color: #445694;} */
 .all_menu ul li:nth-last-child(2) .depth_menu a:hover {font-weight: bold; color: #445694;}
 .all_menu ul li:nth-last-child(4) .depth_menu ul:nth-child(3) a:hover {font-weight: bold; color: #fd4802;}
 
@@ -1430,7 +1438,7 @@ input[type="file"] {
 .common_footer .service_support .support_txt li::before {content:''; position:absolute; left:0; top:2px; bottom:2px; border-left:1px solid #ddd; z-index:2;}
 .common_footer .service_support .support_txt li:first-child {margin-left:0; padding-left:0;}
 .common_footer .service_support .support_txt li:first-child::before {display:none;}
-.common_footer .service_support .family_link {position:absolute; z-index: 100; right:0; top:0px; width:170px;}
+.common_footer .service_support .family_link {position:absolute; z-index: 99; right:0; top:0px; width:170px;}
 .common_footer .service_support .family_link h2 a {display:block; position:relative; height:32px; padding:10px; color: #444; font-weight: 300; font-size: 14px; letter-spacing: 0; line-height:1; text-align: left; border: solid 1px transparent; border-bottom: solid 1px #222222; -webkit-box-sizing: border-box; box-sizing: border-box; }
 .common_footer .service_support .family_link h2 a:hover{background-color: rgb(255 255 255);}
 .common_footer .service_support .family_link h2 a:focus{

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 784 - 151
src/main/webapp/ux/pc/css/layout.css


+ 30 - 0
src/main/webapp/ux/style24_link.js

@@ -18,6 +18,14 @@ const _PAGE_CUSTOMER_PWD_CHANGE_TEMP = _frontUrl + "/customer/password/change/fo
 const _PAGE_CUSTOMER_DORMANT = _frontUrl + "/customer/dormant/certify/form";						// 고객 > 휴면회원
 
 //== 상품상세 ==/
+const _PAGE_GOODS_DETAIL = _frontUrl + "/goods/detail/form?goodsCd=";		// 상품 상세
+//const _PAGE_GOODS_DETAIL = _frontUrl + "/goods/detail/coupon/layer?goodsCd=";		// 쿠폰레이어
+const _PAGE_SHOPPING_BENEFIT = _frontUrl + "/goods/shopping/benefit/layer";		// 쇼핑혜택레이어
+const _PAGE_CARD_PROMOTION = _frontUrl + "/goods/card/promotion/layer";		// 카드혜택레이어
+const _PAGE_GOODS_SIZEINFO = _frontUrl + "/goods/sizeInfo/layer?goodsCd=";		// 사이즈정보레이어
+const _PAGE_GOODS_COUNSEL = _frontUrl + "/goods/counsel/layer?goodsCd=";		// 상품문의레이어
+const _PAGE_GOODS_DELIVERY = _frontUrl + "/goods/delivery/layer?goodsCd=";		// 배송/교환/반품 레이어
+const _PAGE_GOODS_REVIEW = _frontUrl + "/goods/review/layer?goodsCd=";		// 상품평 레이어
 
 //== 장바구니 ==/
 
@@ -244,3 +252,25 @@ var cfnLoginKakao = function (requestGb, chkRememberMe) {
 		document.location.href = actionUrl + '&requestGb=' + requestGb;
 	}
 };
+
+/**
+ * @type   : function
+ * @access : public
+ * @desc   : 상품상세로 이동
+ * <pre>
+ *        cfnGoToGoodsDetail('A83U-TS058S');
+ * </pre>
+ * @param  : goodsCd - 상품코드코드. 필수
+ * @param  : ithrCd - 유입경로. 필수
+ * @param  : contentsLoc - 컨텐츠위치.
+ * @since  : 2021/03/02
+ * @author : eskim
+ */
+var cfnGoToGoodsDetail = function (goodsCd, ithrCd, contentsLoc, planDtlSq) {
+	var params = goodsCd;
+	if (typeof (ithrCd) != 'undefined') params += "&ithrCd=" + ithrCd;
+	if (typeof (contentsLoc) != 'undefined' && contentsLoc != "") params += "&contentsLoc=" + contentsLoc;
+	if (typeof (planDtlSq) != 'undefined') params += "&planDtlSq=" + planDtlSq;
+	cfnGoToPage(_PAGE_GOODS_DETAIL + params);
+}
+

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác