Django開発~ショッピングカート構築編3~商品詳細ページの作成

django

Django開発~ショッピングカート構築編2~商品一覧作成②の続きです。

今回は、商品の詳細ページを作成しましょう。

商品詳細ページの仕様

最初に商品詳細ページの仕様を固めましょう。

商品一覧の中から好きな商品をクリックすると詳細ページに遷移できるようにします。

その為に実装しなければならないことを書き出してみます。

Todoリスト

①商品一覧から画像をクリックすると詳細ページに遷移する
②urlを商品毎の詳細ページ用URLに変更する
例)「localhost:8000/」 -> 「localhost:8000/product_name」
③商品詳細ページを作成する

それでは、Todoリストにしたがって、実装を開始しましょう。

KOUKI
KOUKI

テスト駆動開発に慣れてきたと思いますので、今回からはToddoリストを作成しています。

実装

テスト駆動開発を実践しつつ、実装していきましょう。

URLリンクのテスト

最初はテストコードからです。

まずは、URLリンクのテストを行います。

テストを実行します。

2つエラーが出ました。ひとまず、「AttributeError: ‘Product’ object has no attribute ‘get_url’」の方を対処します。

get_urlは、商品のURLを取得するためのものなのですが、まだ実装していません。

models.pyを開きましょう。

これで、先ほどのエラーは無くなるはずです。

今度は、404エラーになりました。ページが見つからないようです。

shop/urls.pyに商品詳細ページへのURLを追加してみましょう。

テストを実行します。

テスト結果が変わりましたね。

views.pyにproduct_detail関数を追加しましょう。

商品のslugから対象の商品データを取得した後、product_detail.htmlに商品データを返却する実装をしました。

テストを実行します。

エラーが変わりました。

shop/product_detail.htmlを作成します。

テストを実行します。

テストがパスしました。

これで、Todoリストの②を消すことができます。

Todoリスト

①商品一覧から画像をクリックすると詳細ページに遷移する
②urlを商品毎の詳細ページ用URLに変更する
例)「localhost:8000/」 -> 「localhost:8000/product_name」
③商品詳細ページを作成する

商品一覧の修正

商品一覧に詳細ページへのリンクを張りましょう。

「localhost:8000」にアクセスし、画像をクリックして、商品詳細画面に遷移できたら成功です。

これで、Todoリストの①を消せます。

Todoリスト

①商品一覧から画像をクリックすると詳細ページに遷移する
②urlを商品毎の詳細ページ用URLに変更する
例)「localhost:8000/」 -> 「localhost:8000/product_name」
③商品詳細ページを作成する

商品詳細ページの作成

最後に詳細ページを作成して終わりにしましょう。

先ほど作成したproduct_detail.htmlを開いて、詳細ページを作っていきましょう。

画面をリロードしてみてください。
※商品一覧が表示されている場合は、詳細ページに移動してください。

商品詳細ページが表示されたら成功です。

これで、Todoリストの最後の項目が完了しました。

Todoリスト

①商品一覧から画像をクリックすると詳細ページに遷移する
②urlを商品毎の詳細ページ用URLに変更する
例)「localhost:8000/」 -> 「localhost:8000/product_name」
③商品詳細ページを作成する

残件対応

ずっと放置していたエラーの対処をしましょう。エラーは、次のようなメッセージを出していました。

どうやら、前回、imageプロパティを追加した時にデグレが発生したようです

以下の方法で回避してください。

エラー内容は、「imageプロパティに紐付くファイルが指定されていない」ことを意味していると思われるので、ダミーファイル(test.png)を指定しました。

test.pngは実体のないファイルであり、自分で用意する必要はありません。

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

テストがパスしましたね^^

今回は、ここまでにしましょう。

参考書籍

次回

次回は、Bootstrapで画面を整えていこうと思います。

コメントを残す