장바구니 선택 연산

기획의도:

• 체크된 cart의 소계금액만 예상결제액에 포함
• 체크된 cart 건수를 카운트해서 주문 버튼에 표시
  . 전체선택은 체크박스가 기본으로 checked되어 있어 보류
  . 선택삭제는 개발 후순위로 정렬

html:

<form action="/cart/orderForm" method="post">

	<input type="hidden" name="uid" value="${session.username}">
	
	<div style="width: 800px; display: flex; flex-direction: column; align-items: center;">	 <!-- mediaList -->
		
		<div style="width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px;"> <!-- totalPay & 주문버튼-->
		
			<input type="hidden" name="totalPay" id="totalPayInput" th:value="${totalPay}"><!-- totalPay값 입력 받을 영역 -->    
		    <span id="totalPayText"></span><!-- totalPay값, 즉 예상결제액 표시할 영역 -->
		    
		    &emsp;
		    <input type="submit" id="orderButton" value="주문하기" class="button">
		    	
		</div>
	
		<div th:each="m : ${li}" class="mediaObject" style="width: 800px; margin: 15px; 
		display: flex; flex-wrap: wrap; justify-content: left; background-color: #f4f4f4; 
		border-radius: 5px; box-shadow: 0 3px 5px #96a9fe, 0 2px 4px #96a9fe;"><!-- mediaObject -->
		
			<!-- 			1 -->
				<div style="margin-left: 10px;">
					<input type="checkbox" name="ckbox" checked>
				</div>
				
				<input type="hidden" name="cartid" th:value="${m.cartid}">
				
				<div style="margin-left: 10px;">
					<a th:href="@{/prd/viewPrd(product_code=${m.product_code})}" target="_blank">
			            <img th:src="@{/img/}+${m.pimgStr}" width="150" />
			        </a>
				 </div>			
			<!-- 			1 끝 -->			
			
			<!-- 			2 -->
				<div style="text-align: left; margin-left: 10px;">
					<div>
						 <a th:href="@{/prd/viewPrd(product_code=${m.product_code})}" 
						 th:utext="'<strong>' + ${m.pname} + '</strong>'" target="_blank">
						</a>
					</div>
					
					<!-- 	수직 정렬 위해 span 대신 div 씀. span 쓰면서 수직은 유지하려면 각각 div으로 감싸기 -->
					<div>						
			        <input type="hidden" name="pprice" th:value="${m.pprice}">	
			        <span th:text="'판매가: ' + ${m.fmtPprice} + '원'"></span>
		        	</div>			
		        	            			            
			        <div>
			        <input type="hidden" name="pdelifee" th:value="${m.pdelifee}">
			        <span th:text="${m.pdelifee == 0 ? '무료배송❗' : '배송비: ' + m.fmtPdelifee + '원'}"></span>
			        </div>
		            <!-- 	수직 정렬 위해 span 대신 div 씀 -->
				</div>				
			<!-- 			2 끝 -->			
			
			<!-- 			3 -->
				<div style="margin-left: 120px; margin-right: 10px; display: flex; flex-direction: column; text-align: right;">
					<div>
					주문수량: 
						<input type="number" name="pquantity" class="quantity-input" 
						th:value="${m.pquantity}" th:text="' / ' + ${m.pstock} + '개'" min="1" th:max="${m.pstock}">
						<!-- class="quantity-input" 통해 입력된 주문량을 js에 전달 -->
						
					</div>
				</div>
				
				<div style="margin-left: auto; margin-right: 10px; display: flex; flex-direction: column; text-align: right;">
				    
					<span class="item-total" th:text="'소계: ' + (${m.pprice * m.pquantity + m.pdelifee}) + '원'">소계</span>					

				</div>
				
				<div style="margin-left: auto; margin-right: 10px; display: flex; flex-direction: column; text-align: right;">					
						<a th:href="@{/cart/delCart(cartid=${m.cartid})}" >✖️</a>
				</div>
			<!-- 			3 끝 -->
			
		</div> <!-- mediaObject 끝 -->
	</div> <!-- mediaList 끝 -->

</form>

js:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const quantityInputs = document.querySelectorAll('.quantity-input');
        const checkboxes = document.querySelectorAll('input[name="ckbox"]');
        const totalPayInput = document.getElementById('totalPayInput');
        const totalPayText = document.getElementById('totalPayText');
        const orderButton = document.getElementById('orderButton');
                
        // 천 단위에 콤마 찍기
        function formatNumber(number) {
            return number.toLocaleString();
        }
        
        // 계산하기
        function updateTotals() {
            let totalPay = 0;
            let checkedCount = 0;
            quantityInputs.forEach(input => {
                const mediaObject = input.closest('.mediaObject');
                const checkbox = mediaObject.querySelector('input[name="ckbox"]');
                
                const price = parseFloat(mediaObject.querySelector('input[name="pprice"]').value);
                const quantity = parseInt(input.value, 10);
                const deliveryFee = parseFloat(mediaObject.querySelector('input[name="pdelifee"]').value);
                
                const itemTotal = (price * quantity) + deliveryFee;                
                
                console.log('price: ', price);
                console.log('quantity: ', quantity);
                console.log('deliveryFee: ', deliveryFee);
                console.log('itemTotal: ', itemTotal);
                console.log('checkbox: ', checkbox);
                
                // 소계 업데이트
                const totalSpan = mediaObject.querySelector('.item-total');
				totalSpan.textContent = '소계: ' + formatNumber(itemTotal) + '원';			
                
				// 체크된 경우만 합산
                if (checkbox.checked) {
                    totalPay += itemTotal;
                    checkedCount++; // 체크된 항목 수 증가
                }                
                
            });
            totalPayInput.value = totalPay;
            totalPayText.innerHTML = '예상결제액: <strong>' + formatNumber(totalPay) + '원</strong>';
            orderButton.value = checkedCount + '건 주문하기'; // 버튼에 체크된 항목 수 표시
        }
		
     	// 수량 변경 시 계산 업데이트
        quantityInputs.forEach(input => {
            input.addEventListener('input', updateTotals);
        });
		
    	 // 체크박스 변경 시 계산 업데이트
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateTotals);
        });
     	
        updateTotals();
    });
</script>