カート機能

n/a.計画

会員の注文品をカートに入れます.

会員が注文すると、OrderオブジェクトにOrderItemを組み合わせて注文を生成します.

チェックボックスを使用すると、注文するオーダーItemを選択できます.

注文が生成された場合、選択されたアイテムによって価格が測定されます.

cart

買い物かごに物を入れる方法は2つあります.

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";
    }

次に、コントローラからクッキー値でメンバーオブジェクトをインポートし、PathVariableでitemオブジェクトをインポートし、orderItemを作成してリポジトリに保存します.

これで商品名、価格、数量が表示され、メイン画面から注文商品の数量を選択するコードはまだ作成されていません.

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

カート内のorderItemは、ショッピングバスケットを介してorderRepositoryに保存され、検索および使用されます.
thymeleafのチェックボックス機能を使用して注文するOrderItemを選択し、「注文」ボタンを使用して選択したOrderItemからなる注文を生成します.

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オブジェクト自体を直接読み込むのですが、エラーがずっと発生しているので、id値を保存して読み込む構造としてlistを生成してorderItemの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";
    }
}

コントローラは、保存されているすべてのorderItem idを巡回し、orderItemオブジェクトを検索してorderオブジェクトに格納します.
このようにして生成されたorderにクッキーに格納されたメンバー情報を入れ、orderRepositoryに保存して注文を完了します.