Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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も外してみる。