Bài 35: E-commerce Practice Project (Part 2)

Shopping Cart Models

Cart App Models

# cart/models.pyfrom django.db import modelsfrom django.contrib.auth.models import Userfrom products.models import Product, ProductVariantfrom decimal import Decimal class Cart(models.Model):    """Giỏ hàng lưu trong database"""    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='cart')    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        def __str__(self):        return f'Cart for {self.user.username}'        def get_total_price(self):        """Tính tổng giá trị giỏ hàng"""        return sum(item.get_subtotal() for item in self.items.all())        def get_total_items(self):        """Đếm tổng số sản phẩm"""        return sum(item.quantity for item in self.items.all())        def clear(self):        """Xóa tất cả items"""        self.items.all().delete() class CartItem(models.Model):    """Sản phẩm trong giỏ hàng"""    cart = models.ForeignKey(Cart, on_delete=models.CASCADE, related_name='items')    product = models.ForeignKey(Product, on_delete=models.CASCADE)    variant = models.ForeignKey(        ProductVariant,        on_delete=models.CASCADE,        null=True,        blank=True    )    quantity = models.PositiveIntegerField(default=1)    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        class Meta:        unique_together = ['cart', 'product', 'variant']        def __str__(self):        return f'{self.quantity}x {self.product.name}'        def get_price(self):        """Lấy giá sản phẩm"""        if self.variant:            return self.variant.final_price        return self.product.price        def get_subtotal(self):        """Tính tổng tiền item"""        return self.get_price() * self.quantity        def can_add_quantity(self, quantity=1):        """Kiểm tra có thể thêm số lượng không"""        if self.variant:            available_stock = self.variant.stock        else:            available_stock = self.product.stock        return (self.quantity + quantity) <= available_stock

Accounts App Models

# accounts/models.pyfrom django.db import modelsfrom django.contrib.auth.models import Userfrom django.db.models.signals import post_savefrom django.dispatch import receiver class UserProfile(models.Model):    """Thông tin người dùng"""    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='profile')    phone = models.CharField(max_length=20, blank=True)    avatar = models.ImageField(upload_to='profiles/', blank=True)    date_of_birth = models.DateField(null=True, blank=True)        # Default shipping address    address_line1 = models.CharField(max_length=300, blank=True)    address_line2 = models.CharField(max_length=300, blank=True)    city = models.CharField(max_length=100, blank=True)    state = models.CharField(max_length=100, blank=True)    postal_code = models.CharField(max_length=20, blank=True)    country = models.CharField(max_length=100, blank=True, default='Vietnam')        created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        def __str__(self):        return f'Profile for {self.user.username}'        @property    def full_address(self):        address_parts = [            self.address_line1,            self.address_line2,            self.city,            self.state,            self.postal_code,            self.country,        ]        return ', '.join(filter(None, address_parts)) @receiver(post_save, sender=User)def create_user_profile(sender, instance, created, **kwargs):    """Tự động tạo profile khi tạo user"""    if created:        UserProfile.objects.create(user=instance) @receiver(post_save, sender=User)def save_user_profile(sender, instance, **kwargs):    """Tự động lưu profile khi lưu user"""    instance.profile.save() class Wishlist(models.Model):    """Danh sách yêu thích"""    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='wishlist')    products = models.ManyToManyField('products.Product', related_name='wishlisted_by')    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        def __str__(self):        return f'Wishlist for {self.user.username}'        def add_product(self, product):        """Thêm sản phẩm vào wishlist"""        self.products.add(product)        def remove_product(self, product):        """Xóa sản phẩm khỏi wishlist"""        self.products.remove(product)        def is_in_wishlist(self, product):        """Kiểm tra sản phẩm có trong wishlist không"""        return self.products.filter(id=product.id).exists()        def get_products_count(self):        """Đếm số sản phẩm"""        return self.products.count()

Session-Based Cart

Cart Class

