Create Ecomercee Template in Django

Django Template

A Django template is a text document or a Python string marked-up using the Django template language. Some constructs are recognized and interpreted by the template engine. The main ones are variables and tags.

A template is rendered with a context. Rendering replaces variables with their values, which are looked up in the context, and executes tags. Everything else is output as is.

The syntax of the Django template language involves four constructs.

Django Template: Best Practice

Here is A tips for best practice using django templates

Keep Templates Mostly in templates/

keep the majority of our templates in the main ‘templates/’ directory. We put subdirectories in ‘templates/’ to correspond to each of our apps, as shown here:

templates/
   ├── base.html
   ├── ... (other sitewide templates in here)
   ├── freezers/
   │   ├── ("freezers" app templates in here)

However, some tutorials advocate putting templates within a subdirectory of each app.

templates
└── accounts
    ├── base.html
    ├── customer.html
    ├── dashboard.html
    ├── partials
    │   ├── navbar.html
    │   └── status.html
    └── products.html

in some case that the extra nesting is a pain to deal with

directory structure Complex templates can be used if the app uses different base.html from other apps

Template Architecture Patterns

From Two Scoops of Django 3 I found that for our purposes, simple 2-tier or 3-tier template architectures are ideal. The difference in tiers is how many levels of template extending needs to occur before con- tent in apps is displayed like

2-Tier Template Architecture Example

templates/
   ├── base.html
   ├── dashboard.html # extends base.html
   ├── profiles/
   │   ├── profile_detail.html # extends base.html
   │   ├── profile_form.html # extends base.html

This is best for sites with a consistent overall layout from app to app.

3-Tier Template Architecture Example

With 3 Tier Template Architecture

Each app has a base_<app_name>.html template. App-level base templates share a common parent base.html template.
Templates within apps share a common parent base_<app_name>.html template.
Any template at the same level as base.html inherits base.html.

templates/
       base.html
       dashboard.html # extends base.html
       profiles/
           base_profiles.html # extends base.html
           profile_detail.html # extends base_profiles.html
           profile_form.html # extends base_profiles.html

The 3-tier architecture is best for websites where each section requires a distinctive layout. For example, a news site might have a local news section, a classified ads section, and an events section. Each of these sections requires its own custom layout.

Create Template for our Project

let’s create the template

create templates/accounts/ directory for our template and create base.html inside it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>
        {% block title %}
            
        {% endblock title %}
    </title>
</head>
<body>
    <!-- navbar -->
    {% include 'accounts/partials/navbar.html' %}
    <!-- end navbar -->

    {% block contents %}
    
    {% endblock contents %}

    <!-- footer -->

    <!-- end footer -->

    <!-- scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

Creating Partials Directory

partials directory used for splitting part of html like footer, navbar and etc, like component on react like this

backend/accounts/templates/accounts/partials
├── navbar.html
└── status.html

now inside partials create navbar.html

{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <img src="{% static 'images/logo.png' %}" width="180" height="80" alt="" srcset="">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

Status Section

now create status.html inside partials directory to display delivery status

{% load static %}

<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<div class="row">
    <div class="col">
        <div class="col-md">
            <div class="card text-center text-white mb-3" id="total-orders">
                <div class="card-header">
                    <h3 class="card-title">Total Order</h3>
                </div>
                <div class="card-body">
                    <h5 class="card-title"></h5>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="col-md">
            <div class="card text-center text-white mb-3" id="orders-delivered">
                <div class="card-header">
                    <h5 class="card-title">Order Delivered</h5>
                </div>
                <div class="card-body">
                    <h5 class="card-title"></h5>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="col-md">
            <div class="card text-center text-white mb-3" id="orders-pending">
                <div class="card-header">
                    <h5 class="card-title">Order Pending</h5>
                </div>
                <div class="card-body">
                    <h5 class="card-title"></h5>
                </div>
            </div>
        </div>
    </div>
</div>

Extend The Partials Component to Dashboard Template

and let’s create dashboard.html on templates/accounts and extend the partials to dashboard

{% extends 'accounts/base.html' %}


{% block title %}
    
{% endblock title %}


{% block contents %}
    <div class="container mt-4">
        <!-- status section -->
    {% include 'accounts/partials/status.html' %}
    <!-- end status -->

   <!-- dashboard section -->
   
   <div class="row">
       <div class="col-md-5">
           <h5></h5>
           <div class="card card-body">
               <a href="" class="btn btn-primary btn-block btn-sm">Create Customer</a>
               <table class="table table-sm">
                   <tr>
                       <th>Order</th>
                       <th>Customer</th>
                   </tr>
               </table>
           </div>
       </div>
       <div class="col-md-7">
           <h5></h5>
           <div class="card card-body">
               <a href="" class="btn btn-primary btn-block btn-sm">Create Order</a>
               <table class="table table-sm">
                   <tr>
                       <th>Product</th>
                       <th>Date Ordered</th>
                       <th>Status</th>
                       <th>Update</th>
                       <th>Remove</th>
                   </tr>
               </table>
           </div>
       </div>
   </div>
   <!-- end dashboard  -->
    </div>
{% endblock contents %}

and let’s show the result like this

Create Product Template

Now after create dashboard create a product page to manage product order, create products.html on templates/accounts directory

{% extends 'accounts/base.html' %}


{% block title %}
    
{% endblock title %}


{% block contents %}
    <div class="row">
        <div class="col-md">
            <div class="card card-body">
                <table class="table">
                    <tr>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Price</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
{% endblock contents %}

and let’s check the result

Create Customer Page

after create the product page let’s create the customer page to manage customer, create customer.html

{% extends 'accounts/base.html' %}


{% block title %}

{% endblock title %}


{% block contents %}
<div class="row">
    <div class="col-md">
        <div class="card card-body">
            <h5>Customer:</h5>
            <hr>
            <a class="btn btn-outline-info  btn-sm btn-block" href="">Update Customer</a>
            <a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete Customer</a>

        </div>
    </div>

    <div class="col-md">
        <div class="card card-body">
            <h5>Contact Information</h5>
            <hr>
            <p>Email: </p>
            <p>Phone: </p>
        </div>
    </div>

    <div class="col-md">
        <div class="card card-body">
            <h5>Total Orders</h5>
            <hr>
            <h1 style="text-align: center;padding: 10px"></h1>
        </div>
    </div>
</div>


<br>
<div class="row">
    <div class="col">
        <div class="card card-body">
            <form method="get">

                <button class="btn btn-primary" type="submit">Search</button>
            </form>
        </div>
    </div>

</div>
<br>

<div class="row">
    <div class="col-md">
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>Product</th>
                    <th>Category</th>
                    <th>Date Orderd</th>
                    <th>Status</th>
                    <th>Update</th>
                    <th>Remove</th>
                </tr>

            </table>
        </div>
    </div>
</div>
{% endblock contents %}