Introduction

In this tutorial, we will learn how to build an E-commerce site using Django, a powerful web framework for Python. By the end of this tutorial, you will have a functioning E-commerce site that allows users to browse products, add them to a cart, and complete their purchase.

Prerequisites

Before starting this tutorial, you should have a basic understanding of Python programming language. Familiarity with HTML and CSS will also be helpful but not required.

Setup and Installation

To get started, you need to have Python installed on your machine. You can download the latest version of Python from the official website and follow the installation instructions for your operating system.

Once Python is installed, you can use the built-in package manager, pip, to install Django. Open your terminal/command prompt and run the following command: bash pip install django

Creating a Django Project

To create a new Django project, open your terminal/command prompt and navigate to the directory where you want to create your project. Then run the following command: bash django-admin startproject ecommerce_site This command will create a new directory named ecommerce_site with the necessary files to start your Django project.

Creating Models

Models in Django represent the data structure of your application. In our E-commerce site, we need models to represent products, users, and orders. Create a new file named models.py in the ecommerce_site directory and define the following models: ```python from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=8, decimal_places=2)
    description = models.TextField()

class User(models.Model):
    username = models.CharField(max_length=50)
    email = models.EmailField()
    password = models.CharField(max_length=50)

class Order(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    products = models.ManyToManyField(Product)
    total_price = models.DecimalField(max_digits=8, decimal_places=2)
``` In the `Product` model, we have fields for the name, price, and description of each product. The `User` model represents a registered user with a username, email, and password. The `Order` model keeps track of the user who placed the order, the products in the order, and the total price.

Creating Views

Views in Django handle requests from the user and return responses. Create a new file named views.py in the ecommerce_site directory and define the following views: ```python from django.shortcuts import render from .models import Product

def home(request):
    products = Product.objects.all()
    return render(request, 'home.html', {'products': products})

def product_detail(request, product_id):
    product = Product.objects.get(id=product_id)
    return render(request, 'product_detail.html', {'product': product})

def add_to_cart(request, product_id):
    # Code to add selected product to the cart
    return render(request, 'cart.html')

def checkout(request):
    # Code to process the checkout and complete the purchase
    return render(request, 'checkout.html')
``` The `home` view retrieves all products from the database and renders the `home.html` template, passing the products as a context variable. The `product_detail` view retrieves a specific product based on the `product_id` and renders the `product_detail.html` template with the product data. The `add_to_cart` view handles adding a product to the cart, and the `checkout` view processes the checkout process.

Creating Templates

Templates in Django define the structure and layout of your web pages. Create a new directory named templates inside the ecommerce_site directory. Inside the templates directory, create the following HTML templates:

home.html

```html

{% for product in products %}
<div class="product">
    <h2>{{ product.name }}</h2>
    <p>{{ product.price }}</p>
    <a href="{% url 'product_detail' product.id %}">View Details</a>
</div>
{% endfor %}

``` ### product_detail.html
```html

<h2>{{ product.name }}</h2>
<p>{{ product.price }}</p>
<p>{{ product.description }}</p>
<a href="{% url 'add_to_cart' product.id %}">Add to Cart</a>

``` ### cart.html
```html

<!-- Cart contents here -->

``` ### checkout.html
```html

<!-- Checkout form and process here -->

``` ## Adding Functionality

To make the views and templates work together, we need to define the URLs and connect them in the urls.py file. Add the following code to the urls.py file inside the ecommerce_site directory: ```python from django.urls import path from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('product/<int:product_id>/', views.product_detail, name='product_detail'),
    path('add_to_cart/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
    path('checkout/', views.checkout, name='checkout'),
]
``` This code maps the URLs to the respective views and assigns them names for easy reference in the templates.

Finally, to run your E-commerce site, navigate to the ecommerce_site directory in your terminal/command prompt and run the following command: bash python manage.py runserver You can then access your site in the browser at http://localhost:8000/.

Conclusion

In this tutorial, we have learned how to build an E-commerce site using Django. We covered the basics of creating models, views, and templates in Django, and connected them with URLs to create a functioning site. You can further enhance the site by adding authentication, payment integration, and more features.

Django provides a robust framework for building web applications, and with this knowledge, you can explore and create more advanced projects. Happy coding!

Published: 17 November 2021

Python Programming: Building an E-commerce Site with Django

Table of Contents