JSP_22-12-14_[쇼핑몰 만들기_장바구니 이미지 나열]

[ CartController.java ]

○ 장바구니 조회를 위해 필요로 한 데이터 id를 얻기 위해 PathVariable 패턴의 URL로 작성

○ 조회한 장바구니 데이터를 뷰에 넘기기 위해 Model을 파라미터로 추가

	@RequestMapping(value = "/cartForm/{id}", method = RequestMethod.GET)
	public String cartForm(@PathVariable("id") String id, Model model) {
		
		logger.info("CartController 장바구니 화면 불러오기.....");
		
		//-----------------------------------------------------------------------------------------------------------
		// [ 장바구니 목록 불러오기(cartAll) ]
		//
		// model	:	Controller에서 생성한 데이터를 담아 View로 전달할 때 사용하는 객체
		//				Servlet request.setAttribute()와 유사함
		//				addAttribute("키", "값") 메소드를 사용해 전달할 데이터 세팅
		//-----------------------------------------------------------------------------------------------------------
		
		// 아직 테이블 member의 id가 로그인 돼 있지 않으므로 임의로 cart_id를 '1'로 지정
		
		// 추가된 장바구니 목록을 보여주기 위해 해당 cart의 특정 cart_id 불러오기(추후 테이블member의 id와 연결할 것임)
		cartService.getCartList(id);
		
		// model 객체를 통해 데이터 저장
		// "cart_info"를 키로 지정
		// cartService의 getCartList에 cart_id를 파라미터로 설정해 데이터 전달
		model.addAttribute("cartInfo", cartService.getCartList(id));

		return "/cart/cartForm";
		
	}

---

[ CartForm.jsp ]

○ 'cart_info_td' 식별자를 통해 <td> 태그에 접근해 제이쿼리 'find()' 메서드 통해 정보 저장된 <input> 태그에 접근

○ 같은 이름의 식별자를 가진 <td> 태그 객체가 장바구니 상품 수만큼 존재

○ 'each(index, element)' 메서드 통해 객체 수만큼 순회

    - index : 순회하는 객체 인덱스

    - element : 순회 대상의 각 객체

○ totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());​

    - 접근한 <td> 객체에 있는 'individual_totalPrice_input' <input> 태그에 값을 totalPrice 변수의 값에 더해주기

    - 모든 상품 <td> 객체를 순회하게 되면 totalPrice는 모든 상품의 가격이 더해져서 '총 상품 가격' 구해짐

    - 'parseInt() : <input> 태그 값이 'string'타입으로 인식 되어 'int' 타입으로 변경

/* 총 주문 정보 세팅(배송비, 총 가격, 마일리지, 물품 수, 종류) */
function setTotalInfo(){
	
	let totalPrice 		= 0;	// 총 가격	
	let totalCount		= 0;	// 총 개수
	let totalPoint 		= 0;	// 총 포인트 점수
	let deliveryPrice 	= 0;	// 배송비
	let finalTotalPrice = 0;	// 최종 가격(총 가격 + 배송비)
	
	// element(<td> 객체)에 있는 체크박스('.individual_cart_checkbox' <input>)가 
	// checked 상태일 때 true이면 참이된다는 의미
	$(".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_ci_number_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;
	
	/* 값 삽입 */
	// 총 가격
	$(".totalPrice_span").text(totalPrice.toLocaleString());
	// 총 갯수
	$(".totalCount_span").text(totalCount);
	// 총 마일리지
	$(".totalPoint_span").text(totalPoint.toLocaleString());
	// 배송비
	$(".delivery_price").text(deliveryPrice);	
	// 최종 가격(총 가격 + 배송비)
	$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());
	
};

---

 

[ CartDTO.java ]

○ FileDAO의 getFileList() 메서드 그대로 사용하여 반환 받은 값을 List<FileVO> 변수에 담기

// 상품 이미지
private List<FileVO> imageList;

 

[ CartServiceImpl.java ]

○ 회원의 장바구니 정보를 모두 호출해 cart 변수에 담기(이미지 포함)

    - 회원 'id'를 파라미터로 삽입

    - for문 통해 cart의 각 요소에 담긴 장바구니 정보(CartDTO)의 판매 정보를 세팅하도록 totalPrice 호출

    - for문 안에 CartDTO 객체의 imageList 이미지 정보 세팅

	// -----------------------------------------------------------------
	// [ 장바구니 리스트(cartAll) ]
	// -----------------------------------------------------------------
	@Override
	public List<CartDTO> getCartList(String id) {

		// 현재는 cart_id로 연결돼 있지만, 추후 테이블 member의 id와 연결할 예정
		List<CartDTO> cartDTO = cartDAO.getCart(id);
		
		// 포인트 점수 적립을 for문을 통해 추가되는 상품에 따라 계속해서 더해주기
		for(CartDTO dto : cartDTO) {
			
			// 상품 금액 총합
			dto.priceTotal();
			
			// 상품 이미지 정보 얻기
			int product_id = dto.getProduct_id();
			List<FileVO> imageList = fileDAO.getFileList(product_id);
			
			dto.setImageList(imageList);
			
		}
		
		return cartDTO;
	}

 

[ cartForm.jsp ]

○ CartController.java에서 addAttribute에 'cartInfo'의 속성 매개 활용

    - CartDTO의 imageList 배열에 상품번호(product_id), 파일 경로(file_path), uuid, 파일명(file_s_name) 변수 선언

    - js에서 찾을 <img> 입력

<td class="td_width_2">
    <div class="image_wrap" product="${cartInfo.imageList[0].product_id}" data-path="${cartInfo.imageList[0].file_path}" data-uuid="${cartInfo.imageList[0].uuid}" data-filename="${cartInfo.imageList[0].file_s_Name}">
        <img>
    </div>
</td>

 

○ encodeURIComponent() : 모든 문자를 인코딩하는 함수

    - 클래스 image_wrap을 기준으로 기능 구현

    - 'product' 데이터 값 불러오기

    - encodeURIComponent() 안에 파일 경로와, uuid, 파일명 경로 합치기

    - <img>의 경로 속성을 찾아 이미지 나열

    - 이미지가 없을 시에 'no_image_found.png' 보여주기

/* 이미지 삽입 
	i 	: 몇 번째 객체인지의 순서 값
	obj	: i번째 접근하는 객체
*/
$(".image_wrap").each(function(i, obj){

	const bobj = $(obj);
	
	if(bobj.data("product")){
		const uploadPath = bobj.data("path");
		const uuid = bobj.data("uuid");
		const fileName = bobj.data("filename");
		
		const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
		
		$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
	} else {
		$(this).find("img").attr('src', '/resources/imges/no_image_found.png');
	}
	
});