Django e-commerce part34 Product Lists on Hompage
HOMEに商品を表示させる
newsletter/views.py の編集
ここで編集するのは2つ。
- products = Product.objects.all() を、context
- is_authenticated の箇所を削除する。
def home(request): title = 'Sign Up Now' featured_image = ProductFeatured.objects.filter(active=True).order_by("?").first() products = Product.objects.all() form = SignUpForm(request.POST or None) context = { "title": title, "form": form, "featured_image": featured_image, "products": products } if form.is_valid(): #form.save() #print request.POST['email'] #not recommended instance = form.save(commit=False) full_name = form.cleaned_data.get("full_name") if not full_name: full_name = "New full name" instance.full_name = full_name # if not instance.full_name: # instance.full_name = "Justin" instance.save() context = { "title": "Thank you" } return render(request, "home.html", context)
home.html を編集する。
{% include "products/product_list.html" with object_list=products %} を追記する。
{% block content %} {% include "products/product_list.html" with object_list=products %} {% if request.user.is_authenticated %} <h1>You are logged in!</h1>
navbarがもう一つできてしまうので、それをちょっと修正する。
products/products.htmlを作成する
products_list.html から、productsの表示の部分をカットして、新たに、products.htmlを作成する。
products.html をinclude して、products_listでは、商品を表示させる。
products.html
<div class='row'> {% for product in object_list %} <div class='col-xs-4'> {% include "products/product_thumbnail.html" with product=product price="True" %} </div> {% cycle '' '' '</div><div class="row">'%} {% endfor %} </div>
products.html
{% extends "base.html" %} {% block content %} <h1>全ての商品 <small><a href='{% url 'categories' %}'>カテゴリー</a></small> </h1> {% include "products/products.html" with object_list=object_list %} {% endblock %}
home.html にproducts.html をincludeする。
{% block content %} {% include "products/products.html" with object_list=products %} {% if request.user.is_authenticated %}
products.html のcolum を動的にする。
- カラムのサイズを調節する。
<div class='row'> {% for product in object_list %} <div class='col-xs-4 {{ col_class_set }}'> {% include "products/product_thumbnail.html" with product=product price="True" %} </div> {% if not col_class_set %} {% cycle '' '' '</div><div class="row">'%} {% endif %} {% endfor %} </div>
- home.html のincludeに、col_class_setの代入を追記する。
{% include "products/products.html" with object_list=products col_class_set="col-sm-2" %}
表示する商品を絞るために、views.pyを修正する。
スライスを使う。
def home(request): title = 'Sign Up Now' featured_image = ProductFeatured.objects.filter(active=True).order_by("?").first() products = Product.objects.all().order_by("?")[:6]
あと、余計な部分もコメントアウトしておく。
別の商品リストも追加してみる。
- views.py に、また別のproductsのobject_listを作る
products2 = Product.objects.all().order_by("?")[:6]
- home.htmlにそれを追加してみる。
<div class='row'> <h3>オススメの商品</h3> {% include "products/products.html" with object_list=products col_class_set="col-sm-2" %} </div> <div class='row'> <h3>この商品がすごい!</h3> {% include "products/products.html" with object_list=products2 %} </div>
※ここでは違いがわかりやすいようにcol_class_setも外してみる。