[shop]장바구니 구현하기3 (선택 삭제, 선택 구매)

1. 선택삭제와 선택 구매

1) html

<div class="col" > 
 <form action="" method="post" id="cartForm">
    <input type="hidden" name="cartCodes" value="">
 </form>
    <button type="button" class="btn btn-outline-dark" th:onclick="deleteBuy(this);"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box2-heart" viewBox="0 0 16 16">
    <path d="M8 7.982C9.664 6.309 13.825 9.236 8 13 2.175 9.236 6.336 6.31 8 7.982Z"/>
    <path d="M3.75 0a1 1 0 0 0-.8.4L.1 4.2a.5.5 0 0 0-.1.3V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.1-.3L13.05.4a1 1 0 0 0-.8-.4h-8.5Zm0 1H7.5v3h-6l2.25-3ZM8.5 4V1h3.75l2.25 3h-6ZM15 5v10H1V5h14Z"/>
    </svg>선택삭제</button>
</div>

 <div class="col">
    <button type="button" class="btn btn-outline-dark" th:onclick="deleteBuy(this);"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box2-heart" viewBox="0 0 16 16">
    <path d="M8 7.982C9.664 6.309 13.825 9.236 8 13 2.175 9.236 6.336 6.31 8 7.982Z"/>
    <path d="M3.75 0a1 1 0 0 0-.8.4L.1 4.2a.5.5 0 0 0-.1.3V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.1-.3L13.05.4a1 1 0 0 0-.8-.4h-8.5Zm0 1H7.5v3h-6l2.25-3ZM8.5 4V1h3.75l2.25 3h-6ZM15 5v10H1V5h14Z"/>
    </svg>선택구매</button>
</div>

2) js

function deleteBuy(selectedTag){
	
const deleteForm = document.querySelector('#cartForm');

체크한 cartCode 데이터 다 가져오기
const checkedChks = document.querySelectorAll('.chk:checked');
		
        if(checkedChks.length == 0){
            alert('선택한 상품이 없습니다.')
            return;
        }

        let cartCodes = '';

        for(const checkedChk of checkedChks){
            cartCodes = cartCodes + checkedChk.value + ',';
            //cart_001cart_002 이런식으로 들어오니까 쉼표로 구분하겠다
        }

deleteForm.querySelector('input').value = cartCodes;
	
        form 태그의 action값 바꾸기
        if(selectedTag.innerText == '선택삭제'){

            deleteForm.action = '/cart/deleteCart'
        }
        else{
            (선택 구매)
            deleteForm.action = '/cart/buyInfo'
        }
	
deleteForm.submit();
}

 

2. 선택 삭제

1) mapper

<delete id="deleteCart">
	DELETE SHOP_CART
	WHERE CART_CODE IN  
		<!-- cartVO.getCartCodeList()  -> cart_001, cart_002 여러개 들어가 있다 -->
	<foreach collection="cartCodeList" item="cartCode" open="(" close=")" separator=",">
 		#{cartCode}
	</foreach>
</delete>

장바구니 선택삭제
@Override
public void deleteCart(CartVO cartVO) {
    sqlSession.delete("cartMapper.deleteCart", cartVO);
}

2) controller

장바구니 선택삭제
@PostMapping("/deleteCart")
public String deleteCart(String cartCodes, CartVO cartVO) {

    String[] cartCodesArr = cartCodes.split(",");

    List<String>cartCodeList = Arrays.asList(cartCodesArr);
    cartVO.setCartCodeList(cartCodeList);

    cartService.deleteCart(cartVO);

    return"redirect:/cart/cartList";
}

 

3. 선택구매

1) mapper

<select id="buyInfo" resultMap="cart">
   SELECT ITEM_CODE
    , (SELECT ITEM_NAME
        FROM SHOP_ITEM
        WHERE ITEM_CODE = C.ITEM_CODE)AS ITEM_NAME
    , (SELECT ITEM_PRICE
        FROM SHOP_ITEM
        WHERE ITEM_CODE = C.ITEM_CODE)AS ITEM_PRICE
    , CART_AMOUNT
    , (SELECT ATTACHED_NAME
        FROM ITEM_IMG
        WHERE ITEM_CODE = C.ITEM_CODE
        AND IS_MAIN = 'Y') AS ATTACHED_NAME
    , CART_CODE
   FROM SHOP_CART C
   WHERE CART_CODE IN   
   <foreach collection="cartCodeList" item="cartCode" separator="," open="(" close=")" >
       #{cartCode}
   </foreach>      
   ORDER BY CART_CODE DESC

@Override
public List<CartVO> buyInfo(CartVO cartVO) {

    return sqlSession.selectList("cartMapper.buyInfo", cartVO);
}

2) controller

장바구니 구매버튼 클릭 후  buy_info 페이지로
@RequestMapping("/buyInfo")
public String buyInfo(CartVO cartVO, Model model, String cartCodes, Authentication authentication) {

    주소창에서 새로고침 했을 때
    if(cartCodes == null || cartCodes.equals("")) {
        return "redirect:/item/list";
    }

    String[] cartCodesArr = cartCodes.split(",");

    List<String>cartCodeList = Arrays.asList(cartCodesArr);
    cartVO.setCartCodeList(cartCodeList);

    List<CartVO> buyInfo = cartService.buyInfo(cartVO);

    model.addAttribute("cartInfo", buyInfo);

    //총가격
    int finalPrice = 0;
    for(CartVO cart : buyInfo) {
        finalPrice = finalPrice + (cart.getCartAmount()*cart.getItemList().getItemPrice());
    }

    model.addAttribute("totalPrice", finalPrice);

    //멤버정보
    User user = (User)authentication.getPrincipal();
    String memberId = user.getUsername();


    model.addAttribute("memberInfo", memberService.memberDetail(memberId));

    return "content/buy/buy_info";

}