商品詳細画面を作成します。

URL

詳細画面の URL を追加します。

slugを URL をとして使用します。

app/urls.py

from django.urls import path
from app import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('product/<slug>', views.ItemDetailView.as_view(), name='product'), # 追加
]

ビュー

詳細画面のビューを作成します。

app/views.py

class ItemDetailView(View):
    def get(self, request, *args, **kwargs):
        item_data = Item.objects.get(slug=self.kwargs['slug'])
        return render(request, 'app/product.html', {
            'item_data': item_data
        })

テンプレート

product

詳細画面のテンプレートを作成します。

app/templates/app/product.html

{% extends 'app/base.html' %} {% block content %}
<div class="my-5">
  <div class="row product">
    <div class="col-md-6 mb-4 text-center">
      <img src="{{ item_data.image.url }}" alt="" class="img-fluid" />
    </div>

    <div class="col-md-6 mb-4">
      <div class="card">
        <div class="card-body px-2 py-1">
          <h3>{{ item_data.title }}</h3>
          <p class="mb-3">{{ item_data.category }}</p>
          <hr />
          <p>
            価格:<span class="text-danger font-weight-bold"
              >{{ item_data.price }}円</span
            >
          </p>
          <p class="font-weight-bold">商品説明</p>
          <p>{{ item_data.description|linebreaksbr }}</p>
          <a href="" class="btn btn-primary">カートに入れる</a>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

コード解説

objectでアイテム情報を取得します。

linebreaksbrで改行を認識するようにします。

<p>{{ object.description|linebreaksbr }}</p>

index

詳細画面へのリンクをはります。

app/templates/app/index.html

<a class="stretched-link" href="{% url 'product' item.slug %}"></a>

CSS

CSS で詳細画面を装飾します。

app/static/css/style.css

/* product */

.product img {
  height: 350px;
  object-fit: contain;
}

確認

商品リストで商品をクリックすると詳細画面が表示されます。

商品詳細