# cart/cart.pyfrom decimal import Decimalfrom django.conf import settingsfrom products.models import Product, ProductVariant class SessionCart:    """Giỏ hàng lưu trong session"""        def __init__(self, request):        """Khởi tạo giỏ hàng"""        self.session = request.session        cart = self.session.get(settings.CART_SESSION_ID)        if not cart:            # Tạo giỏ hàng mới trong session            cart = self.session[settings.CART_SESSION_ID] = {}        self.cart = cart        def add(self, product, variant=None, quantity=1, override_quantity=False):        """        Thêm sản phẩm vào giỏ hàng hoặc cập nhật số lượng        """        # Tạo unique key cho product + variant        product_id = str(product.id)        variant_id = str(variant.id) if variant else None        cart_key = f"{product_id}_{variant_id}" if variant_id else product_id                # Lấy giá        if variant:            price = str(variant.final_price)        else:            price = str(product.price)                if cart_key not in self.cart:            self.cart[cart_key] = {                'product_id': product_id,                'variant_id': variant_id,                'quantity': 0,                'price': price,            }                if override_quantity:            self.cart[cart_key]['quantity'] = quantity        else:            self.cart[cart_key]['quantity'] += quantity                self.save()        def save(self):        """Lưu giỏ hàng vào session"""        self.session.modified = True        def remove(self, product, variant=None):        """Xóa sản phẩm khỏi giỏ hàng"""        product_id = str(product.id)        variant_id = str(variant.id) if variant else None        cart_key = f"{product_id}_{variant_id}" if variant_id else product_id                if cart_key in self.cart:            del self.cart[cart_key]            self.save()        def update_quantity(self, product, variant=None, quantity=1):        """Cập nhật số lượng sản phẩm"""        product_id = str(product.id)        variant_id = str(variant.id) if variant else None        cart_key = f"{product_id}_{variant_id}" if variant_id else product_id                if cart_key in self.cart:            if quantity > 0:                self.cart[cart_key]['quantity'] = quantity            else:                del self.cart[cart_key]            self.save()        def __iter__(self):        """Iterate qua các items trong giỏ hàng"""        product_ids = [item['product_id'] for item in self.cart.values()]        products = Product.objects.filter(id__in=product_ids)        cart = self.cart.copy()                for item_key, item_data in cart.items():            product = products.get(id=int(item_data['product_id']))            variant = None                        if item_data['variant_id']:                variant = ProductVariant.objects.get(id=int(item_data['variant_id']))                        item_data['product'] = product            item_data['variant'] = variant            item_data['price'] = Decimal(item_data['price'])            item_data['total_price'] = item_data['price'] * item_data['quantity']            yield item_data        def __len__(self):        """Đếm tổng số items trong giỏ hàng"""        return sum(item['quantity'] for item in self.cart.values())        def get_total_price(self):        """Tính tổng giá trị giỏ hàng"""        return sum(            Decimal(item['price']) * item['quantity']            for item in self.cart.values()        )        def get_total_items(self):        """Đếm tổng số sản phẩm"""        return sum(item['quantity'] for item in self.cart.values())        def clear(self):        """Xóa giỏ hàng khỏi session"""        del self.session[settings.CART_SESSION_ID]        self.save()

Cart Context Processor

# cart/context_processors.pyfrom .cart import SessionCart def cart(request):    """    Context processor để cart có sẵn trong tất cả templates    """    return {'cart': SessionCart(request)}

Cart Views

