Django開発~ショッピングカート構築編4~BootStrap導入④

Django開発~ショッピングカート構築編3~商品詳細ページの作成の続きです。

Django開発~ショッピングカート構築編3~商品詳細ページの作成

今日は、BootStrapの導入を試みます。

実は、base.htmlにBootStrapを使うためのCDNをすでに埋め込んでいるため、今回は、BootStrapのタグを埋め込んでいく作業になります。

KOUKI

BootStrapの基礎については、この記事を参考にしてください。

Bootstrap ~基礎編~

<目次>

学習履歴

Django学習記録

base.htmlの修正

まずは、base.htmlを修正しましょう。

app/shop/templates/base.html


{% load staticfiles %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="{% block metadescription %}{% endblock %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="container"><!-- new -->
        {% include 'header.html' %}
        {% include 'navbar.html' %}
        {% block content %}
        {% endblock %}
    </div>
    {% include 'footer.html' %}
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

app/shop/templates/base.html

{% load staticfiles %}

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock %}</title>

</head>

<body>

{% include 'header.html' %}

{% include 'navbar.html' %}

{% block content %}

{% endblock %}

</div>

{% include 'footer.html' %}

</body>

</html>

BootStrapのcontainerタグを埋め込みました。

header.htmlの修正

続いて、ヘッダーを変更します。

app/shop/templates/header.html


{% load staticfiles %}
<header>
    <center>
        <a href="{% url 'shop:all_product' %}"><img src="{% static 'img/logo.png' %}" alt="Perfect Cushion Store" width="100" height="100" class="rounded-circle"></a>
    </center>
</header>

app/shop/templates/header.html

{% load staticfiles %}

</center>

</header>

ヘッダーは、Topページへのリンクを貼りました。また、画像の高さと幅を小さくし、枠外を丸くしました。

navbar.html

続いて、ナビゲーションバーを修正しましょう。

app/shop/templates/navbar.html


<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown {% if 'shop' in request.path %}active{% endif %}">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'shop:all_product' %}">All Products</a>
                    {% for product in products %}
                    <a class="dropdown-item" href="{{product.get_url}}">{{product.name}}</a>
                    {% endfor %}
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Your Cart()</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

app/shop/templates/navbar.html

</button>

Shop

</a>

<a class="dropdown-item" href="{% url 'shop:all_product' %}">All Products</a>

{% for product in products %}

<a class="dropdown-item" href="{{product.get_url}}">{{product.name}}</a>

{% endfor %}

</div>

</li>

</li>

</ul>

<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

画面を表示させるとナビゲーションバーにBootStrapが適用されていることがわかります。

しかし、すこし不格好なので、個別CSSを作成して修正しましょう。

mkdir app/static/css

touch app/static/css/custom.css

mkdir app/static/css

touch app/static/css/custom.css

app/static/css/custom.css

.nav-item{
    letter-spacing: .2em;
    font-size: 14px;
    text-transform: uppercase;
}

