[스프링 부트 쇼핑몰 프로젝트 with JPA] 10. 상세페이지

이 내용은 스프링 부트 쇼핑몰 프로젝트 with JPA 책을 학습한 내용입니다.

1. ItemController 추가

• 상품 수정 페이지에서 사용했던 ItemDetail 메소드를 그대로 사용하여 상품 조회
• 메소드 오버로딩은 파라미터의 순서가 달라도 적용이 됨

// 아이템 상세 페이지
    @GetMapping("/item/{itemId}")
    public String itemDetail(Model model, @PathVariable("itemId") Long itemId) {
        ItemFormDto itemFormDto= itemService.getItemDetail(itemId);
        model.addAttribute("item", itemFormDto);
        return "item/itemDetail";
    }

2. 제품 상세 페이지 View

• totalPrice를 계산해서 출력하는 calculateTotalPrice() 메소드
  • 처음 화면 출력할 때 수행되고, 그 후에 수량 변동 시 수행됨

  <!-- 사용자 스크립트 추가 -->
  <th:block layout:fragment="script">
    <script th:inline="javascript">
      $(document).ready(function(){
  
        calculateToalPrice();
  
        $("#count").change( function(){
          calculateToalPrice();
        });
      });
  
      function calculateToalPrice(){
        var count = $("#count").val();
        var price = $("#price").val();
        var totalPrice = price*count;
        $("#totalPrice").html(totalPrice + '원');
      }
  	</script>
  </th:block>
  

3. 제품 상세 페이지 화면