장바구니 기능

계획

• 회원의 OrderItem 들을 장바구니 내에 담아둔다.
• 회원이 주문을 하면 OrderItem 들을 묶어 Order 객체에 넣고 주문을 생성한다.
• check box를 통해 주문할 OrderItem을 선택할 수 있게 한다.
• 주문 생성시 선택된 아이템들을 통해 가격을 측정한다.

cart

아이템을 장바구니에 담을 수 있는 방법은 일단 두가지로 했다.

1. 메인 화면에서 장바구니를 누른다

<form class="text-center" 
      th:action="@{order/addCart/{id}(id=${item.id})}" method="post">                                  
  <button class="btn btn-outline-dark mt-auto">장바구니</button>
</form>

장바구니 버튼을 누르면 해당 상품의 id값을 PathVariable에+ 담아서 post요청을 보내도록 하였다.

@PostMapping("/order/addCart/{itemId}")
    public String addCart(@PathVariable("itemId") Long itemId,HttpServletRequest request){

        Cookie[] cookies = request.getCookies();
        Cookie c = cookies[0];
        Long userId = Long.valueOf(c.getValue());
        Member member = memberService.findOne(userId);


        OrderItem orderItem = new OrderItem();
        orderItem.setItem(itemService.findOne(itemId));
        orderItem.setMember(member);

        orderService.saveOrderItem(orderItem);

        return "redirect:/main";
    }

그러면 컨트롤러에서 cookie값을 통해 member객체를 가져오고 PathVariable을 통해 item 객체를 가져와서 orderItem을 생성한 후 repository에 저장한다.

이렇게 상품 이름, 가격, 수량이 나타나도록 하였고 아직 메인화면에서 주문시 상품 수량을 선택하는 코드는 작성하지 않았다.

2. 상품 정보에서 장바구니를 누른다.

1번 방법과 비슷하지만 이번엔 form을 통해 수량정보까지 함께 전달한다.

• view

<form class="text-center" th:action="@{order/addCart/{id}(id=${item.id})}" method="post">
  <label for="inputQuantity" >수량 : </label>
  <input  id="inputQuantity" name="count" type="num" value="1" style="max-width: 3rem" />
  <button class="btn btn-outline-dark mt-auto" type="submit"><i class="bi-cart-fill me-1"></i>장바구니</button>
</form>

• controller

@PostMapping("/item/form/order/addCart/{itemId}")
    public String addCart2(@PathVariable("itemId") Long itemId,HttpServletRequest request){

        Cookie[] cookies = request.getCookies();
        Cookie c = cookies[0];
        Long userId = Long.valueOf(c.getValue());
        Member member = memberService.findOne(userId);
        int count = Integer.valueOf(request.getParameter("count"));
        Item item = itemService.findOne(itemId);

        try {
            item.removeStockQuantity(count);
        }catch (IllegalStateException e){
            //메시지 출력하기
        }
        OrderItem orderItem = new OrderItem();
        orderItem.setItem(item);
        orderItem.setMember(member);
        orderItem.setCount(count);

        orderService.saveOrderItem(orderItem);

        return "redirect:/main";
    }

orderItem의 수량을 설정하면서 item의 재고를 구매량만큼 줄이는 로직도 포함시켰다.

order

장바구니를 통해 cart에 담긴 orderItem들은 orderRepository에 저장해두고 찾아서 사용한다.
thymeleaf의 checkbox기능을 사용하여 주문할 orderItem들을 선택하고 주문하기 버튼을 통해 선택된 orderItem들로 구성된 order을 생성한다.

• view

<tr th:each="orderItem : ${orderItems}">

                <td class="form-check">
                    <input type="checkbox" class="form-check-input" th:field="*{ids}" th:value="${orderItem.id}">
                </td>
                <td th:text="${orderItem.item.name}"> </td>
                <td th:text="${orderItem.item.price}"></td>
                <td th:text="${orderItem.count}"></td>

            </tr>

th:each 기능과 th:field 기능을 사용했다.
원래는 orderItems 객체 자체를 바로 담으려고 했는데 계속 오류가 나서 orderItem의 id를 담을 list를 생성하여 id값들을 저장하고 불러쓰는 구조로 하였다.

• controller

  @PostMapping("/order")
    public String order(@ModelAttribute Order order, HttpServletRequest request) {
        List<Long> ids = order.getIds();
        List<OrderItem> orderItems = order.getOrderItems();
        for (int i = 0; i < ids.size(); i++)
        {
            OrderItem orderItem = orderRepository.findOrderItem(ids.get(i));
            orderItems.add(orderItem);
        }

        Cookie[] cookies = request.getCookies();
        Cookie c = cookies[0];
        Long userId = Long.valueOf(c.getValue());
        Member member = memberService.findOne(userId);

        order.setMember(member);
        orderRepository.regist(order);
        log.info(order.getMember().getName());
        return "redirect:/main";
    }
}

controller에서는 저장된 orderItem id들을 모두 돌면서 orderItem 객체를 찾아 order객체에 저장한다.
이렇게 생성된 order에 cookie에 저장된 member정보를 넣어주고 orderRepository에 저장함으로써 주문이 완료된다.