- Django E-commerce Website Frontend (Part 1)
I want to share to you how to make django ecommerce website. This gonna be a long tutorial but i hope you enjoyed it. I am inspired by Django E-commerce tutorial by Dennis Ivy. You can check it out on https://www.youtube.com/watch?v=_ELCMngbM0E&list=PL-51WBLyFTg0omnamUjL1TCVov7yDTRng&index=2.
First we have to do some setup and installation with django and you have to run this code.
pip install django
django-admin startproject ecommerce
cd ecommerce
python manage.py startapp storeThen you have to add ‘store.apps.StoreConfig’ to INSTALLED_APPS on settings.py. Next try to run the server.
Now we want to add the templates to our ecommerce website. Make a new directory file named template inside store directory and then make a new directory file inside template named store.
We want to add different templates in our ecommerce website. There are main, store, cart, and checkout. All we have to do is add html file inside store directory that we have made before named “main.html”, “store.html”, “cart.html”, “checkout.html”. And inside store.html, cart.html, and checkout.html, add <h3>Store</h3> on store.html, <h3>Cart</h3> on cart.thml, and <h3>Checkout</h3> on checkout.html.
Next go to the views.py and write this code :
from django.shortcuts import render
def store(request):
context = {}
return render(request, 'store/store.html', context)
def cart(request):
context = {}
return render(request, 'store/cart.html', context)
def checkout(request):
context = {}
return render(request, 'store/checkout.html', context)Now we have to setup our urls, make a new file inside store directory (not inside the template directory) named urls.py and type this code :
from django.urls import path
from . import views
urlpatterns = [
path('', views.store, name='store'),
path('cart/', views.cart, name='cart'),
path('checkout/', views.checkout, name='checkout'),
]Next go to the ecommerce/urls.py and type the bold part :
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path ('', include('store.urls'))
]Run the code and try to open the cart and checkout html. It works properly. Next we want to configure our static files. Before going to the next step, we have to setup the virtual environment. Run this on your terminal :
pip install virtualenv
virtualenv env
env\Scripts\activate
pip install djangoNext you have to make a new directory like this :
Go to the settings.py, we want to add static directory. Go to the bottom and type this code :
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]Now type this code on main.css that we have made before :
body {
background-color: blue;
}And type this code on store.html (the bold part) and try to run the server (python manage,py runserver) :
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<h3>Store</h3>Type this code on your main.html , and remove the code on main.css:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Ecom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/
bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1" />
</head>
<body>
<h1>Navbar</h1>
<hr>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>As you can see i use bootstrap for the frontend on our website. You can copy the code on https://getbootstrap.com/. Type this code on store.html, cart.html, and checkout.html to inherit the code from main.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<h3>Store</h3>
{% endblock content %}Do the same on cart.html and checkout.html. Now we want to add our navbar from bootstrap, open this link https://getbootstrap.com/docs/4.0/components/navbar/#supported-content and paste all the code on the main.html.
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Ecom</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>Change this
<nav class="navbar navbar-expand-lg navbar-light bg-light">To this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">Try to run the code and there you have a navbar with dark background. Now we want to customize our navbar. From the main.html above we have to delete and add several codes. Follow this on your main.html :
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Ecom</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'store' %}">Ecom</a>
<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 active">
<a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<a href="#"class="btn btn-warning">Login</a>
<a href="{% url 'cart' %}">
<img id="cart-icon" src="{% static 'images/cart.png' %}">
</a>
<p id="cart-total">0</p>
</div>
</div>
</nav>
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>And then add an image (cart image) to our static image files. Download the cart image from this url https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png and save it inside the static/images folder. Take a minute to view your code and make sure it works properly.
We may have a broken navbar like this and all we have to do is customize our css files. Type this code on main.css :
body{
background-color: hsl(0, 0%, 98%);
}
h1,h2,h3,h4,h5,h6{
color:hsl(0, 0%, 30%);
}
.box-element{
box-shadow:hsl(0, 0%, 80%) 0 0 16px;
background-color: #fff;
border-radius: 4px;
padding: 10px;
}
.thumbnail{
width: 100%;
height: 200px;
-webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
-moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
}
.product{
border-radius: 0 0 4px 4px;
}
.bg-dark{
background-color: #4f868c!important;
}
#cart-icon{
width:25px;
display: inline-block;
margin-left: 15px;
}
#cart-total{
display: block;
text-align: center;
color:#fff;
background-color: red;
width: 20px;
height: 25px;
border-radius: 50%;
font-size: 14px;
}
.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12{
margin-top: 10px;
}
.btn{
border-radius: 0;
}
.row-image{
width: 100px;
}
.form-field{
width:250px;
display: inline-block;
padding: 5px;
}
.cart-row{
display: flex;
align-items: flex-stretch;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ececec;
}
.quantity{
display: inline-block;
font-weight: 700;
padding-right:10px;
}
.chg-quantity{
width: 12px;
cursor: pointer;
display: block;
margin-top: 5px;
transition:.1s;
}
.chg-quantity:hover{
opacity: .6;
}
.hidden{
display: none!important;
}So maybe it is going too long and i will continue this tutorial on the next part. Next part we will do the code on store.html, cart.html and checkout.html. Stay tune!
Credit : Dennis Ivy’s Youtube https://www.youtube.com/watch?v=_ELCMngbM0E&list=PL-51WBLyFTg0omnamUjL1TCVov7yDTRng&index=2
