| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- spring 프로젝트
- 정규표현식
- oracle 설치방법
- 스프링 메일 전송
- 쇼핑몰 포트폴리오
- 스프링 프로젝트 설정
- 스프링 이미지
- 삭제 구현
- Bcrypt
- 파일 업로드
- 스프링 포트폴리오
- 로그아웃 기능 구현
- BCrypt 적용
- arraylist
- 스프링 프로젝트 기본 설정
- 스프링 게시판 구현
- 이미지 출력
- 회원가입 기능
- 쇼핑몰 프로젝트
- 로그인 기능
- spring 쇼핑몰
- 스프링 파일 삭제
- 스프링 업로드
- 스프링 쇼핑몰
- 스프링 프로젝트
- ResponseEntity
- 스프링 쇼핑몰 프로젝트
- 스프링 HikariCP
- 스프링 게시판
- 인증번호 전송
Archives
- Today
- Total
Kim VamPa
[Spring][쇼핑몰 프로젝트][37] 장바구니 기능(장바구니 페이지) -2 본문
728x90
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188
목표
장바구니 페이지 구현
저번 포스팅에 이어서 장바구니 페이지 구현을 목표로 합니다. 그중 기본적인 정보 출력과 종합정보 출력을 목표로 합니다.
순서
1. 기본 정보 출력(cart.jsp)
2. 종합 정보 출력(cart.jsp)
1. 기본 정보 출력(cart.jsp)
앞서 관리자페이지, search.jsp, goodsDetail.jsp 에서의 기본적인 정보 출력과 동일합니다.
1) 기본 틀 작성
cart.jsp
상품 상세피이지(goodsDetail.jsp) 때와 같이 '상품 검색 페이지(search.jsp)'의 큰 틀을 그대로 사용할 것이기 때문에 search.jsp의 코드를 복사하여 cart.jsp에 복사한 코드를 붙여 넣습니다.
content_area <div> 태그 내부에 있는 모든 코드를 지워주고 <script> 태그 내부에 있는 Js 코드도 모두 지워줍니다.
goodsDetail.jsp의 <head> 태그 부분에 css 연결 코드를 "cart.css"와 연결이 되도록 수정을 해주었습니다.
cart.jsp 코드
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome BookMall</title>
<link rel="stylesheet" href="/resources/css/cart.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="wrap">
<div class="top_gnb_area">
<ul class="list">
<c:if test = "${member == null}"> <!-- 로그인 x -->
<li >
<a href="/member/login">로그인</a>
</li>
<li>
<a href="/member/join">회원가입</a>
</li>
</c:if>
<c:if test="${member != null }"> <!-- 로그인 o -->
<c:if test="${member.adminCk == 1 }"> <!-- 관리자 계정 -->
<li><a href="/admin/main">관리자 페이지</a></li>
</c:if>
<li>
<a id="gnb_logout_button">로그아웃</a>
</li>
<li>
마이룸
</li>
<li>
<a href="/cart/${member.memberId}">장바구니</a>
</li>
</c:if>
<li>
고객센터
</li>
</ul>
</div>
<div class="top_area">
<!-- 로고영역 -->
<div class="logo_area">
<a href="/main"><img src="/resources/img/mLogo.png"></a>
</div>
<div class="search_area">
<div class="search_wrap">
<form id="searchForm" action="/search" method="get">
<div class="search_input">
<select name="type">
<option value="T">책 제목</option>
<option value="A">작가</option>
</select>
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
<button class='btn search_btn'>검 색</button>
</div>
</form>
</div>
</div>
<div class="login_area">
<!-- 로그인 하지 않은 상태 -->
<c:if test = "${member == null }">
<div class="login_button"><a href="/member/login">로그인</a></div>
<span><a href="/member/join">회원가입</a></span>
</c:if>
<!-- 로그인한 상태 -->
<c:if test="${ member != null }">
<div class="login_success_area">
<span>회원 : ${member.memberName}</span>
<span>충전금액 : <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/></span>
<span>포인트 : <fmt:formatNumber value="${member.point }" pattern="#,###" /></span>
<a href="/member/logout.do">로그아웃</a>
</div>
</c:if>
</div>
<div class="clearfix"></div>
</div>
<div class="content_area">
</div>
<!-- Footer 영역 -->
<div class="footer_nav">
<div class="footer_nav_container">
<ul>
<li>회사소개</li>
<span class="line">|</span>
<li>이용약관</li>
<span class="line">|</span>
<li>고객센터</li>
<span class="line">|</span>
<li>광고문의</li>
<span class="line">|</span>
<li>채용정보</li>
<span class="line">|</span>
</ul>
</div>
</div> <!-- class="footer_nav" -->
<div class="footer">
<div class="footer_container">
<div class="footer_left">
<img src="/resources/img/Logo.png">
</div>
<div class="footer_right">
(주) VamBook 대표이사 : OOO
<br>
사업자등록번호 : ooo-oo-ooooo
<br>
대표전화 : oooo-oooo(발신자 부담전화)
<br>
<br>
COPYRIGHT(C) <strong>kimvampa.tistory.com</strong> ALL RIGHTS RESERVED.
</div>
<div class="clearfix"></div>
</div>
</div> <!-- class="footer" -->
</div> <!-- class="wrap" -->
</div> <!-- class="wrapper" -->
<script>
</script>
</body>
</html>
cart.css
resources/css 디렉토리에 cart.css 파일을 생성해줍니다.
생성한 파일에 search.css 파일의 코드를 모두 복사 붙여 넣기 한 후 content_area<div> 태그 내부에 있는 모든 선택자 css 코드는 제거해주었습니다.
css 코드
더보기
@charset "UTF-8";
*{
margin: 0;
padding:0;
}
a{
text-decoration: none;
}
/* 화면 전체 렙 */
.wrapper{
width: 100%;
}
/* content 랩 */
.wrap{
width : 1080px;
margin: auto;
}
/* 홈페이지 기능 네비 */
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #f0f0f1;
position:relative;
}
.top_gnb_area .list{
position: absolute;
top: 0px;
right: 0;
}
.top_gnb_area .list li{
list-style: none;
float : left;
padding: 13px 15px 0 10px;
font-weight: 900;
cursor: pointer;
}
/* 로고, 검색, 로그인 */
.top_area{
width: 100%;
height: 150px;
/* background-color: #f7f0b9; */
}
/* 로고 영역 */
.logo_area{
width: 25%;
height: 100%;
float:left;
}
.logo_area img{
width: 100%;
height: 100%;
}
/* 검색 박스 영역 */
.search_area{
width: 50%;
height: 100%;
float:left;
}
.search_wrap{
width: 100%;
height: 100%;
}
#searchForm{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search_input{
display: flex;
height: 30%;
width: 80%;
}
.search_input select{
width: 20%;
text-align: center;
font-size: 15px;
}
.search_input input{
margin-left: 10px;
width: 57%;
font-size: 18px;
padding-left: 2%;
}
.search_btn{
margin-left: 10px;
width: 17%;
border-radius: 14px;
font-size: 17px;
font-weight: 600;
}
/* 로그인 버튼 영역 */
.login_area{
width: 25%;
height: 100%;
display: inline-block;
text-align: center;
}
.login_button{
height: 50%;
background-color: #D4DFE6;
margin-top: 30px;
line-height: 77px;
font-size: 40px;
font-weight: 900;
border-radius: 10px;
cursor: pointer;
}
.login_area>span{
margin-top: 10px;
font-weight: 900;
display: inline-block;
}
.login_button{
height : 50%;
background-color: #D4DFE6;
margin-top:30px;
}
/* 제품 목록 네비 */
.navi_bar_area{
width: 100%;
height: 70px;
background-color: #7696fd;
}
/* 홈페이지 메인 제품 목록 */
.content_area{
width: 100%;
min-height: 1000px;
}
/* 로그인 성공 영역 */
.login_success_area{
height: 62%;
width: 80%;
border: 2px solid #7474ad;
border-radius: 15px;
margin: 5% auto;
padding-top: 5%;
}
.login_success_area>a{
font-size: 15px;
font-weight: 900;
display: inline-block;
margin-top: 5px;
background: #e1e5e8;
width: 82px;
height: 22px;
line-height: 22px;
border-radius: 25px;
color: #606267;
}
.login_success_area>span{
display : block;
text-align: left;
margin-left: 10%;
}
/* 검색결과 없음 */
.table_empty{
height: 50px;
text-align: center;
margin: 200px 0 215px 0px;
font-size: 25px;
}
/* 필터정보 */
.search_filter {
width: 85%;
margin: auto;
margin-top: 30px;
margin-bottom: 50px;
}
.filter_button_wrap {
width: 100%;
}
.filter_button_wrap button {
width: 50%;
}
.filter_button{
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.filter_button_wrap:after {
content: "";
clear: both;
display: table;
}
.filter_button_wrap button:not(:last-child) {
border-right: none;
}
.filter_button:hover {
background-color: #3e8e41;
}
.filter_active{
background-color: #045d3c;
}
.filter_content{
padding:20px 50px 20px 50px;
border: 1px solid gray;
}
.filter_content a:not(:first-child){
margin-left: 10px;
}
.filter_a{
display: block;
}
.filter_b{
display: none;
}
/* footer navai 영역 */
.footer_nav{
width:100%;
height:50px;
}
.footer_nav_container{
width: 100%;
height: 100%;
background-color:#8EC0E4;
}
.footer_nav_container>ul{
font-weight : bold;
float:left;
list-style:none;
position:relative;
padding-top:10px;
line-height: 27px;
font-family: dotum;
margin-left: 10px;
}
.footer_nav_container>ul>li{
display:inline;
width: 45px;
height: 19px;
padding: 10px 9px 0 10px;
}
.footer_nav_container>ul>span{
margin: 0 4px;
}
/* footer 영역 */
.footer{
width:100%;
height:130px;
background-color:#D4DFE6;
padding-bottom : 50px;
}
.footer_container{
width: 100%;
height: 100%;
margin: auto;
}
.footer_left>img {
width: 150%;
height: 130px;
margin-left: -20px;
margin-top: -12px;
}
.footer_left{
float :left;
width: 170px;
margin-left: 20px;
margin-top : 30px;
}
.footer_right{
float :left;
width: 680px;
margin-left: 70px;
margin-top : 30px;
}
/* float 속성 해제 */
.clearfix{
clear: both;
}
2) 기본정보 출력
content_area<div>태그 내부에 서버로부터 전달받은 기본정보(cartInfo)를 출력하기 위해 아래의 코드를 추가해주었습니다.
코드
더보기
<div class="content_subject"><span>장바구니</span></div>
<!-- 장바구니 리스트 -->
<div class="content_middle_section"></div>
<!-- 장바구니 가격 합계 -->
<!-- cartInfo -->
<div class="content_totalCount_section">
<table class="subject_table">
<caption>표 제목 부분</caption>
<tbody>
<tr>
<th class="td_width_1"></th>
<th class="td_width_2"></th>
<th class="td_width_3">상품명</th>
<th class="td_width_4">가격</th>
<th class="td_width_4">수량</th>
<th class="td_width_4">합계</th>
<th class="td_width_4">삭제</th>
</tr>
</tbody>
</table>
<table class="cart_table">
<caption>표 내용 부분</caption>
<tbody>
<c:forEach items="${cartInfo}" var="ci">
<tr>
<td class="td_width_1"></td>
<td class="td_width_2"></td>
<td class="td_width_3">${ci.bookName}</td>
<td class="td_width_4 price_td">
<del>정가 : <fmt:formatNumber value="${ci.bookPrice}" pattern="#,### 원" /></del><br>
판매가 : <span class="red_color"><fmt:formatNumber value="${ci.salePrice}" pattern="#,### 원" /></span><br>
마일리지 : <span class="green_color"><fmt:formatNumber value="${ci.point}" pattern="#,###" /></span>
</td>
<td class="td_width_4 table_text_align_center">
<div class="table_text_align_center quantity_div">
<input type="text" value="${ci.bookCount}" class="quantity_input">
<button class="quantity_btn plus_btn">+</button>
<button class="quantity_btn minus_btn">-</button>
</div>
<a class="quantity_modify_btn">변경</a>
</td>
<td class="td_width_4 table_text_align_center">
<fmt:formatNumber value="${ci.salePrice * ci.bookCount}" pattern="#,### 원" />
</td>
<td class="td_width_4 table_text_align_center delete_btn"><button>삭제</button></td>
</tr>
</c:forEach>
</tbody>
</table>
<table class="list_table">
</table>
</div>
<!-- 가격 종합 -->
<div class="content_total_section">
<div class="total_wrap">
<table>
<tr>
<td>
<table>
<tr>
<td>총 상품 가격</td>
<td>
<span class="totalPrice_span">70000</span> 원
</td>
</tr>
<tr>
<td>배송비</td>
<td>
<span class="delivery_price">3000</span>원
</td>
</tr>
<tr>
<td>총 주문 상품수</td>
<td><span class="totalKind_span"></span>종 <span class="totalCount_span"></span>권</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="boundary_div">구분선</div>
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<strong>총 결제 예상 금액</strong>
</td>
<td>
<span class="finalTotalPrice_span">70000</span> 원
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<strong>총 적립 예상 마일리지</strong>
</td>
<td>
<span class="totalPoint_span">70000</span> 원
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<!-- 구매 버튼 영역 -->
<div class="content_btn_section">
<a>주문하기</a>
</div>
추가한 코드에 css 설정을 추가해주기 위해서 cart.css 파일에 아래의 설정 코드를 추가해주었습니다.
코드
더보기
table{
border-collapse: collapse;
width: 100%;
}
.table_text_align_center{
text-align: center;
}
caption{
visibility: hidden;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.content_subject{
height: 110px;
line-height: 110px;
background-color: #5080bd;
margin-bottom: 60px;
}
.content_subject span{
padding-left: 30 px;
display: inline-block;
color: white;
font-size: 50px;
font-weight: bolder;
}
.content_totalCount_section{
margin-bottom: 12px;
}
.content_btn_section{
margin-top: 20px;
text-align: right;
}
.content_btn_section a{
color: #fefeff;
background-color: #365fdd;
min-width: 125px;
padding: 17px 25px;
display: inline-block;
height: 39px;
font-size: 23px;
font-weight: bold;
text-align: center;
margin-right: 14px;
line-height: 39px;
}
.subject_table{
font-size: 14px;
line-height: 20px;
width: 100%;
text-align: center;
}
th{
text-align: center;
color: #333;
border-bottom: 1px solid #e7e7e7;
border-top: 1px solid #3084d9;
background: #f4f9fd;
padding: 2px 0;
}
.td_width_1{
width: 5%;
}
.td_width_2{
width: 10%;
}
.td_width_3{
width: 25%;
}
.td_width_4{
width: 15%;
}
.cart_table{
font-size: 14px;
line-height: 20px;
}
.cart_table tr{
height: 110px;
}
.price_td{
padding-left: 5px;
}
.red_color{
color : red;
}
.green_color{
color : green;
}
.cart_table td{
border-bottom: 1px solid #e7e7e7;
}
.quantity_div{
position: relative;
width: 42px;
height: 25px;
text-align: left;
margin: 5px auto;
}
.quantity_input{
position: absolute;
width: 27px;
height: 23px;
text-align: center;
border: 1px solid #c6c6c6;
border-right: 0px;
line-height: 19px;
font-size: 12px;
color: #4c4848;
left: 0;
}
.quantity_btn{
position: absolute;
border: 1px solid #aaa;
color: #3a60df;
width: 14px;
height: 13px;
padding: 0px;
background-color: #fff;
font-weight: bold;
font-size: 7px;
line-height: 6px;
vertical-align: middle;
}
.plus_btn{
top: 0;
right: 0
}
.minus_btn{
bottom: 0;
right: 0
}
.quantity_modify_btn{
border: 1px solid #d0d0d0;
height: 13px;
line-height: 13px;
background-color: #fff;
text-align: center;
width: 28px;
display: inline-block;
padding: 3px 6px 2px;
margin-top: 3px;
}
.table_text_align_center{
text-align: center;
}
.delete_btn{
width: 40px;
}
.content_total_section{
background-color: rgb(227, 237, 247);
}
.total_wrap{
width: 80%;
margin: auto;
padding: 10px 0 10px 0;
}
.total_wrap td{
width : 50%;
}
.finalTotalPrice_span{
color: #854A72;
font-size: 17px;
font-weight: bold;
}
.totalPoint_span{
font-size: 17px;
font-weight: bold;
}
.boundary_div{
font-size: 0;
border: 1px dotted #d1c7c7;
margin: 5px 0 5px 0;
}
종합 정보 섹션(화면 연한 파란색 부분)의 숫자는 아무 의미 없는 더미(dummy) 값을 넣어두었습니다. 아래는 결과입니다.
2. 종합 정보 출력(cart.jsp)
개요
종합 정보 섹션에 정보를 만들어내서 삽입할 것입니다. 만들어내야 할 정보는 아래와 같습니다.
- 총 가격 : 각 상품의 '할인가격 * 상품수'를 모두 더한 값입니다.
- 총 개수 : 모든 상품의 수입니다.
- 총 종류 : 장바구니에 있는 상품의 종류입니다.
- 총 마일리지 : 총가격에 따라 받을 수 있는 마일리지입니다.
- 배송비 : "총 가격"에 따라 부여되는 배송비입니다. ( "총 가격"이 30,000원 이상일 경우 '0원', 미만일 경우는 '3000원' 부과)
- 최종 가격 : (총 가격 + 배송비)
※ 마일리지, 배송비 정보 등 은 '뷰'에서 만들어낼 것이지만, 이 정보를 서버에서 그대로 활용하지는 않고 서버에서 자체적으로 다시 만들어서 정보를 활용할 것입니다.
준비
각 상품의 가격 관련 정보('상품 가격', '상품 수' 등) 값을 가져와서 Javascript 코드를 통해 '가격 종합 정보(6가지 정보)'로 가공한 뒤 '종합 정보 섹션'에 가공한 정보를 삽입해줄 것입니다. 따라서 Javascript코드에서 가공해야 할 대상 정보들이 존재해야 하는데 이를 위해서 <input> 태그를 추가하여 각 상품에 대한 정보를 저장해주겠습니다.
<c:forEach>태그 내부의 첫 <td> 태그에는 "체크 박스"를 추가할 예정인데, 해당 <td>태그 내부에 상품 관련 정보를 저장 시키겠습니다. <td>태그 내부에 'hidden' 타입의 <input> 태그를 추가합니다.
<input type="hidden" class="individual_bookPrice_input" value="${ci.bookPrice}">
<input type="hidden" class="individual_salePrice_input" value="${ci.salePrice}">
<input type="hidden" class="individual_bookCount_input" value="${ci.bookCount}">
<input type="hidden" class="individual_totalPrice_input" value="${ci.salePrice * ci.bookCount}">
<input type="hidden" class="individual_point_input" value="${ci.point}">
<input type="hidden" class="individual_totalPoint_input" value="${ci.totalPoint}">
페이지로 이동해보시면 각 상품의 <td>태그 내부에 '상품 관련 정보'가 저장된 것을 볼 수 있습니다.
추가한 <input> 태그에 쉽게 접근하기 위해서 <input> 태그가 작성된 <td> 태그의 class 속성에 'cart_info_td' 값을 추가해줍니다.
구현
사용자가 화면에 이동했을 때 바로 데이터를 볼 수 있어야 하기 때문에 $(document).read(function(){}) 메서드를 추가하여 구현부에서 작업을 진행하겠습니다.
$(document).ready(function(){
});
먼저 우리가 만들어내야 할 데이터들을 담아낼 변수를 선언하고 0으로 초기화하였습니다.
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
이제 이 값들을 구해야 할 차례인데 구하는 컨셉은 모든 각 상품의 정보를 순회하여 더하는 식으로 값들을 구할 것입니다. 따라서 각 상품들의 정보에 어떻게 접근할 것이며, 순회할 것인지가 문제입니다.
두 가지 문제를 풀 방식은 다음과 같습니다. 접근은 "cart_info_td" 식별자를 통해 <td> 태그에 접근하여 제이쿼리의 "find()" 메서드를 통해 정보가 저장된 <input>태그에 접근 할 것입니다. 순회는 "cart_info_td"로 <td>태그에 접근 할 경우 같은이름의 식별자를 가진 <td>태그 객체가 장바구니 상품 수만큼 존재하게 되는데 제이쿼리의 "each(index, element)" 메서드를 통해서 객체의 수만큼 순회할 수 있습니다. (순수 javascript의 경우 foreach로 해결)
※ Javascript의 객체애 대한 이해(+객체의 접근 방법)에 대해 알고 계신다면 이해가 쉽습니다.
( 모던 자바스크립트 객체 https://ko.javascript.info/object)
※ idnex는 순회하는 객체의 인덱스입니다. (배열의 idnex와 동일하게 생각하면 됩니다.)
※ element는 순회 대상의 각 객체를 의미합니다.
※ Jquery elemt 공식 문서 https://api.jquery.com/each/
※ Jquery find 공식 문서 https://api.jquery.com/find/
"cart_info_td" <td> 태그를 순회하는 코드를 작성합니다.
/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
$(".cart_info_td").each(function(index, element){
// 총 가격
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
// 총 갯수
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
// 총 종류
totalKind += 1;
// 총 마일리지
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
});
추가한 코드 구현부에 순회하며 종합 정보('총 가격', '총 개수', '총 종류', '총 마일리지')를 계산해내는 로직을 추가하였습니다. 앞서 말한 바와 같이 각 <td> 태그 내부에 잇는 <input> 태그 정보에 접근하기 위해 제이쿼리의 "find('식별자')"를 사용하였습니다.
추가한 코드 중 한 줄을 해석하면 다음과 같습니다.
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());접근한 <td> 객체에 있는 'individual_totalPrice_input' <input> 태그에 값을 totalPrice 변수의 값에 더해줍니다.
모든 상품 <td> 객체를 순회하게 되면 totalPrice는 모든 상품의 가격이 더해져서 '총 상품 가격'이 구해지게 됩니다.
※parseInt() 메서드를 사용한 이유는 <input> 태그의 값을 얻어오면 그 값은 'string' 타입으로 인식이 되어서 이를 int 타입으로 변경해주기 위함입니다.
이번엔 '배송비'와 '최종 가격'을 구할 차례입니다. 이 두 개의 값은 '총 상품 가격'을 구해야지만 구할 수 있는 값들이기 때문에 위의 순회 로직엔 추가되지 않았습니다.
' 최종 가격'은 '배송비 + 총 가격'이기 때문에 먼저 '배송비'부터 구하겠습니다. if 문을 통해서 30,000원 이상일 경우 0원, 미만일 경우 3,000원의 값을 세팅하도록 로직을 추가합니다.
/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
$(".cart_info_td").each(function(index, element){
// 총 가격
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
// 총 갯수
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
// 총 종류
totalKind += 1;
// 총 마일리지
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
});
/* 배송비 결정 */
if(totalPrice >= 30000){
deliveryPrice = 0;
} else if(totalPrice == 0){
deliveryPrice = 0;
} else {
deliveryPrice = 3000;
}
'최종 가격' 값을 얻는 코드를 추가합니다.
/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
$(".cart_info_td").each(function(index, element){
// 총 가격
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
// 총 갯수
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
// 총 종류
totalKind += 1;
// 총 마일리지
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
});
/* 배송비 결정 */
if(totalPrice >= 30000){
deliveryPrice = 0;
} else if(totalPrice == 0){
deliveryPrice = 0;
} else {
deliveryPrice = 3000;
}
/* 최종 가격 */
finalTotalPrice = totalPrice + deliveryPrice;
이제 구한 값들을 '정합 정보 섹션'에 삽입해주는 코드를 추가해줍니다.
/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
$(".cart_info_td").each(function(index, element){
// 총 가격
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
// 총 갯수
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
// 총 종류
totalKind += 1;
// 총 마일리지
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
});
/* 배송비 결정 */
if(totalPrice >= 30000){
deliveryPrice = 0;
} else if(totalPrice == 0){
deliveryPrice = 0;
} else {
deliveryPrice = 3000;
}
/* 최종 가격 */
finalTotalPrice = totalPrice + deliveryPrice;
/* 값 삽입 */
// 총 가격
$(".totalPrice_span").text(totalPrice);
// 총 갯수
$(".totalCount_span").text(totalCount);
// 총 종류
$(".totalKind_span").text(totalKind);
// 총 마일리지
$(".totalPoint_span").text(totalPoint);
// 배송비
$(".delivery_price").text(deliveryPrice);
// 최종 가격(총 가격 + 배송비)
$(".finalTotalPrice_span").text(finalTotalPrice);
이상태로 출력을 하게 되면 총 가격, 총 마일리지, 최종 가격은 통화 형식(#,###)이 아닌 일반적인 숫자 형식이 출력되게 되는데, 통화 형식으로 출력될 수 있도록 대상 변수들에 toLocaleString() 메서드를 호출해줍니다.
/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0; // 총 가격
let totalCount = 0; // 총 갯수
let totalKind = 0; // 총 종류
let totalPoint = 0; // 총 마일리지
let deliveryPrice = 0; // 배송비
let finalTotalPrice = 0; // 최종 가격(총 가격 + 배송비)
$(".cart_info_td").each(function(index, element){
// 총 가격
totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
// 총 갯수
totalCount += parseInt($(element).find(".individual_bookCount_input").val());
// 총 종류
totalKind += 1;
// 총 마일리지
totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
});
/* 배송비 결정 */
if(totalPrice >= 30000){
deliveryPrice = 0;
} else if(totalPrice == 0){
deliveryPrice = 0;
} else {
deliveryPrice = 3000;
}
/* 최종 가격 */
finalTotalPrice = totalPrice + deliveryPrice;
/* 값 삽입 */
// 총 가격
$(".totalPrice_span").text(totalPrice.toLocaleString());
// 총 갯수
$(".totalCount_span").text(totalCount);
// 총 종류
$(".totalKind_span").text(totalKind);
// 총 마일리지
$(".totalPoint_span").text(totalPoint.toLocaleString());
// 배송비
$(".delivery_price").text(deliveryPrice);
// 최종 가격(총 가격 + 배송비)
$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());
페이지로 이동하여 의도대로 출력이 되는지 확인해봅니다.
REFERENCE
DATE
- 2020.11.24
728x90
반응형
'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글
| [Spring][쇼핑몰 프로젝트][37] 장바구니 기능(장바구니 페이지) -4 (0) | 2021.11.29 |
|---|---|
| [Spring][쇼핑몰 프로젝트][37] 장바구니 기능(장바구니 페이지) -3 (21) | 2021.11.25 |
| [Spring][쇼핑몰 프로젝트][37] 장바구니 기능(장바구니 페이지) -1 (10) | 2021.11.23 |
| [Spring][쇼핑몰 프로젝트][36] 장바구니 기능(장바구니 추가(뷰 구현)) - 5 (6) | 2021.11.19 |
| [Spring][쇼핑몰 프로젝트][36] 장바구니 기능(장바구니 추가(서버 구현)) - 4 (8) | 2021.11.18 |
'스프링 프레임워크/쇼핑몰 프로젝트' Related Articles
more
Comments