[shop] 상품 상세페이지 장바구니 버튼 구현

 js로 장바구니 버튼 클릭 시 장바구니로 이동하기

장바구니는 회원만 사용가능하도록 만들고자 한다.

비회원이 클릭했을 때 로그인 alert을 뜨도록 하고,

회원이 클릭 시 장바구니에 담기도록 할 것이다. 

1. html

<div class="col-4" > 									
    <button type="button" class="btn btn-outline-dark" th:onclick="addCart();"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-heart" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5Zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0ZM14 14V5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1ZM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"/>
    </svg> 장바구니
    <!-- visibility:hidden: 눈에는 보이지 않는데 공간은 유지 layout 영향 준다(해석된다는 뜻) -->
    <!-- display:none : 없는 태그 취급, layout 해석 영향 주지 않는다 -->
    <div id="test" style="display: none;">
        <div sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_MEMBER')">
          1
        </div>
    </div>
 </button>			
</div>

 

 

function addCart(){
	//비회원인 경우 로그인 먼저 alert
	
	//innerHTML : 선택한 태그 안에 있는 태그 내용을 그대로 가져옴 (해석하지 않고 가져온다) 원본 그대로 가져옴
	//innerText : 선택한 태그 내용을 해석하여 눈에 보여지는 데이터만 가져온다.
	
	const check_login = document.querySelector('#test').innerText;
	
	//trim() 공백제거
	if(check_login.trim() == ''){
	
		alert('로그인이 필요합니다.');
			return;
	}
    
    //장바구니로 이동 ajax 실행 
	addCartAjax();

히든으로 데이터 가져가기 (itemCode, itemAmount)
<input type="hidden" name="itemCode" th:value="${item.itemCode}" id="itemCode">
<input type="number" min="1" value="1" name="cartAmount" id="cartAmount">

<!-- 장바구니 담기-->

<insert id="insertCart">

<selectKey resultType="String" keyProperty="cartCode" order="BEFORE">

SELECT 'CART_'|| LPAD(NVL(MAX(TO_NUMBER(SUBSTR(CART_CODE, 6))), 0) +1, 3, 0) FROM SHOP_CART

</selectKey>

MERGE INTO SHOP_CART
	USING DUAL
	ON(ITEM_CODE = #{itemCode} AND MEMBER_ID = #{memberId})

	WHEN MATCHED THEN
	UPDATE 
	SET
		CART_AMOUNT = CART_AMOUNT + #{cartAmount}
	  , TOTAL_PRICE = (CART_AMOUNT + #{cartAmount}) * 
 	 	(SELECT ITEM_PRICE FROM SHOP_ITEM WHERE ITEM_CODE = #{itemCode})
	WHERE MEMBER_ID = #{memberId}
	AND ITEM_CODE = #{itemCode}    

	WHEN NOT MATCHED THEN

	INSERT(   CART_CODE
			, ITEM_CODE
			, MEMBER_ID
			, CART_AMOUNT
			, TOTAL_PRICE
		)VALUES(
			  #{cartCode}
			, #{itemCode}
			, #{memberId}
			, #{cartAmount}
			, (SELECT ITEM_PRICE FROM SHOP_ITEM 
				WHERE ITEM_CODE = #{itemCode}) * #{cartAmount}
		)

</insert>

//장바구니 등록 시 실행되는 ajax

function addCartAjax(){
	
	$.ajax({
	   url: '/cart/regCart', //요청경로
	    type: 'post',
	    data:{'itemCode': document.querySelector('#itemCode').value
	    ,'cartAmount': document.querySelector('#cartAmount').value}, //필요한 데이터
	   
	    success: function(result) {
			
			//모달창 소스
			const modal = new bootstrap.Modal('#regCartModal');
	   		//모달 보여주기
	   		modal.show();
	    },
	    
	    error: function(){
	       alert('실패');
	    }
	});

장바구니로 이동 controller

	@GetMapping("/cartList")
	public String cartList(Authentication authentication, Model model) {
		
		//memberId 가져오기
		User user =  (User) authentication.getPrincipal();
		String memberId = user.getUsername();
		
		List<CartVO>list = cartService.cartList(memberId);
		model.addAttribute("cartList", list);
		
		 
		//전체 총 가격 데이터
		int finalPrice = 0; 
		
		for(CartVO cart : list) {
			finalPrice = finalPrice + cart.getTotalPrice();
		}
		model.addAttribute("finalPrice", finalPrice);
		
		return "content/cart/cart_list";
	}

<!-- 장바구니로 이동 시 모달창  -->
<div class="modal fade" id="regCartModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      	<div class="row mb-3" >
	      <div class="col text-center">
            <div>장바구니에 담겼습니다.</div>
            <div>장바구니로 이동하시겠습니까?</div> 
	      </div>
      	</div>
     
     <div class="row">
       <div class="col text-center">
       	<button type="button" class="btn btn-primary btn-sm" th:onclick="|location.href='@{/cart/cartList}'|"
       	style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: 3rem; --bs-btn-font-size: 1rem;">확인</button>
       		
       	<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"
       	style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: 3rem; --bs-btn-font-size: 1rem;">취소</button>
      </div>
    </div>
   </div>
  </div>
 </div>
</div>