# cart/views.pyfrom django.shortcuts import render, redirect, get_object_or_404from django.views.decorators.http import require_POSTfrom django.contrib import messagesfrom django.http import JsonResponsefrom products.models import Product, ProductVariantfrom .cart import SessionCart def cart_detail(request):    """Hiển thị giỏ hàng"""    cart = SessionCart(request)        # Tính shipping (giả định)    shipping_cost = 30000 if cart.get_total_items() > 0 else 0        context = {        'cart': cart,        'shipping_cost': shipping_cost,        'total_with_shipping': cart.get_total_price() + shipping_cost,    }    return render(request, 'cart/cart_detail.html', context) @require_POSTdef cart_add(request, product_id):    """Thêm sản phẩm vào giỏ hàng"""    cart = SessionCart(request)    product = get_object_or_404(Product, id=product_id)        # Lấy variant nếu có    variant_id = request.POST.get('variant_id')    variant = None    if variant_id:        variant = get_object_or_404(ProductVariant, id=variant_id, product=product)        # Lấy quantity    quantity = int(request.POST.get('quantity', 1))        # Kiểm tra stock    available_stock = variant.stock if variant else product.stock    if quantity > available_stock:        messages.error(request, f'Only {available_stock} items available in stock.')        return redirect('products:product_detail', slug=product.slug)        # Thêm vào cart    cart.add(product=product, variant=variant, quantity=quantity)    messages.success(request, f'{product.name} added to cart.')        # Redirect hoặc trả về JSON nếu AJAX    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'cart_count': len(cart),            'cart_total': str(cart.get_total_price()),        })        return redirect('cart:cart_detail') @require_POSTdef cart_remove(request, product_id):    """Xóa sản phẩm khỏi giỏ hàng"""    cart = SessionCart(request)    product = get_object_or_404(Product, id=product_id)        variant_id = request.POST.get('variant_id')    variant = None    if variant_id:        variant = get_object_or_404(ProductVariant, id=variant_id)        cart.remove(product=product, variant=variant)    messages.success(request, 'Item removed from cart.')        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'cart_count': len(cart),            'cart_total': str(cart.get_total_price()),        })        return redirect('cart:cart_detail') @require_POSTdef cart_update(request, product_id):    """Cập nhật số lượng sản phẩm"""    cart = SessionCart(request)    product = get_object_or_404(Product, id=product_id)        variant_id = request.POST.get('variant_id')    variant = None    if variant_id:        variant = get_object_or_404(ProductVariant, id=variant_id)        quantity = int(request.POST.get('quantity', 1))        # Kiểm tra stock    available_stock = variant.stock if variant else product.stock    if quantity > available_stock:        messages.error(request, f'Only {available_stock} items available.')        return redirect('cart:cart_detail')        cart.update_quantity(product=product, variant=variant, quantity=quantity)    messages.success(request, 'Cart updated.')        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'cart_count': len(cart),            'cart_total': str(cart.get_total_price()),        })        return redirect('cart:cart_detail') def cart_clear(request):    """Xóa toàn bộ giỏ hàng"""    cart = SessionCart(request)    cart.clear()    messages.success(request, 'Cart cleared.')    return redirect('cart:cart_detail')

Wishlist Views

# accounts/views.pyfrom django.shortcuts import render, redirect, get_object_or_404from django.contrib.auth.decorators import login_requiredfrom django.contrib import messagesfrom django.http import JsonResponsefrom products.models import Productfrom .models import Wishlist @login_requireddef wishlist_view(request):    """Hiển thị wishlist"""    wishlist, created = Wishlist.objects.get_or_create(user=request.user)    products = wishlist.products.filter(is_active=True)        context = {        'wishlist': wishlist,        'products': products,    }    return render(request, 'accounts/wishlist.html', context) @login_requireddef wishlist_add(request, product_id):    """Thêm sản phẩm vào wishlist"""    product = get_object_or_404(Product, id=product_id)    wishlist, created = Wishlist.objects.get_or_create(user=request.user)        if wishlist.is_in_wishlist(product):        messages.info(request, 'Product already in wishlist.')    else:        wishlist.add_product(product)        messages.success(request, f'{product.name} added to wishlist.')        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'in_wishlist': True,            'wishlist_count': wishlist.get_products_count(),        })        return redirect('products:product_detail', slug=product.slug) @login_requireddef wishlist_remove(request, product_id):    """Xóa sản phẩm khỏi wishlist"""    product = get_object_or_404(Product, id=product_id)    wishlist = get_object_or_404(Wishlist, user=request.user)        wishlist.remove_product(product)    messages.success(request, f'{product.name} removed from wishlist.')        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'in_wishlist': False,            'wishlist_count': wishlist.get_products_count(),        })        return redirect('accounts:wishlist') @login_requireddef wishlist_toggle(request, product_id):    """Toggle sản phẩm trong wishlist"""    product = get_object_or_404(Product, id=product_id)    wishlist, created = Wishlist.objects.get_or_create(user=request.user)        if wishlist.is_in_wishlist(product):        wishlist.remove_product(product)        in_wishlist = False        message = f'{product.name} removed from wishlist.'    else:        wishlist.add_product(product)        in_wishlist = True        message = f'{product.name} added to wishlist.'        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':        return JsonResponse({            'success': True,            'in_wishlist': in_wishlist,            'wishlist_count': wishlist.get_products_count(),            'message': message,        })        messages.success(request, message)    return redirect('products:product_detail', slug=product.slug)

