Django e-commerce part29 Improve UI

UIを修正する

product_detai.html を修正

bootstrapのこのCustomContentのThumbnailを使っていく。

とりあえず、exampleをそのまま貼り付け

    {% for product in related %}

    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>

related productsのコードを少し修正

    <h4>Realated Products</h4>

    {% for product in related %}
    <div class="thumbnail text-center">
    <h4><a href='{{ product.get_absolute_url }}'>{{ product.title }}</a></h4>
        {% if product.get_image_url %}
        <a href='{{ product.get_absolute_url }}'><img id='img' class='img-responsive' src='{{ product.get_image_url }}' /></a></br>
        {% endif %}
    </div>
    {% endfor %}

さらに修正

    <h4>Realated Products</h4>
    <div class='row'>
    {% for product in related %}
    <div class='col-xs-6'>
        <div class="thumbnail text-center">
        <h4><a href='{{ product.get_absolute_url }}'>{{ product.title }}</a></h4>
            {% if product.get_image_url %}
            <a href='{{ product.get_absolute_url }}'><img id='img' class='img-responsive' src='{{ product.get_image_url }}' /></a></br>
            {% endif %}
        </div>
    </div>
    {% cycle '' '</div><div class="row">'%}
    {% endfor %}

cycleに関しては、２個目で、改行して新しいrowを作るという意味。

product_list.html　にもthumbnail追加

{% extends "base.html" %}

{% block content %}

<h1>All Products </h1>

<div class='row'>
{% for product in object_list %}

<div class='col-xs-4'>
    <div class="thumbnail text-center">
    <h4><a href='{{ product.get_absolute_url }}'>{{ product.title }}</a></h4>
        {% if product.get_image_url %}
        <a href='{{ product.get_absolute_url }}'><img id='img' class='img-responsive' src='{{ product.get_image_url }}' /></a></br>
        {% endif %}
    </div>
</div>
{% cycle '' '' '</div><div class="row">'%}

{% endfor %}
</div>
{% endblock %}

rowのサイズと、cycleを少し変えている。

category_detail.html　のproductにも適用する。

{% extends "base.html" %}


{% block content %}

<h3>{{ object }}</h3>

<div class='row'>
{% for product in products %}

<div class='col-xs-4'>
    <div class="thumbnail text-center">
    <h4><a href='{{ product.get_absolute_url }}'>{{ product.title }}</a></h4>
        {% if product.get_image_url %}
        <a href='{{ product.get_absolute_url }}'><img id='img' class='img-responsive' src='{{ product.get_image_url }}' /></a></br>
        {% endif %}
    </div>
</div>
{% cycle '' '' '</div><div class="row">'%}

{% endfor %}
</div>

{% endblock %}