Django e-commerce part31 Featured Product on Homepage

フィーチャーされた商品の表示

models.py に、ProductFeatured のclassを追加する。

def image_upload_to_featured(instance, filename):
    title = instance.product.title
    slug = slugify(title)
    basename, file_extension = filename.split(".")
    new_filename = "%s-%s.%s" %(slug, instance.id, file_extension)
    return "products/%s/featured/%s" %(slug, new_filename)

class ProductFeatured(models.Model):
    product = models.ForeignKey(Product)
    image = models.ImageField(upload_to=image_upload_to_featured)
    title = models.CharField(max_length=120, null=True, blank=True)
    text = models.CharField(max_length=220, null=True, blank=True)
    text_right = models.BooleanField(default=False)
    show_price = models.BooleanField(default=False)
    active = models.BooleanField(default=True)

    def __str__(self):
        return self.product.title

• image_upload_to_featuredは、image_upload_toを下敷きに、/featured/を挟んである。

python manage.py makemigrations, migrateする

admin.py に追加する。

admin.site.register(ProductFeatured)

newsletter/views.py に、productfeatured viewを追加していく。

なぜ、newsletter/views.py 　なのかは、home.html のviewがあるから。

...
from products.models import ProductFeatured

def home(request):
    title = 'Sign Up Now'
    featured_image = ProductFeatured.objects.first()
...
    context = {
        "title": title,
        "form": form,
        "featured_image": featured_image,
    }
...

featured_image に、ProductFeaturedのinstanceの一番トップのものを代入する。

home.html のjumbotronのところを修正する。

featured_imageがある場合は、featured_imageの画像などを表示させる。

{% block jumbotron %}
 {% if not request.user.is_authenticated %}

{% if featured_image %}
    <div class="jumbotron">
     <div class="container">
        <div class="row">
            <div class='col-sm-6'>
            <h1>{{ featured_image.product.title }}</h1>
            <p>{{ featured_image.product.description }}</p>
            <p>
            <a class="btn btn-lg btn-primary" href="{{ featured_image.product.get_absolute_url }}" role="button">詳細はこちら</a>
            </p>
            </div>
            <div class='col-sm-6' >
                <img src="{{ featured_image.image.url }}" class='img-responsive' />
            </div>
            </div>
        </div>
     </div>
{% else %}
    <div class="jumbotron">
     <div class="container">
        <div class="row">
            <div class='col-sm-6'>
            <h1>Try Django 1.8</h1>
            <p>The MVP Landing project is designed to get your project started. The goal is to help you launch as soon as possible with the least amount of investment using time or money. Join Us today.</p>
            <p>
            <a class="btn btn-lg btn-primary" href="" role="button">Join Us &raquo;</a>
            </p>
            </div>
            <div class='col-sm-6' >
                <iframe width="560" height="315" src="https://www.youtube.com/embed/2uLYO1LUf6Q" frameborder="0" allowfullscreen></iframe>

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

products/models.py ProductFeaturedに、make_image_background を追記する。

class ProductFeatured(models.Model):
    make_image_background = models.BooleanField(default=False)

これはjumbotronに、background imageを挿入するかどうかを決める箇所。

home.html にmake_image_backgroundに関するコードを追加する

<style>
{% block style %}
.navbar-static-top {
    margin-bottom: 0px !important;
}

.jumbotron {
    background-color:#97e77a;
    color: #FFF;

    {% if featured_image.make_image_background %}
    background-image: url("{{ featured_image.image.url }}");
    background-repeat: no-repeat;
    background-color: rgb(0, 0, 0);
    background-size: cover;
    background-position-y: -200px;
    {% endif %}
}

{% endblock %}
</style>

models.py のProductFeaturedに、追加する。

カラーの数値を入れておいて、アイテムによって変わったbackground colorを設定できるようにしておく。

class ProductFeatured(models.Model):
    text_css_color = models.CharField(max_length=6, null=True, blank=True)

home.html を修正

make_back_ground がfalseの場合に、右側のカラムは表示させる。

{% if featured_image %}
    <div class="jumbotron">
     <div class="container">
        <div class="row">
            <div class='col-sm-6 {% if featured_image.text_right %} pull-right {% endif %}'>
            <h1>{{ featured_image.product.title }}</h1>
            <p>{{ featured_image.product.description }}</p>
            <p>
            <a class="btn btn-lg btn-primary" href="{{ featured_image.product.get_absolute_url }}" role="button">詳細はこちら</a>
            </p>
            </div>
            {% if not featured_image.make_image_background %}
            <div class='col-sm-6' >
                <img src="{{ featured_image.image.url }}" class='img-responsive' />
            </div>
            {% endif %}
            </div>
        </div>
     </div>
{% else %}

newsletter/views.py も修正

featured_imageの順番を変える。ランダムにする。これは便利かも。

def home(request):
    title = 'Sign Up Now'
    featured_image = ProductFeatured.objects.filter(active=True).order_by("?").first()