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