Q&A
djangoでwebアプリを作る練習をしています。
街のお店を紹介するようなアプリを想定して作っているのですが、お店ごとに商品を表示させることができず行き詰っています。
index.htmlでお店の一覧が見れるようになっていて、「詳しく」を押すとdetail.htmlに飛ぶようにしています。そしてそれぞれのdetail.html (detail/1, detail/2, detail/3)でそれぞれの商品をリストで表示させたいです。ただ、実際にやろうとするとdetail/1, detail/2, detail/3それぞれ全てのProductsオブジェクトを表示させてしまいます。
詳しくは以下の画像を見ていただけるとよりわかりやすいかと思います。
pk1でもpk2でもpk3でも全てのproductsを表示させてしまうのを、pkと同じshop_idのもののみをそのpkで表示させたいと言うことです。
python
1#models.py 2 3from django.db import models 4 5# Create your models here. 6class Shop(models.Model): 7 #お店の概要 8 shop_name = models.CharField(verbose_name="店の名前", max_length=30) 9 shop_place = models.CharField(verbose_name="店の場所", max_length=60) 10 shop_style = models.CharField(verbose_name="お店の種類", max_length=10) 11 shop_describe = models.TextField(verbose_name="お店の詳細説明", max_length=300, default="説明がありません") 12 website = models.URLField(verbose_name="お店のホームページ", blank=True, null=True) 13 #photo1は縦横5:7の画像にするとぴったり 14 photo1 = models.ImageField(verbose_name="写真1", blank=True, null=True) 15 photo2 = models.ImageField(verbose_name="写真1", blank=True, null=True) 16 photo3 = models.ImageField(verbose_name="写真1", blank=True, null=True) 17 18 class Meta: 19 verbose_name_plural = "店舗情報" 20 21 def __str__(self): 22 return self.shop_name 23 24 25class Products(models.Model): 26 shop = models.ForeignKey(Shop, on_delete=PROTECT) 27 product = models.CharField(verbose_name="商品名", max_length=20, unique=True) 28 price = models.IntegerField(verbose_name="価格") 29 product_detail = models.TextField(verbose_name="商品説明", max_length=150, blank=True, null=True) 30 #画像サイズは縦横2:3がベスト 31 product_photo = models.ImageField(verbose_name="商品写真") 32 33 class Meta: 34 verbose_name_plural = "商品情報" 35 36 def __str__(self): 37 return self.product
python
1#index.html 2 3{% extends "base.html" %} 4{% load static %} 5 {% block header %} 6 <!-- Responsive navbar--> 7 <!-- Page Content--> 8 <div class="container px-4 px-lg-5"> 9 <!-- Heading Row--> 10 <div class="row gx-4 gx-lg-5 align-items-center my-5"> 11 <div class="col-lg-7"><img class="img-fluid rounded mb-4 mb-lg-0" src="{% static 'image/けやき通り.jpg' %}" alt="..." width="990" height="400" /></div> 12 <div class="col-lg-5"> 13 <h1 class="font-weight-light"><u>題名を記述</u></h1> 14 <p>説明文を記述</p> 15 <a class="btn btn-primary" href="#!">会員登録する！</a> 16 </div> 17 </div> 18 <!-- Call to Action--> 19 <div class="card text-white bg-secondary my-5 py-4 text-center"> 20 <div class="card-body"><p class="text-white m-0">〜人気店や店舗情報をご紹介〜</p></div> 21 </div> 22 {% endblock %} 23 {% block main %} 24 <!-- Content Row--> 25 <div class="row gx-4 gx-lg-5"> 26 {% for object in object_list %} 27 <div class="col-md-4 mb-5"> 28 <div class="card h-100"> 29 <div class="card-body"> 30 <h2 class="card-title">{{ object.shop_name| truncatechars:10 }}</h2> 31 <img src="{{ object.photo1.url }}" alt="" height=250 width=350> 32 <p class="card-text mt-3">{{ object.shop_describe| truncatechars:100}}</p> 33 </div> 34 <div class="card-footer"><a class="btn btn-primary btn-sm" href="{% url 'shoplist:detail' object.pk %}">詳しく</a></div> 35 </div> 36 </div> 37 {% empty %} 38 <p>登録されているお店がありません</p> 39 {% endfor %} 40 </div> 41 {% endblock %} 42 {% block footer %} 43 {% endblock %}
python
1#detail.html 2 3{% extends "base.html" %} 4{% load static %} 5 {% block header %} 6 <!-- Responsive navbar--> 7 <!-- Header--> 8 <header class="bg-dark py-5"> 9 <div class="container px-4 px-lg-5 my-5"> 10 <div class="text-center text-white"> 11 <h1 class="display-4 fw-bolder">{{ ここに個別のお店の名前を表示したい }}</h1> 12 <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p> 13 </div> 14 </div> 15 </header> 16 {% endblock %} 17 {% block main %} 18 <!-- Section--> 19 <section class="py-5"> 20 <div class="container px-4 px-lg-5 mt-5"> 21 <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center"> 22 <!--ここからが商品1--> 23<!--商品をお店ごとに表示したい--> 24 {% for object in object_list %} 25 <div class="col mb-5"> 26 <div class="card h-100"> 27 <!-- Product image--> 28 <img class="card-img-top" src="{{ object.product_photo.url}}" alt="..." /> 29 <!-- Product details--> 30 <div class="card-body p-4"> 31 <div class="text-center"> 32 <!-- Product name--> 33 <h5 class="fw-bolder">Fancy Product</h5> 34 <!-- Product price--> 35 $40.00 - $80.00 36 </div> 37 </div> 38 <!-- Product actions--> 39 <div class="card-footer p-4 pt-0 border-top-0 bg-transparent"> 40 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div> 41 </div> 42 </div> 43 </div> 44 {% endfor %} 45 <!--ここまでが1商品--> 46 </div> 47 </div> 48 </section> 49 {% endblock %} 50 {% block footer %} 51 {% endblock %}
python
1#urls.py 2 3from django.urls import path 4from .views import IndexView, ShopDetailView, CreateInfoView 5 6app_name = "shoplist" 7urlpatterns = [ 8 path("", IndexView.as_view(), name="index"), 9 path("detail/<int:pk>", ShopDetailView.as_view(), name="detail"), 10]
python
1#views.py 2 3from django.views import generic 4from .models import Shop, Products 5from .forms import CreateInfoForm 6# Create your views here. 7 8class IndexView(generic.ListView): 9 model = Shop 10 template_name = "index.html" 11 12class ShopDetailView(generic.ListView): 13 model = Products 14 template_name = "detail.html"
get_queryset？を使うのかなとも思ったのですが、具体的にどこから手をつければ良いのかわからず質問させていただきました。よろしくお願いします。
回答1件
0
ベストアンサー
ShopDetailViewをDetailViewから派生させて、店の製品のクエリセットを渡すのはどうでしょうか。
テンプレートでは、製品のクエリセットをproductsで参照できます。
ただし、製品の表示にページネーションを使用する場合は、ListViewの方が良いと思います。
python
1class ShopDetailView(generic.DetailView): 2 model = Shop 3 template_name = "detail.html" 4 5 def get_context_data(self, **kwargs): 6 context = super().get_context_data(**kwargs) 7 context['products'] = Product.objects.filter(shop=self.object) 8 return context
投稿2021/10/01 02:59
総合スコア1277
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/05 07:29
2021/10/05 23:16
2021/10/06 03:09