Djangoroidの奮闘記

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

Django e-commerce part16 Product Detail Layout

Product Detailのレイアウトを整える。

product_detail.html をbootstarp風に修正する。

{% extends "base.html" %}

{% block content %}
<div class='row'>

    <div class='col-sm-8'>
    <h2>{{ object.title }}</h2>
    <p class='lead'>{{ object.description }}</p>
    </div>

    <!-- Product SideBar -->
    <div class='col-sm-4'>
    <h3>{{ object.price }}</h3>
    {% if object.variation_set.count > 1 %}
    <select class='form-control'>
    {% for vari_obj in object.variation_set.all %}
    <option value="{{ vari_obj.id }}">{{ vari_obj }}</option>
    {% endfor %}

    </select>

    {% endif %}
    <br/>
    <a href="#">Add to Cart</a>
    </div>
</div>

{% endblock %}

<div class='row'></div>

<div class='col-sm-8'></div>

<div class='col-sm-4'></div>

の挿入がハイライトかな。

product_detailにrelated productsを表示する。

以下のような感じで、add to cartの下あたりに入れておく。

...
    <br/>
    <a href="#">Add to Cart</a>

    <br/>
    <br/>
    <h4>Realated Products</h4>

    </div>
    <!-- End Product SideBar -->
...