Spring [쇼핑몰프로젝트] - 장바구니 구현[28]

 

 

 

오늘은 장바구니 기능 구현에 대한 다섯번째 포스팅을 해보겠습니다 ╰(*°▽°*)╯5

 

 

구현 순서

 

0. 추합

1. 수량버튼

2. 장바구니 추가 버튼

3. 테스트

 

 

1. 수량버튼

 

일부 CSS 및 JSP 부분은 ChatGPT의 도움을 받아서 제작하였습니다.

 

하지만 이해하기 어려운 부분이 있어 일부 수정을 하였습니다.

productDetail.jsp 부분에서 장바구니 수량 변경에 대한 코드를 작성해 줍니다.

 

<!-- 장바구니 수량 변경.유미 -->
<input type="text" class="quantity_input" value="1">
<span>
	<button class="plus_btn">+</button>
	<button class="minus_btn">-</button>
</span>

 

 

 

jsp 하단에 script 태그를 추가해 줍니다.

수량 버튼 조작을 위한 코드를 작성해 줍니다.

plus_btn 버튼을 클릭시 quantity_input의 값이 증가가 되고,

minus_btn 버튼을 클릭시 quantity_input 수량이 감소 되도록 구현해 줍니다.

최소 수량이 1이 되어야 하기 때문에 if문을 사용하여 quantity_input 값이 0이하가 될 수 없도록 해주었습니다.

 

<script>

	//수량 버튼 조작
	let quantity = $(".quantity_input").val();
	
	$(".plus_btn").on("click", function(){
		$(".quantity_input").val(++quantity);
	});
	$(".minus_btn").on("click", function(){
			if(quantity > 1){
				$(".quantity_input").val(--quantity);
			}
	});

</script>

 

 

 

테스트 ↓↓↓ 

 

 

2. 장바구니 추가 버튼

 

장바구니 앞에 class명을 btn_cart로 설정해 줍니다.

 

<button type="button" class="btn_cart">장바구니</button>

 

jsp 하단의 스크립트에 추가해 줍니다.

amount는 사용자가 수량을 결정하기 전까지 값이 확정되지 않기 때문에 빈 값으로 두었습니다.

 

	//서버로 전송할 데이터
	const form = {
			memberId : '${member.memberId}',
			product_num : '${vo.product_num}',
			amount : ''
	}

 

장바구니 추가 버튼을 누르면 작동이 되도록 메서드를 추가해줍니다.

amount 값이 확정 났기 때문에 먼저 서버로 전송해 줍니다. 

장바구니 추가를 위해 ajax 코드를 추가해 줍니다.

success에는 각 상황에 맞는 alert 창이 뜨도록 else-if문을 작성해 주었습니다.

 

	//장바구니 추가 버튼
 	$(".btn_cart").on("click", function(e){
		form.amount = $("quantity_input").val();
		$.ajax({
			url : "/cart/add",
			type : "POST",
			success : function(result){
					cartAlert(result);	
			}
		});
	});
	
	function cartAlert(result){
		if(result == '0'){
			alert("장바구니에 추가 하지 못하였습니다.");
		}else if(result == '1'){
			alert("장바구니에 추가되었습니다.");
		}else if(result == '2'){
			alert("장바구니에 이미 추가되었습니다.");
		}else if(result == '5'){
			alert("로그인이 필요합니다.");
		}
	}

 

 

 

3. 테스트

 

로그인 하지 않고 장바구니 버튼 클릭시 ↓↓↓

 

 

 

 

로그인 하지 않고 장바구니 클릭시 alert 창이 정상적으로 뜨지만, 로그인을 한 후 장바구니 클릭시 데이터의 값이 넘어오지 않는 오류가 발생했습니다. 다음 포스팅에는 오류를 정상적으로 잡는 시간을 가지도록 하겠습니다... (´。＿。｀) ....

 

 

 

 

 

 

 

 

 

 

 

 

이상입니당 <(＿　＿)>

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