Create Ecommerce Website with Django

Here is a step-by-step guide to help you create an E-commerce website with Django. Our E-commerce Support team is ready to assist.

E-commerce Website with Django: A Step-by-Step Guide

Are you looking to build your e-commerce website using Python? Django is a powerful web framework that makes it easier than ever to create scalable and secure applications.

Today, we will explore how to build a simple Django-based e-commerce site that displays products and enables basic cart functionality.

What is Django?

Django is a high-level Python web framework designed to help developers build reliable web applications quickly and with a clean design. It handles the complexity of web development so we can focus on building features rather than reinventing the wheel. Additionally, Django is a free and open-source framework.

What is E-Commerce?

E-commerce, or electronic commerce, refers to buying and selling goods or services online. It includes everything from ordering physical products from online stores to digital services, all of which are handled via internet transactions. As online shopping continues to grow, building your own e-commerce platform is a valuable skill and a great way to understand web development fundamentals.

Project Overview

Today, we will create a basic Django e-commerce web app. The app will allow users to:

• Browse products
• Add or remove items from a shopping cart
• Check out and place orders

While the core functionality is straightforward, this project lays a solid foundation for building a comprehensive e-commerce site.

Prerequisites

Before we begin, we need these tools:

• Django (latest version)
• Anaconda (optional for creating virtual environments)
• PIP (Python package manager)
• Visual Studio Code (optional code editor)
• MDB E-commerce template (for styling if desired)

Step-by-Step Guide

Step 1. Set Up Your Django Project

First, open the terminal and create a new Django project:

pip install django
django-admin startproject myshop
cd myshop
Copy Code

Step 2. Create the Inventory App

Now, we need to create a new app within the project:

python manage.py startapp inventoryCopy Code

Then, register the app in `settings.py`:

INSTALLED_APPS = [
...
'inventory',
]
Copy Code

Step 3. Build the Model

Next, open `inventory/models.py` and define the data model:

from django.db import models
class Item(models.Model):
title = models.CharField(max_length=120)
cost = models.DecimalField(max_digits=8, decimal_places=2)
summary = models.TextField()
photo = models.ImageField(upload_to='items/', blank=True, null=True)
def __str__(self):
return self.title
Copy Code

Step 4. Make It Admin-Friendly

Then, register the model in `inventory/admin.py`:

from django.contrib import admin
from .models import Item
admin.site.register(Item)
Copy Code

Step 5. Configure Media for Images

Now add the following to the `settings.py` file:

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
Copy Code

Step 6. Handle Media in URLs

Now, make sure the project’s urls.py is configured to serve media files during development:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('inventory/', include('inventory.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Copy Code

Step 7. Migrate and Create a Superuser

Then, we need to create the needed database tables by running migrations:

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
Copy Code

Now, start the development server:

python manage.py runserverCopy Code

Now go to http://127.0.0.1:8000/admin to log in and add sample items.

Step 8. Display Products on the Frontend

Next, create a View in `inventory/views.py`, to display products on the front end:

from django.shortcuts import render
from .models import Item
def item_gallery(request):
items = Item.objects.all()
return render(request, 'inventory/gallery.html', {'items': items})
Copy Code

Now, we need to add a URL Pattern in `inventory/urls.py`. We can create the file if it doesn’t exist:

from django.urls import path
from .views import item_gallery
urlpatterns = [
path('', item_gallery, name='item_gallery'),
]
Copy Code

Now, add a templates/products/product_list.html file to showcase the products.

<!DOCTYPE html>
<html>
<head>
<title>Item Gallery</title>
</head>
<body>
<h1>Available Items</h1>
<ul>
{% for item in items %}
<li>
<h2>{{ item.title }}</h2>
<p>{{ item.summary }}</p>
<p>Price: ${{ item.cost }}</p>
{% if item.photo %}
<img src="{{ item.photo.url }}" alt="{{ item.title }}" width="180">
{% endif %}
</li>
{% endfor %}
</ul>
</body>
</html>
Copy Code

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

Django’s modular design and built-in admin make it a perfect choice for quickly launching a web application. This provides a solid foundation for building a fully functional online store.

In short, our Support Engineers demonstrated with a step-by-step guide how to create an E-commerce website with Django.