.dropdown-itme{
    font-size: 14px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Google Font */
body {
    font-family: 'Roboto', sans-serif;
}

app/static/css/custom.css

.nav-item{

letter-spacing: .2em;

font-size: 14px;

text-transform: uppercase;

}

.dropdown-itme{

font-size: 14px;

letter-spacing: .2em;

text-transform: uppercase;

}

/* Google Font */

body {

font-family: 'Roboto', sans-serif;

}

base.htmlにこのファイルへのリンクを張ります。また、GoogleFontも使いたいので、GoogleFontのCDNもついでに張っておきましょう。

<head>
...
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<head>

...

</head>

画面をリロードしてヘッダーを確かめてください。

footer.htmlの修正

フッターも変更します。

app/shop/templates/footer.html

<div class="footer navbar-fixed-bottom my_footer">
    <p class="text-center">© ShoppingCart, With, Django</p>
</div>

app/shop/templates/footer.html

<p class="text-center">© ShoppingCart, With, Django</p>

</div>

custom.cssにもスタイルを追加しましょう。

app/static/css/custom.css

/* footer */
.my_footer{
    background-color: #f8f9fa;
    height: 60px;
}

.my_footer p {
    padding-top: 20px;
    font-size: 14px;
}

app/static/css/custom.css

/* footer */

.my_footer{

background-color: #f8f9fa;

height: 60px;

}

.my_footer p {

padding-top: 20px;

font-size: 14px;

}

pruduct_list.htmlの修正

product_list.htmlも修正します。

app/shop/templates/shop/product_list.html


{% extends "base.html" %}
{% load staticfiles %}
{% block metadescription %}
   {% if category %}
{{ category.description|truncatewords:155 }}
   {% else %}
        Welcome to the cushion store where you can buy comfy and awesome cushions.
   {% endif %}
{% endblock %}
{% block title %}
   {% if category %}
{{ category.name }} - Perfect Cushion Store
   {% else %}
        See Our Cushion Collection - Perfect Cushion Store
   {% endif %}
{% endblock %}
{% block content %}

<div class="row mx-auto my-2">
    <div class="col-12">
        <img src="{% static 'img/banner.jpg' %}" alt="Our Products Collection" class="img-fluid">
    </div>
</div>
<br>
<div class="row">
    <div class="col-12">
        <h1>Our Products Collection</h1>
        <p>Finding the perfect cushion for your room can instantly add to the levels of comfort and sense of style throughout your home.</p>
    </div>
</div>


<div class="row">
    {% for product in products %}
    <div class="col-4">
        <a href="{{product.get_url}}"><img src="{{product.image.url}}" alt="{{product.name}}" width="300" height="200"></a>

        <div>
            <h4>{{product.name}}</h4>
            <p>£{{product.price}}</p>
        </div>
    </div>
    {% endfor %}
</div>

{% endblock %}

app/shop/templates/shop/product_list.html

{% extends "base.html" %}

{% load staticfiles %}

{% block metadescription %}

{% if category %}

{% else %}

Welcome to the cushion store where you can buy comfy and awesome cushions.

{% endif %}

{% endblock %}

{% block title %}

{% if category %}

{{ category.name }} - Perfect Cushion Store

{% else %}

See Our Cushion Collection - Perfect Cushion Store

{% endif %}

{% endblock %}

{% block content %}

</div>

<br>

<h1>Our Products Collection</h1>

<p>Finding the perfect cushion for your room can instantly add to the levels of comfort and sense of style throughout your home.</p>

</div>

{% for product in products %}

<div>

<h4>{{product.name}}</h4>

<p>£{{product.price}}</p>

</div>

{% endfor %}

</div>

{% endblock %}

画面をリロードしてみましょう。尚、私は新たに、バナナとオレンジをデータとして追加しました。

product_detail.htmlの修正

商品詳細ページも修正しておきましょう。

app/shop/templates/shop/product_detail.html


{% extends "base.html" %}
{% load staticfiles %}
{% block metadescription %}
{{ product.description|truncatewords:155 }}
{% endblock %}
{% block title %}
{{ product.name }} - Perfect Cushion Store
{% endblock %}
{% block content %}
<div class="row my_prod_row_class">
    <div class="mx-auto">
        <p><a href="{% url 'shop:all_product' %}">Home</a>|<a href="{{ product.get_url }}">{{product.name}}</a></p>
    </div>
    <div class="container">
        <br>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 text-center">
                <div style="min-width: 18rem">
                    <img src="{{product.image.url}}" alt="{{product.name}}">
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                <div>
                    <h1 class="my_prod_title">{{product.name}}</h1>
                    <p>￡{{product.price}}</p>
                    <p class="my_title">Product Description</p>
                    <p class="text-justify my_prod_text">{{product.description}}</p>
                    {% if product.stock <= 0 %}
                    <p class="text-justify my_prod_text"><b>Out of Stock</b></p>
                    {% else %}
                    <a class="btn btn-secondary" href="">Add to Cart</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

app/shop/templates/shop/product_detail.html

{% extends "base.html" %}

{% load staticfiles %}

{% block metadescription %}

{% endblock %}

{% block title %}

{{ product.name }} - Perfect Cushion Store

{% endblock %}

{% block content %}

<p><a href="{% url 'shop:all_product' %}">Home</a>|<a href="{{ product.get_url }}">{{product.name}}</a></p>

</div>

<br>

</div>

<div>

<h1 class="my_prod_title">{{product.name}}</h1>

<p>￡{{product.price}}</p>

<p class="my_title">Product Description</p>

<p class="text-justify my_prod_text">{{product.description}}</p>

{% if product.stock <= 0 %}

<p class="text-justify my_prod_text"><b>Out of Stock</b></p>

{% else %}

{% endif %}

</div>

custom.cssにも以下の設定を追加します。

app/static/css/custom.css


/* Product Page */
.my_prod_row_class{
    padding-top: 15px;
    padding-bottom: 20px;
}
.my_prod_row_class .mx-auto p{
    color: #000;
    font-size: 12px;
}
.my_prod_row_class .mx-auto p a{
    color: #000;
    font-size: 12px;
    text-decoration: none;
}
.my_prod_title{
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding-top: 15px;
    padding-bottom: 10px;
}
.my_prod_text{
    padding-right: 20px;
}

app/static/css/custom.css

/* Product Page */

.my_prod_row_class{

padding-top: 15px;

padding-bottom: 20px;

}

.my_prod_row_class .mx-auto p{

color: #000;

font-size: 12px;

}

.my_prod_row_class .mx-auto p a{

color: #000;

font-size: 12px;

text-decoration: none;

}

.my_prod_title{

font-size: 16px;

text-transform: uppercase;

letter-spacing: .2em;

padding-top: 15px;

padding-bottom: 10px;

}

.my_prod_text{

padding-right: 20px;

}

画面をリロードしてください。少しはまし？になりましたね。

FontAwosomeの導入

FontAwosomeを導入してみましょう。

base.htmlのheadタグ内にFontAwosomeのCDNを埋め込んでください。

app/shop/templates/base.html


<head>
...
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>

</head>

app/shop/templates/base.html

<head>

...

</head>

navbarの「Search」のbuttonタグを以下のhtmlと置き換えて下さい。

app/shop/templates/navbar.html


<button class="btn btn-secondary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>

app/shop/templates/navbar.html

同じくnavbarの「Your Cart()」を以下のhtmlに置き換えてください。

app/shop/templates/navbar.html


<a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>

app/shop/templates/navbar.html

画面をリロードしましょう。

これで一通り、デザイン変更は終了です。お疲れ様でした。

参考

Test-Driven Development with PythonObey the Testing Goat: Using Django, Selenium, and JavaScript【電子書籍】[ Harry Percival ]

楽天で購入

次回

次回は、ページネーションを実装します。

Django開発~ショッピングカート構築編5~ページネーションの導入

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Django開発~ショッピングカート構築編4~BootStrap導入

学習履歴

base.htmlの修正

header.htmlの修正

navbar.html

footer.htmlの修正

pruduct_list.htmlの修正

product_detail.htmlの修正

FontAwosomeの導入

参考

次回

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

学習履歴

base.htmlの修正

header.htmlの修正

navbar.html

footer.htmlの修正

pruduct_list.htmlの修正

product_detail.htmlの修正

FontAwosomeの導入

参考

次回

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[まとめ]Webpackの使い方2

お勧めの言語シリーズ3 ～JavaScript～

[React]useContextの使い方メモ

CSSで要素をページ中央に持っていくもっとも"簡単"な方法

Kubernetes(k8s)を学ぼう! Microservices編~Re…

[React]~Ambassador画面:ソースコードをまとめます!~

[golang]アプリ開発~デジタル時計を作ろう!~

Go言語とPostgreSQLで遊ぼう!~Unit Test編~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル