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 --> ...