🛒

Building a Django E-commerce Website

Sep 19, 2024

Django E-commerce Series - Video 1 Notes

Overview

  • Building a full e-commerce website with:
    • Payment integration
    • Guest and registered user shopping

Key Features:

  • Guest Shopping: Users can:
    • Shop without creating an account
    • Add items to their cart
    • Checkout without registration
  • Registered User Shopping: Users can create an account and shop as registered users.

Website Functionality

  1. Adding Items to Cart
    • Click "Add to Cart" button.
    • Cart updates dynamically with added items.
  2. Cart Management
    • Update item quantity in the cart.
    • Remove items by setting quantity to zero.
  3. Checkout Process
    • Input shipping information.
    • Payment prompt.
    • Redirect to homepage after payment.

Technologies Used

  • Django Framework: Core back-end technology.
  • JavaScript: For front-end interactivity (Add to Cart, cookies).
  • No additional frameworks: Keeping it beginner-friendly.
  • Future Extensions:
    • Possible REST API version of the site.
    • Potential React front-end integration.

Project Setup

  1. Source Code: Available for download at provided links.
  2. Modules: Series will be broken into multiple videos; each module will cover specific functionality.
  3. Initial Configuration:
    • Set up Django project and app named "store".
    • Configured within installed apps.

Creating Templates

Step 1: Template Structure

  • Create a folder structure:
    • templates/store.
  • Create three templates:
    • main.html (Base template)
    • store.html
    • cart.html
    • checkout.html

Step 2: Views and URLs

  • Create function-based views for each template.
  • Set URLs for home (store), cart, and checkout views.

Step 3: Static Files

  • Configure static files for CSS and images.
  • Create a static folder with subfolders for css and images.
  • Create main.css for styling.

Building Main Template

  • HTML Structure:
    • Use Bootstrap for responsive design.
    • Create a Navigation Bar.
  • Styling:
    • Custom styles for background and elements.

Store Page Development

  • Create a grid layout for product display using Bootstrap.
  • Add placeholder images and product titles.
  • Add "Add to Cart" and "View" buttons with styling.

Cart Page Development

  • Create a layout for the cart with:
    • Continue Shopping button.
    • Total price and checkout button.

Checkout Page Development

  • Create a form for user and shipping information.
  • Include payment options (e.g., PayPal).
  • Summary of the order.

Summary

  • This video covers setting up the basic structure of the e-commerce site, including templates, views, and static files. The next video will focus on data structure and real product integration.

Full transcript