쇼핑몰 프로젝트(11) 회원 MY PAGE - 장바구니 목록 (2)

장바구니 상품 등록 시 중복 상품 수량 증가, 상품 없으면 해당 상품 등록.

장바구니 상품 등록 쿼리 수정

MERGE INTO 이용

 

어떤 회원의 장바구니에 해당 상품이 있는지 없는지 확인

WHEN MATCHED THEN

해당 상품의 itemCode가 현재 장바구니에 있는 itemCode와 일치

로그인된 회원의 memId와 해당 상품이 담긴 회원의 memId가 일치

>>  UPDATE 쿼리 실행하여 장바구니에 있는 cartCnt 증가

 

WHEN NOT MATCHED THEN

위 두가지 조건이 일치하지 않는 경우

>>해당 상품 장바구니에 INSERT 쿼리 실행하여 담기.

 

최종 장바구니 상품 등록 쿼리

기존의 장바구니 등록 쿼리 중 INSERT INTO SHOP_CART에서 INTO SHOP_CART는 지워줘야 함.

<!-- 장바구니 등록 -->
<insert id="regCart">
    MERGE INTO SHOP_CART
    USING DUAL
    ON (ITEM_CODE = #{itemCode} AND MEM_ID = #{memId})
    WHEN MATCHED THEN
        UPDATE
        SET
        CART_CNT = CART_CNT + #{cartCnt}
        WHERE ITEM_CODE = #{itemCode}
        AND MEM_ID = #{memId}
    WHEN NOT MATCHED THEN
        INSERT (
            CART_CODE
            , ITEM_CODE
            , MEM_ID
            , CART_CNT
        ) VALUES(
            (SELECT 'CART_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(CART_CODE, 6))), 0) + 1, 3, '0') 
             FROM SHOP_CART)
            , #{itemCode}
            , #{memId}
            , #{cartCnt}
        )
</insert>

 

 

장바구니 상품 수량 변경 기능

 

장바구니 상품 수량 수정 쿼리 작성

장바구니에 담긴 해당 상품을 수량 변경하여야 하기 때문에 cartCode 필요

<!-- 장바구니 수량 수정-->
<update id="updateCartCnt">
    UPDATE SHOP_CART
    SET 
        CART_CNT = #{cartCnt}
    WHERE CART_CODE = #{cartCode}
</update>

CartService 메소드 작성

//장바구니 수량 수정 버튼 클릭
void updateCartCnt(CartVO cartVO);

CartServiceImpl  메소드 구현

//장바구니 수량 수정 버튼
@Override
public void updateCartCnt(CartVO cartVO) {
    sqlSession.update("cartMapper.updateCartCnt", cartVO);
}

cart_list.html에서 for문 돌면서 장바구니 목록 뿌려주는 영역을 form 태그로 감싸줌.

> 변경된 수량 데이터 받아가기 위함.

form 태그 속성 작성

데이터 받아가기 위해 수정 버튼은 submit으로!

수량 변경한 해당 상품의 수량이 변경되어야 함.

> cartCode를 input hidden 속성으로 데이터 넘겨서 쿼리 빈 값을 채워줌.

<form th:action="@{/cart/updateCartCnt}" method="post">
    <input type="hidden" name="cartCode" th:value="${cart.cartCode}">
    <td>
        <div class="row">
            <div class="col-7">
                <input name="cartCnt" type="number" class="form-control" min="1" th:value="${cart.cartCnt}">
            </div>
            <div class="col-5 d-grid">
                <input type="submit" class="btn btn-secondary" value="수정">
            </div>
        </div>
    </td>
</form>

 

CartController 작성

//장바구니 수량 수정
@PostMapping("/updateCartCnt")
public String updateCartCnt(CartVO cartVO) {

    cartService.updateCartCnt(cartVO);

    return "redirect:/cart/cartList";
}

 

 

장바구니 삭제 버튼 기능 구현

해당 상품의 삭제 버튼 누르면 상품 삭제

cart_list.html의 삭제 버튼에 th:onclick 속성으로 사용하여 js의 삭제 함수로 이동

해당 상품을 삭제하여야 하기 때문에 매개변수로 cartCode 넘겨주기

<div class="row">
    <div class="col d-grid">
        <input type="button"  class="btn btn-secondary" value="삭제" th:onclick="deleteCart([[${cart.cartCode}]]);">
    </div>

cart_list.js 생성

상품 삭제 함수 작성.

삭제 전 confirm 창으로 확인 창 띄워주기.

확인 누르면 cartCode가지고 controller로 이동

//장바구니 상품 삭제
function deleteCart(cartCode){
	
	const result = confirm('장바구니에서 삭제하시겠습니까?');
	
	if(result){
		location.href = `/cart/deleteCart?cartCode=${cartCode}`;
	}
}

CartController 작성

//장바구니 삭제 버튼 클릭 시
@GetMapping("/deleteCart")
public String deleteCart(String cartCode) {

    return "redirect:/cart/cartList";

}

상품 삭제 쿼리 작성.

<!-- 장바구니 상품 삭제 버튼 -->
<delete id="deleteCart">
    DELETE SHOP_CART
    WHERE CART_CODE = #{cartCode}
</delete>

CartService 메소드 작성

//장바구니 삭제 버튼 클릭
void deleteCart(String cartCode);

CartServiceImpl  메소드 구현

//장바구니 삭제 버튼
@Override
public void deleteCart(String cartCode) {
    sqlSession.delete("cartMapper.deleteCart", cartCode);
}

CartController에서 메소드 실행

//장바구니 삭제 버튼 클릭 시
@GetMapping("/deleteCart")
public String deleteCart(String cartCode) {
    //장바구니 상품 삭제 버튼 클릭
    cartService.deleteCart(cartCode);

    return "redirect:/cart/cartList";

}

 

 

장바구니 상품 체크박스 컨트롤 기능

 

 

 

 

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ정리 날려먹은 부분

- 체크박스 변경 시 최종 금액 자동 변경

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