E-Commerce Website Using Django Framework with Free Code


Introduction

Creating an e-commerce website involves more than just displaying products online; it requires handling user authentication, managing a shopping cart, processing orders, and maintaining an admin interface for managing products and sales. The Django framework, with its robust architecture and built-in features, is perfect for building such complex applications. In this tutorial, we will guide you step-by-step to build a basic e-commerce website using Django, complete with source code.

Core Features

  • User Authentication: Sign up, login, and logout functionalities for users.
  • Product Catalog and Search: Displaying products with a search function.
  • Shopping Cart: A cart where users can add and review products before purchasing.
  • Checkout Process: Capturing user details and processing orders.
  • Admin Dashboard: Managing products, categories, and orders from the admin panel.

Technologies Used

  • Django: A sophisticated web framework for Python that promotes quick development.
  • HTML/CSS: For creating the front-end structure and styling.
  • SQLite: The default database provided by Django for development purposes.
  • Django Templates: Django’s powerful templating engine for rendering dynamic content.
See also  Basic Calculator in Python with Source Code

Setting Up

1. Installing Django

pip install django

2.Building a New App and Django Project

django-admin startproject ecommerce_site
cd ecommerce_site
django-admin startapp shop

3. Setting Up the Project Structure

Your project structure should look like this:

ecommerce_site/
│
├── ecommerce_site/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
│
├── shop/
│   ├── migrations/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── views.py
│   ├── urls.py
│
├── templates/
│   └── shop/
│       ├── base.html
│       ├── product_list.html
│       ├── product_detail.html
│
└── manage.py

Creating Models

In shop/models.py, specify the e-commerce site’s models:

from django.db import models
from django.contrib.auth.models import User

class Category(models.Model):
    name = models.CharField(max_length=100)
    slug = models.SlugField(unique=True)

    def __str__(self):
        return self.name

class Product(models.Model):
    category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
    name = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='products/')

    def __str__(self):
        return self.name

class Order(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    total_price = models.DecimalField(max_digits=10, decimal_places=2)

class OrderItem(models.Model):
    order = models.ForeignKey(Order, related_name='items', on_delete=models.CASCADE)
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.PositiveIntegerField()

    def __str__(self):
        return f'{self.quantity} of {self.product.name}'

Setting Up the Admin Dashboard

In shop/admin.py, register your models so you can manage them in the Django admin:

from django.contrib import admin
from .models import Category, Product, Order, OrderItem

admin.site.register(Category)
admin.site.register(Product)
admin.site.register(Order)
admin.site.register(OrderItem)

Building Views and Templates

from django.shortcuts import render, get_object_or_404
from .models import Product

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

def product_detail(request, slug):
    product = get_object_or_404(Product, slug=slug)
    return render(request, 'shop/product_detail.html', {'product': product})

1. Creating Views for Product Listing and Details

In shop/views.py, create views for listing products and viewing product details:

2. Designing Templates with Django Template Language

Create product_list.html and product_detail.html in the templates/shop/ directory:

<!-- product_list.html -->
{% extends 'shop/base.html' %}

{% block content %}
<h1>Product List</h1>
<div class="product-grid">
    {% for product in products %}
        <div class="product-card">
            <img src="{{ product.image.url }}" alt="{{ product.name }}">
            <h3>{{ product.name }}</h3>
            <p>${{ product.price }}</p>
            <a href="{% url 'product_detail' product.slug %}">View Details</a>
        </div>
    {% endfor %}
</div>
{% endblock %}
<!-- product_detail.html -->
{% extends 'shop/base.html' %}

{% block content %}
<div class="product-detail">
    <img src="{{ product.image.url }}" alt="{{ product.name }}">
    <h1>{{ product.name }}</h1>
    <p>${{ product.price }}</p>
    <p>{{ product.description }}</p>
    <form method="post">
        {% csrf_token %}
        <button type="submit">Add to Cart</button>
    </form>
</div>
{% endblock %}

Implementing the Shopping Cart

1. Adding Products to the Cart

In shop/views.py, create a view to handle adding products to the shopping cart.

See also  School Management System in Python with Free Source Code

2. Viewing and Updating the Cart

Create a template and view for displaying the cart contents and allowing users to update quantities or remove items.

Creating the Checkout Process

Capture user details and handle order processing. For real payments, you can integrate third-party services like Stripe.

User Authentication and Profile Management

Make advantage of the authentication mechanism that Django has built-in to let users register, log in, and access their profiles, which include their order histories.

Deploying

Prepare the site for production by configuring settings and choosing a hosting service such as Heroku or AWS. Make sure your static and media assets are served correctly and set up a production database (such as PostgreSQL).

e-commerce website with django
django e-commerce
django e-commerce tutorial
e-commerce website using django source code
django e-commerce website source code
e-commerce website with django and python
e commerce website using django
E-Commerce Website Using Django Framework with Source Code
django commerce
e-commerce website django

1 comment

Post Comment