Django E-commerce Website Frontend (Part 2)
Now let’s continue our tutorial. In this tutorial we will code on store.html, cart.html, and checkout.html. 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 you have to download this image for our reference to our website : https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt7/2+placeholder.png. Save it inside the static/images same as the cart image before. Type this code on store.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
</div>
</div>
</div>
{% endblock content %}Next we want to finish it up with adding a button. Type the bold part on store.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
</div>
</div>
</div>
{% endblock content %}Next is we want to add view button and dummy price. Type the bold part on store.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block;float: right">20$</h4>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block;float: right">20$</h4>
</div>
</div>
<div class="col-lg-4">
<img class="thumbnail" src="{% static 'images/placeholder.png' %}">
<div class="box-element product">
<h6><strong>Product</strong></h6>
<hr>
<button class="btn btn-outline-secondary add-btn">Add to Cart</button>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block;float: right">20$</h4>
</div>
</div>
</div>
{% endblock content %}Now, we are going to cart.html. But first, you have to download arrow up and down icon on this url https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt8/2+arrow-down.png, https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt8/3+arrow-up.png. Save it inside the static/images same as the cart image before. We will make two part on cart page. For the first part, type this code on cart.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-12">
<div class="box-element">
<a class="btn btn-outline-dark" href="{% url 'store' %}←
Continue Shopping</a>
<br>
<br>
<table class="table">
<tr>
<th><h5>Items: <strong>3</strong></h5></th>
<th><h5>Total: <strong>43$</strong></h5></th>
<th>
<a style="float:right; margin:5px" class="btn btn-success"
href="{% url 'checkout' %}">Checkout</a>
</th>
</tr>
</table>
</div>
<br>
<div class="box-element">
</div>
</div>
</div>
{% endblock content %}There is a ← in this code, this is a html code to left arrow. You can check the others on https://www.w3schools.com/charsets/ref_utf_arrows.asp. Try to run the code. Next we are going to do the second part. Type the bold part on your cart.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-12">
<div class="box-element">
<a class="btn btn-outline-dark" href="{% url 'store' %}">← Continue Shopping</a>
<br>
<br>
<table class="table">
<tr>
<th><h5>Items: <strong>3</strong></h5></th>
<th><h5>Total:<strong> $42</strong></h5></th>
<th>
<a style="float:right; margin:5px;" class="btn btn-success" href="{% url 'checkout' %}">Checkout</a>
</th>
</tr>
</table>
</div>
<br>
<div class="box-element">
<div class="cart-row">
<div style="flex:2"></div>
<div style="flex:2"><strong>Item</strong></div>
<div style="flex:1"><strong>Price</strong></div>
<div style="flex:1"><strong>Quantity</strong></div>
<div style="flex:1"><strong>Total</strong></div>
</div>
<div class="cart-row">
<div style="flex:2"><img class="row-image" src="{% static 'images/placeholder.png' %}"></div>
<div style="flex:2"><p>Product 1</p></div>
<div style="flex:1"><p>$20</p></div>
<div style="flex:1">
<p class="quantity">2</p>
<div class="quantity">
<img class="chg-quantity" src="{% static 'images/arrow-up.png' %}">
<img class="chg-quantity" src="{% static 'images/arrow-down.png' %}">
</div>
</div>
<div style="flex:1"><p>$40</p></div>
</div>
</div>
</div>
</div>
{% endblock content %}Next we are going to checkout.html. We will make two parts on it. One part is for name, email and shipping information and the other contains order information. For the first part type this code on checkout.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-6">
<div class="box-element" id="form-wrapper">
<form id="form">
<div id="user-info">
<div class="form-field">
<input required class="form-control" type="text" name="name" placeholder="Name..">
</div>
<div class="form-field">
<input required class="form-control" type="text" name="email" placeholder="Email..">
</div>
</div>
<div id="shipping-info">
<hr>
<p>Shipping Information:</p>
<hr>
<div class="form-field">
<input class="form-control" type="text" name="address" placeholder="Address..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="city" placeholder="City..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="state" placeholder="State..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="zipcode" placeholder="Zipcode..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="country" placeholder="Country..">
</div>
</div>
<hr>
<input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
</form>
</div>
</div>
<div class="col-lg-6">
<div class="box-element">
</div>
</div>
</div>
{% endblock content %}For the second part that contains order information, type this code on checkout.html :
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-lg-6">
<div class="box-element" id="form-wrapper">
<form id="form">
<div id="user-info">
<div class="form-field">
<input required class="form-control" type="text" name="name" placeholder="Name..">
</div>
<div class="form-field">
<input required class="form-control" type="text" name="email" placeholder="Email..">
</div>
</div>
<div id="shipping-info">
<hr>
<p>Shipping Information:</p>
<hr>
<div class="form-field">
<input class="form-control" type="text" name="address" placeholder="Address..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="city" placeholder="City..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="state" placeholder="State..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="zipcode" placeholder="Zipcode..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="country" placeholder="Country..">
</div>
</div>
<hr>
<input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
</form>
</div>
<br>
<div class="box-element hidden" id="payment-info">
<small>Paypal Options</small>
</div>
</div>
<div class="col-lg-6">
<div class="box-element">
<a class="btn btn-outline-dark" href="{% url 'cart' %}">←
Back to Cart</a>
<hr>
<h3>Order Summary</h3>
<hr>
<div class="cart-row">
<div style="flex:2"><img class="row-image" src="{% static 'images/placeholder.png' %}"></div>
<div style="flex:2"><p>Product 1</p></div>
<div style="flex:1"><p>$20.00</p></div>
<div style="flex:1"><p>x2</p></div>
</div>
<h5>Items: 2</h5>
<h5>Total: $40</h5>
</div>
</div>
</div>
{% endblock content %}Then our website page will look like this
That’s it for this tutorial, now you have a frontend template to your ecommerce website. Of course we still have a lot work to do to setup backend part. I dont know if i will continue this tutorial for the backend part, so you can just mention me if you guys want it. I hope you guys enjoy this tutorial. Keep improve yourself!!
Credit : Dennis Ivy’s Youtube https://www.youtube.com/watch?v=_ELCMngbM0E&list=PL-51WBLyFTg0omnamUjL1TCVov7yDTRng&index=2.
