JSP_22-12-15_[쇼핑몰 만들기_장바구니 리스트_주문하기로 데이터 전송]

[ productDetail.jsp ]

○  변수를 선언하여 서버로 보낼 값들을 속성으로 가지는 객체를 대입

    - id : member 테이블의 회원 아이디

    - product_id : 상품 상세의 상품번호

    - ci_number : cartItem 테이블의 상품 수량, 변경가능하기 때문에 빈 값으로 두기

const form = {
		id : '${member.id}',
		product_id : '${productDetail.product_id}',
		ci_number : ''
}

 

○ 서버가 반환한 값에 따라 띄울 경고창

    - btn_cart : 장바구니 버튼

    - $(".btn_cart").on("click", function(e) : 해당 클래스 클릭했을 때 이벤트 발생

    - quantity_input : 장바구니 상품 수량 변경

    - form.ci_number = $(".quantity_input").val() : 변경된 수량 값 저장

    - cartAlert(result) : 변경 여부 및 기능 구현 확인

$(".btn_cart").on("click", function(e){
    form.ci_number = $(".quantity_input").val();
    $.ajax({
        url: '/cart/add',
        type: 'POST',
        data: form,
        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("로그인이 필요합니다.");	
    }
}

 

○ 수량 변경 버튼 기능 구현

    - let quantity = $(".quantity_input").val() : 'quantity'에 'quantity_input' 값 저장

    - plus_btn : 수량 추가

    - $(".plus_btn").on("click", function() : plus_btn 클릭

    - $(".quantity_input").val(++quantity) : quantity 값 1 증가

    - $(".minus_btn").on("click", function() : minus_btn 클릭

    - if(quantity > 1) : 수량은 1보다 클 때만

    - $(".quantity_input").val(--quantity) : quantity 값 1 감소

// 수량 버튼 조작
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);	
    }
});

---

[ CartForm.jsp ]

<input type="checkbox" class="individual_cart_checkbox input_size_20" checked="checked">

 

○ Javascript코드에서 가공해야 할 대상 정보들을 <input> 태그를 추가해 각 상품에 대한 정보를 저장

<input type="hidden" class="individual_p_rice_input" value="${cartInfo.p_price}">
<input type="hidden" class="individual_ci_number_input" value="${cartInfo.ci_number}">
<input type="hidden" class="individual_totalPrice_input" value="${cartInfo.p_price * cartInfo.ci_number}">
<input type="hidden" class="individual_point_input" value="${cartInfo.point}">
<input type="hidden" class="individual_totalPoint_input" value="${cartInfo.totalPoint}">

 

○ "cart_info_td" <td> 태그 순회 코드 작성

/* 종합 정보 섹션 정보 삽입 */
let totalPrice = 0;				// 총 가격
let totalCount = 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_ci_number_input").val());
    // 총 마일리지
    totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());

});

 

○ 배송비 및 총 결제 금액 계산하기

   - toLocaleString() : 통화 형식으로 출력될 수 있도록 대상 변수들에  메서드를 호출

/* 배송비 결정 */
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);
// 총 마일리지
$(".totalPoint_span").text(totalPoint.toLocaleString());
// 배송비
$(".delivery_price").text(deliveryPrice);	
// 최종 가격(총 가격 + 배송비)
$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());

 

○ setTotalInfo 이름으로 메서드 선언 및 위의 코드 넣기

    - is() : 해당 메서드를 호출하는 객체가 is() 메서드의 인자로 지정한 선택자를 가지고 있으면 true 반환

