[Spring][쇼핑몰 프로젝트][52] 메인페이지 평점 순 상품 노출(뷰 처리)
https://kimvampa.tistory.com/304
This commit is contained in:
SeoJin Kim
@@ -134,6 +134,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="ls_wrap">
|
||||||
|
<div class="ls_div_subject">
|
||||||
|
평점순 상품
|
||||||
|
</div>
|
||||||
|
<div class="ls_div">
|
||||||
|
<c:forEach items="${ls}" var="ls">
|
||||||
|
<a href="/goodsDetail/${ls.bookId}">
|
||||||
|
<div class="ls_div_content_wrap">
|
||||||
|
<div class="ls_div_content">
|
||||||
|
<div class="image_wrap" data-bookid="${ls.imageList[0].bookId}" data-path="${ls.imageList[0].uploadPath}" data-uuid="${ls.imageList[0].uuid}" data-filename="${ls.imageList[0].fileName}">
|
||||||
|
<img>
|
||||||
|
</div>
|
||||||
|
<div class="ls_category">
|
||||||
|
${ls.cateName}
|
||||||
|
</div>
|
||||||
|
<div class="ls_rating">
|
||||||
|
${ls.ratingAvg}
|
||||||
|
</div>
|
||||||
|
<div class="ls_bookName">
|
||||||
|
${ls.bookName}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer 영역 -->
|
<!-- Footer 영역 -->
|
||||||
@@ -189,6 +217,33 @@
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$(".ls_div").slick({
|
||||||
|
slidesToShow: 4,
|
||||||
|
slidesToScroll: 4,
|
||||||
|
prevArrow : "<button type='button' class='ls_div_content_prev'>이전</button>", // 이전 화살표 모양 설정
|
||||||
|
nextArrow : "<button type='button' class='ls_div_content_next'>다음</button>", // 다음 화살표 모양 설정
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 이미지 삽입 */
|
||||||
|
$(".image_wrap").each(function(i, obj){
|
||||||
|
|
||||||
|
const bobj = $(obj);
|
||||||
|
|
||||||
|
if(bobj.data("bookid")){
|
||||||
|
const uploadPath = bobj.data("path");
|
||||||
|
const uuid = bobj.data("uuid");
|
||||||
|
const fileName = bobj.data("filename");
|
||||||
|
|
||||||
|
const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
|
||||||
|
|
||||||
|
$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
|
||||||
|
} else {
|
||||||
|
$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -308,4 +308,71 @@ a{
|
|||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 상품 평점순 노출 관련 태그 */
|
||||||
|
.ls_wrap{
|
||||||
|
margin: 30px 0 30px 0;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
.ls_div_content{
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
height: 275px;
|
||||||
|
border: 1px solid #dadada;
|
||||||
|
}
|
||||||
|
.image_wrap{
|
||||||
|
width: 80%;
|
||||||
|
height: 60%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 5% 0 5% 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ls_category{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #3e74ab;
|
||||||
|
}
|
||||||
|
.ls_rating{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #e15b6e;
|
||||||
|
}
|
||||||
|
.ls_bookName{
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.ls_div_subject{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 26px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.ls_div_content_prev{
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
left: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 35%;
|
||||||
|
}
|
||||||
|
.ls_div_content_prev:hover{
|
||||||
|
opacity: 80%;
|
||||||
|
}
|
||||||
|
.ls_div_content_next{
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
right: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 35%;
|
||||||
|
}
|
||||||
|
.ls_div_content_next:hover{
|
||||||
|
opacity: 80%;
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
#Generated by Maven Integration for Eclipse
|
#Generated by Maven Integration for Eclipse
|
||||||
#Mon Feb 07 20:50:26 KST 2022
|
#Tue Feb 22 01:43:37 KST 2022
|
||||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
|
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
|
||||||
m2e.projectName=VamPa
|
m2e.projectName=VamPa
|
||||||
groupId=com.vam
|
groupId=com.vam
|
||||||
|
|||||||
@@ -134,6 +134,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="ls_wrap">
|
||||||
|
<div class="ls_div_subject">
|
||||||
|
평점순 상품
|
||||||
|
</div>
|
||||||
|
<div class="ls_div">
|
||||||
|
<c:forEach items="${ls}" var="ls">
|
||||||
|
<a href="/goodsDetail/${ls.bookId}">
|
||||||
|
<div class="ls_div_content_wrap">
|
||||||
|
<div class="ls_div_content">
|
||||||
|
<div class="image_wrap" data-bookid="${ls.imageList[0].bookId}" data-path="${ls.imageList[0].uploadPath}" data-uuid="${ls.imageList[0].uuid}" data-filename="${ls.imageList[0].fileName}">
|
||||||
|
<img>
|
||||||
|
</div>
|
||||||
|
<div class="ls_category">
|
||||||
|
${ls.cateName}
|
||||||
|
</div>
|
||||||
|
<div class="ls_rating">
|
||||||
|
${ls.ratingAvg}
|
||||||
|
</div>
|
||||||
|
<div class="ls_bookName">
|
||||||
|
${ls.bookName}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer 영역 -->
|
<!-- Footer 영역 -->
|
||||||
@@ -189,6 +217,33 @@
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$(".ls_div").slick({
|
||||||
|
slidesToShow: 4,
|
||||||
|
slidesToScroll: 4,
|
||||||
|
prevArrow : "<button type='button' class='ls_div_content_prev'>이전</button>", // 이전 화살표 모양 설정
|
||||||
|
nextArrow : "<button type='button' class='ls_div_content_next'>다음</button>", // 다음 화살표 모양 설정
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 이미지 삽입 */
|
||||||
|
$(".image_wrap").each(function(i, obj){
|
||||||
|
|
||||||
|
const bobj = $(obj);
|
||||||
|
|
||||||
|
if(bobj.data("bookid")){
|
||||||
|
const uploadPath = bobj.data("path");
|
||||||
|
const uuid = bobj.data("uuid");
|
||||||
|
const fileName = bobj.data("filename");
|
||||||
|
|
||||||
|
const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
|
||||||
|
|
||||||
|
$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
|
||||||
|
} else {
|
||||||
|
$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -308,4 +308,71 @@ a{
|
|||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 상품 평점순 노출 관련 태그 */
|
||||||
|
.ls_wrap{
|
||||||
|
margin: 30px 0 30px 0;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
.ls_div_content{
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
height: 275px;
|
||||||
|
border: 1px solid #dadada;
|
||||||
|
}
|
||||||
|
.image_wrap{
|
||||||
|
width: 80%;
|
||||||
|
height: 60%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 5% 0 5% 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ls_category{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #3e74ab;
|
||||||
|
}
|
||||||
|
.ls_rating{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #e15b6e;
|
||||||
|
}
|
||||||
|
.ls_bookName{
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.ls_div_subject{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 26px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.ls_div_content_prev{
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
left: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 35%;
|
||||||
|
}
|
||||||
|
.ls_div_content_prev:hover{
|
||||||
|
opacity: 80%;
|
||||||
|
}
|
||||||
|
.ls_div_content_next{
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
right: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 35%;
|
||||||
|
}
|
||||||
|
.ls_div_content_next:hover{
|
||||||
|
opacity: 80%;
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
#Generated by Maven Integration for Eclipse
|
#Generated by Maven Integration for Eclipse
|
||||||
#Mon Feb 07 20:50:27 KST 2022
|
#Tue Feb 22 01:43:38 KST 2022
|
||||||
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
|
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
|
||||||
m2e.projectName=VamPa_MySQL
|
m2e.projectName=VamPa_MySQL
|
||||||
groupId=com.vam
|
groupId=com.vam
|
||||||
|
|||||||
Reference in New Issue
Block a user