Spring [쇼핑몰프로젝트] - 장바구니 페이지 구현[32]

 

 

 

오늘은 장바구니 페이지 구현에 대한 일곱번째 포스팅을 해보겠습니다 ╰(*°▽°*)╯7

 

사용자가 상품을 구매할 경우, 해당 상품 별로 얼마의 포인트가 적립되는지 알 수 있도록 화면 구현을 하겠습니다. 

상품의 상세 페이지에 적립 될 포인트를 알 수 있도록 정보를 표시하고, 포인트 관련 속성을 추가 해 주겠습니다.

 

 

구현 순서

 

1. ProductController.java

2. productDetail.jsp

 

 

1. ProductController.java

 

현재 테이블의 정보는 "##,### 원" 으로 구성 되어 있습니다.

문자열은 사칙연산이 불가능 하기 때문에 정수형으로 바꾸어서 연산해 주어야 합니다.

 

 

우선, 테이블의 칼럼값이 정수형이 아닌 문자열로 되어있기 때문에 문자열을 정수형으로 받아올 수 있도록 수정해 주어야 합니다. 

ProdructController.java의 하단에 아래의 코드를 작성해 줍니다.

replace 함수를 사용하여 문자열을 공백으로 만들어 줍니다. 

replace 함수는 텍스트 문자열의 일부를 지정된 문자 수만큼 다른 텍스트 문자열로 바꿔주는 함수입니다.

컨트롤러에서 뷰로 값을 전달하기 위해 model.addAttribute도 작성해 줍니다. 

 

		// 포인트 문자열 숫자로 변환
		String integerPrice = vo.getPrice();
		integerPrice = integerPrice.replace(",", "");
		integerPrice = integerPrice.replace(" ", "");
		integerPrice = integerPrice.replace("원", "");
		
		
		System.out.println("가격 : " + Integer.parseInt(integerPrice));
		int totalIntegerPrice = Integer.parseInt(integerPrice);
		
		model.addAttribute("integerPrice", totalIntegerPrice);
	}

 

 

 

model.addAttribute란?

 

Controller에서 사용자에게 응답할 View를 생성할 때 Model을 이용해서 View에 전달하는 방법입니다.

value 객체를 name 이름으로 추가를 해주고, view에서 name으로 지정된 value를 사용합니다.

 

 

 

2. productDetail.jsp

 

상품의 상세 페이지에 사용자가 해당 상품을 구매할 경우 얼마의 포인트를 얻을 수 있는지 알 수 있도록 정보를 출력 하겠습니다.

producrDetail.jsp의 가격의 하단에 적립포인트와 받아올 값을 넣어 줍니다.

소수점을 버리기 위해 Math.floor를 사용하였습니다.

<span>태그는 나중에 css 추가를 위해 넣어주었습니다.

 

<div>
	적립 포인트 : <span>${Math.floor(integerPrice*0.05)}</span>원
</div>

 

 

 

productDetail.jsp의 하단 <script>도 수정해 줍니다.

404-406라인과 413-415라인을 추가 및 수정해 줍니다.

 

	//서버로 전송할 데이터
	const form = {
		memberId : '${member.memberId}',
		pno : '${vo.pno}',
		amount : '',
		product_name : '${vo.name}',
		product_price : '${vo.price}',
		totalPrice : '',
		integerPrice : '${integerPrice}'
		
	}
		console.log(form);	

 	//장바구니 추가 버튼
 	$(".btn_cart").on("click", function(e){
		var amount = $(".quantity_input").val();
		form.amount=amount;
		form.totalPrice = ${integerPrice}*amount;
		
		console.log(form);
	
		$.ajax({
			url : "/cart/add",
			type : "POST",
			data : form,
			success : function(result){
					cartAlert(result);	
					
			}
		});
	});

 

 

 

 

 

웹 페이지 화면 ↓↓↓

 

 

 

 

 

 

 

 

 

이상입니당 (∩^o^)⊃━☆