/* 총 주문 정보 세팅(배송비, 총 가격, 마일리지, 물품 수, 종류) */
function setTotalInfo(){
	
	let totalPrice = 0;				// 총 가격
	let totalCount = 0;				// 총 갯수
	let totalPoint = 0;				// 총 마일리지
	let deliveryPrice = 0;			// 배송비
	let finalTotalPrice = 0; 		// 최종 가격(총 가격 + 배송비)

	
	$(".cart_info_td").each(function(index, element){
		
        if($(element).find(".individual_cart_checkbox").is(":checked") === true){	//체크여부
            // 총 가격
            totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
            // 총 갯수
            totalCount += parseInt($(element).find(".individual_bookCount_input").val());
            // 총 마일리지
            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;
	
	/* ※ 세자리 컴마 Javscript Number 객체의 toLocaleString() */
	
	// 총 가격
	$(".totalPrice_span").text(totalPrice.toLocaleString());
	// 총 개수
	$(".totalCount_span").text(totalCount);
	// 총 마일리지
	$(".totalPoint_span").text(totalPoint.toLocaleString());
	// 배송비
	$(".delivery_price").text(deliveryPrice);	
	// 최종 가격(총 가격 + 배송비)
	$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());		
}

 

○ 종합 정보 섹션 삽입

    - $(document).read(function(){}) : 사용자가 화면에 이동했을 때 바로 데이터를 볼 수 있음

$(document).read(function(){
	// 종합정보 섹션 정보 삽입
	setTotalInfo();
})

---

[ OrderItemVO.java ]

○ 두 개 이상의 상품 정보를 클라이언트에서 서버로 넘기기 위해선 3개의 변수만 선언된 객체로는 넘길 수가 없음

    - product_id, ci_number만 담는 클래스 생성 후

    - 이 클래스를 요소로 가지는 List 객체 타입 변수로 가지는 클래스를 URL 매핑 메서드의 파라미터로 선언

/* 뷰로부터 전달받을 값 */
private int product_id;

private int ci_number;

/* DB로부터 꺼내올 값 */
private String p_name;

private int p_price;

/* 만들어 낼 값 */
private int totalPrice;

	public void priceTotal() {
		this.totalPrice = this.p_price*this.ci_number;
	}

 

[ OrderVO.java ]

private List<OrderItemVO> orders;

 

[ OrderController.java ]

○ @GetMapping("/order/{id}") : 주문페이지 이동을 위한 URL 경로 "/order/ + id로 설계

	@GetMapping("/order/{id}")
	public void orderItemVOGET(@PathVariable("id") String id, OrderVO ov, Model model) {
		
		System.out.println("id : " + id);
		System.out.println("orders : " + ov.getOrders());
		
	}

 

[ productDetail.jsp ]

<!-- 주문 form -->
<form action="/order/${member.id}" method="get" class="order_form">
    <input type="hidden" name="orders[0].product_id" value="${productDetail.product_id}">
    <input type="hidden" name="orders[0].ci_number" value="">
</form>

 

○ 사용자가 '바로 구매' 버튼을 눌렀을때 페이지 이동 기능 수행

    -  let ci_number = $(".quantity_input").val() : 상품 수량 변경 정보 저장

    - $(".order_form").submit() : 사용자가 수량 <input>을 통해 확정된 수량 값을 저장

/* 바로구매 버튼 */
$(".btn_buy").on("click", function(){
    let ci_number = $(".quantity_input").val();
    $(".order_form").find("input[name='orders[0].ci_number']").val(ci_number);
    $(".order_form").submit();
});

 

○ 주문하기 <input> 태그 추가

<input type="hidden" class="individual_product_id_input" value="${cart_info.product_id}">

 

○ 주문하기 <form> 태그 추가

<!-- 주문 form -->
<form action="/order/${member.id}" method="get" class="order_form">

</form>

 

○ 주문하기 버튼 추가

<a class="order_btn">주문하기</a>

 

○ 원하는 상품을 주문 페이지로 이동 구현하기

    - let form_contents = ''

      1) 동적으로 생성할 <input> 태그 문자열 값이 저장될 form_contents 변수를 선언

      2) 빈 문자열 값으로 초기화

    - let orderNumber = 0 : index값 역할을 할 orderNumber 변수를 선언하고 0으로 초기화

    - $(".cart_info_td").each(function(index, element)

      1)  상품의 데이터가 저장된 <input> 값들을 감싸고 있는 <td> 태그 반복해서 접근하는 메서드 추가

    - product_id, ci_number 변수 선언해 접근한 <td>태그 내부에 있는 <input> 태그의 값들로 초기화

    - product_id_input, ci_number_input 변수 선언

      1) 두 변수의 값과 index(each 메서드 첫 번째 인자) 값 활용

      2) 서버로 전송되어야 할 <input> 태그 문자열 값 생성

    - orderNumber += 1 : idnex값 역할 하는 orderNumber는 다음 객체에 접근할 때 +1

    - 사용자가 체크한 상품만 <input>태그로 만들기

      1) if문으로 감싸기

      2) 체크박스가 체크가 되어 있으면 1(true)을 반환

    - $(".order_form").html(form_contents)

      1) form_contents 변수에 저장된 <input> 태그 값

      2) 주문 페이지 이동 <form> 태그 내부에 추가

    - $(".order_form").submit() : <form> 태그를 서버로 전송

/* 주문 페이지 이동 */	
$(".order_btn").on("click", function(){
	
	let form_contents ='';
	let orderNumber = 0;
	
	$(".cart_info_td").each(function(index, element){
		
		if($(element).find(".individual_cart_checkbox").is(":checked") === true){	//체크여부
			
			let product_id = $(element).find(".individual_product_id_input").val();
			let ci_number = $(element).find(".individual_ci_number_input").val();
			
			let product_id_input = "<input name='orders[" + orderNumber + "].product_id' type='hidden' value='" + product_id + "'>";
			form_contents += product_id_input;
			
			let ci_number_input = "<input name='orders[" + orderNumber + "].ci_number' type='hidden' value='" + ci_number + "'>";
			form_contents += ci_number_input;
			
			orderNumber += 1;
			
		}
	});	

	$(".order_form").html(form_contents);
	$(".order_form").submit();
	
});