URL Configuration

# cart/urls.pyfrom django.urls import pathfrom . import views app_name = 'cart' urlpatterns = [    path('', views.cart_detail, name='cart_detail'),    path('add/<int:product_id>/', views.cart_add, name='cart_add'),    path('remove/<int:product_id>/', views.cart_remove, name='cart_remove'),    path('update/<int:product_id>/', views.cart_update, name='cart_update'),    path('clear/', views.cart_clear, name='cart_clear'),]

# accounts/urls.py (wishlist part)from django.urls import pathfrom . import views app_name = 'accounts' urlpatterns = [    # ... other urls ...    path('wishlist/', views.wishlist_view, name='wishlist'),    path('wishlist/add/<int:product_id>/', views.wishlist_add, name='wishlist_add'),    path('wishlist/remove/<int:product_id>/', views.wishlist_remove, name='wishlist_remove'),    path('wishlist/toggle/<int:product_id>/', views.wishlist_toggle, name='wishlist_toggle'),]

Cart Templates

<!-- templates/cart/cart_detail.html -->{% extends 'base.html' %}{% load static %} {% block title %}Shopping Cart{% endblock %} {% block content %}<div class="container my-5">    <h2 class="mb-4">Shopping Cart</h2>        {% if cart %}        <div class="row">            <div class="col-lg-8">                <div class="card">                    <div class="card-body">                        <table class="table">                            <thead>                                <tr>                                    <th>Product</th>                                    <th>Price</th>                                    <th>Quantity</th>                                    <th>Total</th>                                    <th></th>                                </tr>                            </thead>                            <tbody>                                {% for item in cart %}                                <tr>                                    <td>                                        <div class="d-flex align-items-center">                                            {% if item.product.image %}                                            <img src="{{ item.product.image.url }}"                                                  alt="{{ item.product.name }}"                                                 style="width: 60px; height: 60px; object-fit: cover;"                                                 class="me-3">                                            {% endif %}                                            <div>                                                <h6 class="mb-0">{{ item.product.name }}</h6>                                                {% if item.variant %}                                                <small class="text-muted">                                                    {{ item.variant.name }}: {{ item.variant.value }}                                                </small>                                                {% endif %}                                            </div>                                        </div>                                    </td>                                    <td>{{ item.price|floatformat:0 }}đ</td>                                    <td>                                        <form method="post"                                               action="{% url 'cart:cart_update' item.product.id %}"                                              class="d-inline">                                            {% csrf_token %}                                            {% if item.variant %}                                            <input type="hidden" name="variant_id" value="{{ item.variant.id }}">                                            {% endif %}                                            <input type="number"                                                    name="quantity"                                                    value="{{ item.quantity }}"                                                   min="1"                                                   max="{{ item.variant.stock|default:item.product.stock }}"                                                   class="form-control form-control-sm"                                                   style="width: 80px;"                                                   onchange="this.form.submit()">                                        </form>                                    </td>                                    <td>{{ item.total_price|floatformat:0 }}đ</td>                                    <td>                                        <form method="post"                                               action="{% url 'cart:cart_remove' item.product.id %}"                                              class="d-inline">                                            {% csrf_token %}                                            {% if item.variant %}                                            <input type="hidden" name="variant_id" value="{{ item.variant.id }}">                                            {% endif %}                                            <button type="submit" class="btn btn-sm btn-outline-danger">                                                <i class="bi bi-trash"></i>                                            </button>                                        </form>                                    </td>                                </tr>                                {% endfor %}                            </tbody>                        </table>                    </div>                </div>            </div>                        <div class="col-lg-4">                <div class="card">                    <div class="card-header">                        <h5 class="mb-0">Order Summary</h5>                    </div>                    <div class="card-body">                        <div class="d-flex justify-content-between mb-2">                            <span>Subtotal:</span>                            <strong>{{ cart.get_total_price|floatformat:0 }}đ</strong>                        </div>                        <div class="d-flex justify-content-between mb-2">                            <span>Shipping:</span>                            <strong>{{ shipping_cost|floatformat:0 }}đ</strong>                        </div>                        <hr>                        <div class="d-flex justify-content-between mb-3">                            <strong>Total:</strong>                            <strong class="text-primary">{{ total_with_shipping|floatformat:0 }}đ</strong>                        </div>                                                <a href="{% url 'orders:checkout' %}" class="btn btn-primary w-100 mb-2">                            Proceed to Checkout                        </a>                        <a href="{% url 'products:product_list' %}" class="btn btn-outline-secondary w-100">                            Continue Shopping                        </a>                    </div>                </div>            </div>        </div>    {% else %}        <div class="text-center py-5">            <i class="bi bi-cart-x" style="font-size: 4rem; color: #ccc;"></i>            <h4 class="mt-3">Your cart is empty</h4>            <p class="text-muted">Add some products to get started!</p>            <a href="{% url 'products:product_list' %}" class="btn btn-primary">                Browse Products            </a>        </div>    {% endif %}</div>{% endblock %}

