feat: 게시판 연관상품 목록 표준화
This commit is contained in:
이주일
@@ -21,6 +21,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<%-- 공통 include --%>
|
||||
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
||||
<style>
|
||||
.relate-goods-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
@@ -132,13 +139,13 @@
|
||||
});
|
||||
} else { //메인화면 호출 안할 시
|
||||
// 상품 - 4열 슬라이드 타입 (이벤트 추천 상품 슬릭 이벤트)
|
||||
$('.four-row-slick').slick({
|
||||
$('.relate-goods-slick').slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
speed: 900,
|
||||
infinite: true,
|
||||
prevArrow: $('.four-row-slick__prev'),
|
||||
nextArrow: $('.four-row-slick__next'),
|
||||
prevArrow: $('.relate-goods-slick__prev'),
|
||||
nextArrow: $('.relate-goods-slick__next'),
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -938,7 +945,7 @@
|
||||
</div>
|
||||
</c:if>
|
||||
<%-------------------------------%>
|
||||
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList.relateInfoList}">
|
||||
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList}">
|
||||
<div class="cartOrder">
|
||||
<div class="main-section__container">
|
||||
<section class="main-section main-section__four-row">
|
||||
@@ -950,22 +957,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-list-type1">
|
||||
<div class="four-row-slick evtSlick">
|
||||
<c:forEach var = "item" items="${goodsList.relateInfoList}">
|
||||
<div class="${fn:length(goodsList) gt 4 ? 'four-row-slick relate-goods-slick evtSlick' : 'relate-goods-grid'}">
|
||||
<c:forEach var = "item" items="${goodsList}">
|
||||
<c:if test = "${not empty item.goodsInnb}">
|
||||
<div class="product-unit">
|
||||
<div class="product-unit-image">
|
||||
<c:forEach var = "img" items = "${goodsList.relateImgList}">
|
||||
<c:if test = "${item.goodsInnb eq img.goodsInnb}">
|
||||
<button type="button" onclick = "fn_move_goods_dtl(<c:out value="${item.goodsInnb}"/>)" value="${item.goodsInnb}">
|
||||
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
||||
<img src="<c:out value = "${cdnurl}${img.img}"/>" style="width: 100%;
|
||||
<button type="button" onclick = "fn_move_goods_dtl(<c:out value="${item.goodsInnb}"/>)" value="${item.goodsInnb}">
|
||||
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
||||
<img src="<c:out value = "${cdnurl}${item.img}"/>" style="width: 100%;
|
||||
height: 304px; /* 원하는 고정 높이 설정 */
|
||||
object-fit: cover; /* 이미지 비율을 유지하면서 영역에 맞게 자름 */"
|
||||
onerror="this.src='/pc/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
|
||||
</button>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
onerror="this.src='/pc/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-unit-info">
|
||||
<div class="product-badge-container">
|
||||
@@ -996,48 +999,42 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="product-unit-price">
|
||||
<c:forEach var="goodsOpt" items="${goodsList.relateGoodsOptList}">
|
||||
<c:if test="${item.goodsInnb eq goodsOpt.goodsInnb && goodsOpt.stdrDvAt eq 'Y'}">
|
||||
<div class="product-unit-price__price">
|
||||
<span class="product-unit-price__original">
|
||||
<fmt:formatNumber value="${goodsOpt.cnsmrpric}" pattern="#,###"/>
|
||||
<fmt:formatNumber value="${item.cnsmrpric}" pattern="#,###"/>
|
||||
</span>
|
||||
<span class="product-unit-price__current">
|
||||
<fmt:formatNumber value="${goodsOpt.slepric}" pattern="#,###"/>
|
||||
<fmt:formatNumber value="${item.slepric}" pattern="#,###"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-unit-price__sale">
|
||||
<span class="percent"><c:out value = "${goodsOpt.slePercent}"/>%</span>
|
||||
<span class="percent"><c:out value = "${item.slePercent}"/>%</span>
|
||||
</div>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</div>
|
||||
<span class="product-unit-price__monthly-payment"><c:out value = "${item.srtDc}"/></span>
|
||||
</div>
|
||||
<div class="product-unit-rating">
|
||||
<i class="icon icon_rating-star"></i>
|
||||
<c:forEach var = "evlInfo" items="${goodsList.goodsRvwEvlList}">
|
||||
<c:if test = "${evlInfo.goodsInnb eq item.goodsInnb}">
|
||||
<span class="product-unit-rating__score"><c:out value = "${evlInfo.avgEvlScore}"/>${goodsOpt.goodInnb}</span>
|
||||
<span class="product-unit-rating__count">(<fmt:formatNumber value="${evlInfo.cntBbsctt}" pattern="#,###"/>)</span>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
<span class="product-unit-rating__score"><c:out value = "${item.avgEvlScore}"/></span>
|
||||
<span class="product-unit-rating__count">(<fmt:formatNumber value="${item.cntBbsctt}" pattern="#,###"/>)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</div>
|
||||
<c:if test="${fn:length(goodsList) gt 4}">
|
||||
<div class="four-row-slick__btn-container">
|
||||
<button class="four-row-slick__prev">
|
||||
<button class="relate-goods-slick__prev">
|
||||
<i class="icon icon_prev02"></i>
|
||||
<span class="visually-hidden">이전</span>
|
||||
</button>
|
||||
<button class="four-row-slick__next">
|
||||
<button class="relate-goods-slick__next">
|
||||
<i class="icon icon_next02"></i>
|
||||
<span class="visually-hidden">다음</span>
|
||||
</button>
|
||||
</div>
|
||||
</c:if>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1413,7 +1413,7 @@
|
||||
</c:if>
|
||||
<%-------------------------------%>
|
||||
<%--연관상품영역--%>
|
||||
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList.relateInfoList}">
|
||||
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList}">
|
||||
<section class="main-section main-section__category-type">
|
||||
<div class="main-section-header">
|
||||
<div class="main-section-title">
|
||||
@@ -1423,9 +1423,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-list-vertical-twoAndaHalf">
|
||||
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
|
||||
<div class="swiper ${fn:length(goodsList) gt 4 ? 'product-list-vertical-twoAndaHalf__swiper' : ''}">
|
||||
<div class="swiper-wrapper">
|
||||
<c:forEach var = "item" items="${goodsList.relateInfoList}">
|
||||
<c:forEach var = "item" items="${goodsList}">
|
||||
<c:if test = "${not empty item.goodsInnb}">
|
||||
<div class="swiper-slide">
|
||||
<div class="product-unit">
|
||||
@@ -1442,17 +1442,13 @@
|
||||
</c:choose>
|
||||
</div>
|
||||
</c:if>
|
||||
<c:forEach var="img" items="${goodsList.relateImgList}">
|
||||
<c:if test="${item.goodsInnb eq img.goodsInnb}">
|
||||
<a style="cursor:pointer" loading="lazy"
|
||||
onclick = "fn_move_goods_dtl(<c:out value="${item.goodsInnb}"/>)">
|
||||
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
||||
<img src="<c:out value = "${cdnurl}${img.img}"/>"
|
||||
<img src="<c:out value = "${cdnurl}${item.img}"/>"
|
||||
onerror="this.src='/pc/images/image_placeholder.png'"
|
||||
alt="해당 이미지에 대한 설명">
|
||||
</a>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</div>
|
||||
<div class="product-unit-info">
|
||||
<c:set var="iconString" value="${item.goodsIconCd}" />
|
||||
@@ -1481,32 +1477,24 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="product-unit-price">
|
||||
<c:forEach var="goodsOpt" items="${goodsList.relateGoodsOptList}">
|
||||
<c:if test="${item.goodsInnb eq goodsOpt.goodsInnb && goodsOpt.stdrDvAt eq 'Y'}">
|
||||
<div class="product-unit-price__price">
|
||||
<span class="product-unit-price__original">
|
||||
<fmt:formatNumber value="${goodsOpt.cnsmrpric}" pattern="#,###"/>
|
||||
<fmt:formatNumber value="${item.cnsmrpric}" pattern="#,###"/>
|
||||
</span>
|
||||
<span class="product-unit-price__current">
|
||||
<fmt:formatNumber value="${goodsOpt.slepric}" pattern="#,###"/>
|
||||
<fmt:formatNumber value="${item.slepric}" pattern="#,###"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-unit-price__sale">
|
||||
<span class="percent"><c:out value = "${goodsOpt.slePercent}"/>%</span>
|
||||
<span class="percent"><c:out value = "${item.slePercent}"/>%</span>
|
||||
</div>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</div>
|
||||
<span class="product-unit-price__monthly-payment"><c:out value = "${item.srtDc}"/></span>
|
||||
</div>
|
||||
<div class="product-unit-rating">
|
||||
<i class="icon icon_rating-star"></i>
|
||||
<c:forEach var = "evlInfo" items="${goodsList.goodsRvwEvlList}">
|
||||
<c:if test = "${evlInfo.goodsInnb eq item.goodsInnb}">
|
||||
<span class="product-unit-rating__score"><c:out value = "${evlInfo.avgEvlScore}"/>${goodsOpt.goodInnb}</span>
|
||||
<span class="product-unit-rating__count">(<fmt:formatNumber value="${evlInfo.cntBbsctt}" pattern="#,###"/>)</span>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
<span class="product-unit-rating__score"><c:out value = "${item.avgEvlScore}"/></span>
|
||||
<span class="product-unit-rating__count">(<fmt:formatNumber value="${item.cntBbsctt}" pattern="#,###"/>)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user