How to Add Cart in a Web Page using Django?

Adding a shopping cart to a web page using Django is a crucial step when building an e-commerce website or any other application that involves online transactions. A shopping cart allows users to collect and manage items they want to purchase before proceeding to checkout. In this tutorial, we’ll walk you through the process of creating a basic shopping cart using Django, including all the necessary files and HTML templates.

Steps Add Cart in a Web Page using Django

Setup and Installation

To install Django follow these steps.

To start the project use this command

django-admin startproject ecommerce
cd ecommerce

To start the app use this command.

python manage.py startapp cart

Now add this app to the ‘settings.py’.

model.py: Here we have created a Product table with name, description, and price, image field in the table. Whereas, The CartItem model represents items added to the shopping cart by users.

Python3

from django.db import models
from django.contrib.auth.models import User
class Product(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField(null=True)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='products/')

    def __str__(self):
        return self.name

class CartItem(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.PositiveIntegerField(default=0)
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    date_added = models.DateTimeField(auto_now_add=True)

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

admin.py: Here we are registering our table in the admin.

Python3

from django.contrib import admin
from .models import Product, CartItem

admin.site.register(Product)
admin.site.register(CartItem)

views.py: The cart/views.py code contains views that handle various aspects of the shopping cart functionality in a Django application. Here’s a brief explanation of each view:

• product_list(request): This view fetches a list of products from the database and renders a template to display them. Each product is shown with its name, price, and an “Add to Cart” button.
• view_cart(request): This view displays the contents of the shopping cart. It retrieves the cart items associated with the current user, calculates the total price of the items in the cart, and then renders a template to display the cart items along with the total price.
• add_to_cart(request, product_id): When a user clicks the “Add to Cart” button on a product, this view is triggered. It adds the selected product to the user’s cart. If the product is already in the cart, it increments the quantity. It then redirects the user to the cart view to display the updated cart contents.
• remove_from_cart(request, item_id): This view handles the removal of an item from the cart. It takes the item’s ID as a parameter, retrieves the corresponding cart item, and deletes it from the database. After removal, it redirects the user to the cart view to reflect the updated cart.

Python3

from django.shortcuts import render, redirect
from .models import Product, CartItem

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

def view_cart(request):
    cart_items = CartItem.objects.filter(user=request.user)
    total_price = sum(item.product.price * item.quantity for item in cart_items)
    return render(request, 'myapp/cart.html', {'cart_items': cart_items, 'total_price': total_price})

def add_to_cart(request, product_id):
    product = Product.objects.get(id=product_id)
    cart_item, created = CartItem.objects.get_or_create(product=product,
                                                       user=request.user)
    cart_item.quantity += 1
    cart_item.save()
    return redirect('cart:view_cart')

def remove_from_cart(request, item_id):
    cart_item = CartItem.objects.get(id=item_id)
    cart_item.delete()
    return redirect('cart:view_cart')


def home(request):
    return HttpResponse('Hello, World!')

Creating GUI

index.html: It is used to display a list of products with “Add to Cart” buttons.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Catalog</title>
    <style>
        /* Add CSS styles for flex container and items */
        .product-list {
            display: flex;
            flex-wrap: wrap; /* Allow items to wrap to the next row if necessary */
            justify-content: space-between; /* Space items evenly along the main axis */
            list-style: none; /* Remove list styles */
            padding: 0;
        }

        .product-item {
            flex: 1; /* Grow to fill available space evenly */
            max-width: 30%; /* Limit item width to avoid overcrowding */
            margin: 10px; /* Add spacing between items */
            border: 1px solid #ccc; /* Add a border for visual separation */
            padding: 10px;
            text-align: center;
        }

        /* Style the "Buy Now" button */
        .buy-now-button {
            display: block;
            margin-top: 10px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Product Catalog</h1>

    <ul class="product-list">
        {% for product in products %}
            <li class="product-item">
                <img src="{{ product.image.url }}" alt="{{ product.name }}" width="200" height="150">
                <h2>{{ product.name }}</h2>
                <p>{{ product.description }}</p>
                <p>Price: ${{ product.price }}</p>
                <a href="#" class="buy-now-button">Buy Now</a>
                <a class="buy-now-button" href="{% url 'cart:add_to_cart' product.id %}">Add to Cart</a>

            </li>
        {% endfor %}
    </ul>
</body>
</html>

cart.html: Display the shopping cart, allow item removal, and calculate the total price.

HTML

<!-- cart/cart.html -->

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Add CSS styles for flex container and items */
        .product-list {
            display: flex;
            flex-wrap: wrap; /* Allow items to wrap to the next row if necessary */
            justify-content: space-between; /* Space items evenly along the main axis */
            list-style: none; /* Remove list styles */
            padding: 0;
        }

        .product-item {

            flex: 1; /* Grow to fill available space evenly */
             /* Limit item width to avoid overcrowding */
            margin: 10px; /* Add spacing between items */
            border: 1px solid #ccc; /* Add a border for visual separation */
            padding: 10px;
            text-align: center;
        }

        /* Style the "Buy Now" button */
        .buy-now-button {
            display: block;
            margin-top: 10px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>

<body>

    <h1>Your Shopping Cart</h1>

    <div class="product-list">



    {% for item in cart_items %}
    <div class="product-item">
        <p>{{ item.product.name }} ({{ item.quantity }})</p>
        <p>Price: ${{ item.product.price }}</p>
        <a href="{% url 'cart:remove_from_cart' item.id %}">Remove</a>
    </div>
    {% empty %}
    <p>Your cart is empty.</p>
    {% endfor %}

    </div>

    <p>Total Price: ${{ total_price }}</p>

    <a href="{% url 'cart:product_list' %}">Continue Shopping</a>

</body>

</html>

urls.py: Define the URL patterns in the urls.py file of the cart app to map views to URLs.

Python3

from django.urls import path
from . import views

app_name = 'cart'

urlpatterns = [
    path('', views.product_list, name='product_list'),
    path('/home', views.home, name='home'),
    path('cart/', views.view_cart, name='view_cart'),
    path('add/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
    path('remove/<int:item_id>/', views.remove_from_cart, name='remove_from_cart'),
]

urls.py: Add the necessary URL patterns for serving media files in your project’s urls.py.

Python3

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('cart.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Setting Up Static and Media Files

Configure Django to serve static and media files during development. In your project’s settings.py file, add the following:

# Static files (CSS, JavaScript, images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
# Media files (uploaded user files)
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / "media"

Deployement of the Project

Run these commands to apply the migrations:

python manage.py makemigrations 
python manage.py migrate

Run the server with the help of following command:

python manage.py runserver

Now, Go to the http://127.0.0.1:8000/admin/ and add the Images, name and its description.

Output