JavaScript for Cart

// static/js/cart.jsdocument.addEventListener('DOMContentLoaded', function() {    // Add to cart with AJAX    const addToCartForms = document.querySelectorAll('.add-to-cart-form');        addToCartForms.forEach(form => {        form.addEventListener('submit', function(e) {            e.preventDefault();                        const formData = new FormData(form);            const url = form.action;                        fetch(url, {                method: 'POST',                body: formData,                headers: {                    'X-Requested-With': 'XMLHttpRequest',                    'X-CSRFToken': formData.get('csrfmiddlewaretoken')                }            })            .then(response => response.json())            .then(data => {                if (data.success) {                    // Update cart count in navbar                    updateCartCount(data.cart_count);                                        // Show success message                    showToast('Product added to cart!', 'success');                }            })            .catch(error => {                console.error('Error:', error);                showToast('Error adding to cart', 'error');            });        });    });        // Wishlist toggle with AJAX    const wishlistButtons = document.querySelectorAll('.wishlist-toggle');        wishlistButtons.forEach(button => {        button.addEventListener('click', function(e) {            e.preventDefault();                        const url = this.dataset.url;            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;                        fetch(url, {                method: 'GET',                headers: {                    'X-Requested-With': 'XMLHttpRequest',                    'X-CSRFToken': csrfToken                }            })            .then(response => response.json())            .then(data => {                if (data.success) {                    // Toggle icon                    const icon = this.querySelector('i');                    if (data.in_wishlist) {                        icon.classList.remove('bi-heart');                        icon.classList.add('bi-heart-fill');                    } else {                        icon.classList.remove('bi-heart-fill');                        icon.classList.add('bi-heart');                    }                                        // Update wishlist count                    updateWishlistCount(data.wishlist_count);                                        showToast(data.message, 'success');                }            });        });    });}); function updateCartCount(count) {    const cartCountElements = document.querySelectorAll('.cart-count');    cartCountElements.forEach(element => {        element.textContent = count;    });} function updateWishlistCount(count) {    const wishlistCountElements = document.querySelectorAll('.wishlist-count');    wishlistCountElements.forEach(element => {        element.textContent = count;    });} function showToast(message, type = 'success') {    // Simple toast notification    const toast = document.createElement('div');    toast.className = `alert alert-${type} position-fixed top-0 end-0 m-3`;    toast.style.zIndex = '9999';    toast.textContent = message;    document.body.appendChild(toast);        setTimeout(() => {        toast.remove();    }, 3000);}

Bài Tập

Exercise 1: Cart Functionality

Task: Test cart functionality:

# Requirements:# 1. Add products to cart (with/without variants)# 2. Update quantities# 3. Remove items# 4. Clear cart# 5. Test stock validation# 6. Test AJAX functionality

Exercise 2: Wishlist Features

Task: Implement advanced wishlist:

# Requirements:# 1. Move from wishlist to cart# 2. Share wishlist via email# 3. Multiple wishlists per user# 4. Wishlist notifications (price drop)# 5. Compare products from wishlist

Tài Liệu Tham Khảo

Previous: Bài 35.1: Models | Next: Bài 35.3: Checkout and Orders

#wishlist

E-commerce Practice Project (Part 2)