Django開発~ショッピングカート構築編7~ShoppingCartの導入

django

Django開発~ショッピングカート構築編6~検索機能の導入の続きです。

本日は、Shopping Cart を実装します。

学習履歴

cartアプリケーション

Shopping Cartとは、購入予定の商品をまとめて管理する機能の事を指します。

Amazonのカートを思い浮かべてください。それです。

Amazon公式サイトより

まずは、cartアプリケーションをDjangoプロジェクトに追加します。

次に、settings.pyを開いて、cartをDjangoプロジェクトに組み込みます。

Cartアプリケーションの仕様

Cart アプリケーションを追加できたら、このアプリケーションの仕様を考えます。

仕様 ・商品の詳細ページからカートに追加できるようにする
・カートとカートに追加するアイテムが存在する
・カートは、一覧表示、追加、削除、一括削除ができる

ざっくりとした仕様ですが、ひとまず、この仕様を元にTodoリスト作成します。

Todoリスト ①Cartモデルの作成
②CartItemモデルの作成
③一覧表示できるようにする
④商品追加ができるようにする
⑤商品削除、一括削除ができるようにする
KOUKI
KOUKI

Todoリストは、アプリケーション開発のためのレシピです。このレシピを元にアプリケーションを開発していきましょう

モデルの作成

まずは、Cartモデルを作成します。

このモデルは、カートそのものを表します。

TDDで開発しているため、まずは、テストコードを作成しましょう。

続いて、カートモデルが設定通りに作成されるかテストします。

cart_idは、ユーザーのセッション情報を格納するつもりです。そうすることで、ユーザー(セッション)単位でカートが作成されます。

テストコードを実行しましょう。

ImportError: cannot import name ‘Cart’ from ‘cart.models’ (/app/cart/models.py)」とエラーメッセージが出ました。

Cartモデルを作成していないので、当然ですね。

Cartモデルを追加しましょう。

マイグレーションしましょう。

テストを実行します。

テストがPassしました。同様にCartItemモデルも作成しましょう。

このモデルは、Cartに格納した商品を表します。

例によってテストコード作成からです。

Cartに商品を追加するとき、CartItemとして扱います。その為、このCartItemは、CartとProductに結び付きます。

テストを実行してみましょう。

E ImportError: cannot import name ‘CartItem’ from ‘cart.models’ (/app/cart/models.py)」になりましたね。

CartItmeをモデルに追加しましょう。

マイグレーションを実行します。

テストを実行します。

OKですね。

Todoリストから ①と②を削除しましょう。

Todoリスト ①Cartモデルの作成
②CartItemモデルの作成
③一覧表示できるようにする
④商品追加ができるようにする
⑤商品削除、一括削除ができるようにする

一覧表示機能の実装

次は、一覧表示機能を実装しましょう。

まずは、テストコードを書きます。

最初は、カート詳細ページへのリクエストをテストします。

テストを実行します。

cart のnamespaceがないと表示されましたね。

このnamespaceは、cartアプリのurls.pyに記述します。

テストを実行しましょう。

同じエラーが、まだ表示されますね。

プロジェクトのurls.pyにもパスを記述する必要があるためです。

テストを実行します。

エラーが変わりました。views.pyにcart_detail関数を追加しましょう。

_cart_id関数は、Cartオブジェクトの中にセッション情報の有無を確認し、セッション情報が無い場合は、新しくセッションを生成します。

こうすることで、セッションごとにCartオブジェクトを作れる、つまりは他のユーザーから自分のカートの中身を分離できるようにしました。

テストを実行します。

cart.htmlがないとのことなので、作成してみましょう。

テストを実行しましょう。

OKですね。

では、cart.htmlの中身を書きましょう。

「localhost:8000/cart」にアクセスして、画面を確認しましょう。

個別CSSも適用します。

Todoリストの③が消せますね。

Todoリスト ①Cartモデルの作成
②CartItemモデルの作成
③一覧表示できるようにする
④商品追加ができるようにする
⑤商品削除、一括削除ができるようにする

商品追加機能の実装

方針がブレてしまいますが、ここからはテストコードを書かずに、実装をメインに記述します(すみません)。

views.pyに以下を記述してください。

urls.pyにこの関数へのパスを書きます。

product_detail.htmlにこのURLのパスを追加します。

localhost:8000/にアクセス後、商品の詳細ページに飛び、Add to Cartを押下してみてください。

問題なく表示されましたでしょうか?

これで、Todoリストの④が削除できますね。

Todoリスト ①Cartモデルの作成
②CartItemモデルの作成
③一覧表示できるようにする
④商品追加ができるようにする
⑤商品削除、一括削除ができるようにする

削除機能を実装する。

最後に、cartから商品を削除する機能を実装しましょう。

urls.pyも修正します。

商品を数えるためのpythonファイルを用意します。

これは、Cartの中に入っている商品をカウントする処理です。

settings.pyを開いて、このプロフェッサーを追加しましょう。

navbarを修正します。

最後にcart.htmlに削除機能へのリンクを張って終わりです。

これで、Todoリストの⑤が消せますね。

Todoリスト ①Cartモデルの作成
②CartItemモデルの作成
③一覧表示できるようにする
④商品追加ができるようにする
⑤商品削除、一括削除ができるようにする

動作確認をしましょう。Shopping Cartに商品を追加して、一覧を表示します。

今は、合計7商品入ってますね。バナナの-ボタンをクリックしてみます。

バナナが一つカートから消えましたね。

バナナのバケツボタンをクリックしてみます。

バナナが消えました。アップルのバケツボタンもクリックしてみます。

動作は問題ない様ですね。

参考書籍

終わりに

お疲れ様でした!今回でショッピングカートの開発は終了です!

これだけできれば、色々なDjangoのアプリ開発に挑戦できると思いますよ^^

コメントを残す