Key UI Templates and Components
Relevant source files
The following files were used as context for generating this wiki page:- apps/main/templates/main/home.html
- apps/catalog/templates/catalog/catalog.html
- apps/catalog/templates/catalog/product_detail.html
- apps/cart/templates/cart/cart.html
- apps/order/templates/order/checkout.html
- apps/stores/templates/stores/base_stores.html
- apps/profiles/templates/profiles/profile_detail_new.html
- apps/main/static/main/css/base.css
- apps/catalog/static/catalog/js/catalog.js
- apps/main/static/main/js/product_detail.js
The Becathlon application's user interface is constructed using a set of Django templates that define the structure and presentation for cái key user-facing pages. These templates follow a consistent design language, characterized by a modern, dark theme with gold and blue accents. They leverage template inheritance to maintain a common layout, including a sticky header, navigation, and a standardized system for displaying user messages.
The core user journey, from browsing products to completing a purchase, is represented by a series of interconnected templates: home.html, catalog.html, product_detail.html, cart.html, and checkout.html. These are supplemented by user-specific pages like profile_detail_new.html. Client-side interactivity is added via vanilla JavaScript, with AJAX being used for features like quick product views and dynamic updates to user preferences.
Core Template Architecture
The UI is built upon a base template system that provides a consistent look and feel across the application.
Template Inheritance
Most pages extend a base template, such as base_stores.html or base_catalog.html. This base template defines the main HTML structure, including the <head>, header, main content block, and footer. It also handles the rendering of Django's messages framework and includes common CSS and JavaScript files.
The following diagram illustrates the typical inheritance flow for a page like the store locator.
This diagram shows how a specific page template (stores.html) inherits and populates the main content block of a base template (base_stores.html).
Sources: apps/stores/templates/stores/base_stores.html
Design System and Styling
The visual identity is defined by a set of CSS custom properties (variables) in the base stylesheets. This creates a centralized design system for colors, fonts, and layout.
| Variable Name | Value | Description |
|---|---|---|
--primary-black | #0a0a0a | Main background color component. |
--accent-gray | #2a2a2a | Used for secondary UI elements. |
--light-gray | #a0a0a0 | Standard text and border color. |
--ultra-light | #f5f5f5 | Color for bright text and highlights. |
--accent-gold | #d4af37 | Primary call-to-action and highlight color. |
--accent-blue | #0066ff | Secondary accent color, used for active states. |
--success-green | #10b981 | Color for success messages and indicators. |
--danger-red | #ef4444 | Color for error messages and delete actions. |
Sources: apps/main/static/main/css/base.css:8-20, apps/profiles/static/profiles/css/profiles.css:4-8
Common UI Components
- Header & Navigation: A sticky header contains the "BECATHLON" logo and navigation links. The links displayed are conditional based on the user's authentication status (e.g., "Orders" and "Profile" for logged-in users, "Sign In/Up" for guests).
Sources: apps/stores/templates/stores/base_stores.html:280-302 - Message Display: A dedicated container (
<div class="messages">) is used to display Django's flash messages (e.g., success, error) as dismissible alerts in the top-right corner of the screen.
Sources: apps/main/static/main/css/base.css:140-176, apps/stores/templates/stores/base_stores.html:304-310
User Journey Templates
The primary e-commerce flow is handled by a sequence of templates, each serving a distinct purpose in the user's journey.
This flowchart shows the standard user path from the homepage to the checkout page.
Sources: README.md:58-64
Homepage (home.html)
The homepage serves as the main entry point.
- For Guests: It displays a prominent "auth-prompt" section encouraging users to sign in or sign up to access full functionality.
Sources: apps/main/templates/main/home.html:21-29 - For Authenticated Users: It includes a form for adding new products via AJAX.
Sources: apps/main/templates/main/home.html:32-60, IMPLEMENTATION.md:28-35 - Product Display: It features a grid of products (
products-grid) that are loaded and displayed. Each product is rendered as aproduct-card.
Sources: apps/main/templates/main/home.html
Catalog (catalog.html)
The catalog page is the main interface for browsing and filtering products.
| Component | ID / Class | Description |
|---|---|---|
| Filter Form | #filter-form | A form containing inputs for search, category, price, and stock status. |
| Category Filter | #category-toggle | A dropdown button that reveals category checkboxes for filtering. |
| Product Grid | #products-grid | The main container where filtered product cards are displayed. |
| Quick View Modal | #quick-view-modal | A modal window for displaying product details without leaving the catalog page. |
Sources: apps/catalog/templates/catalog/catalog.html
Quick View Feature
The "Quick View" button on each product card triggers an AJAX request to fetch product details.
This sequence diagram illustrates the AJAX flow for the Quick View modal.
Sources: apps/catalog/static/catalog/js/catalog.js:100-132
Product Detail (product_detail.html)
This page provides comprehensive information about a single product.
- Image Gallery: Displays the main product image and thumbnails.
- Ambient Lighting: A JavaScript-driven effect (
applyAmbientLighting) attempts to extract the dominant color from the product image and creates a soft glow behind the image container for a more immersive look. This is handled byproduct_detail.js.
Sources: apps/main/static/main/js/product_detail.js:18-93 - Quantity Selector: Includes
+and-buttons to adjust the quantity, managed by thechangeQuantityfunction in JavaScript.
Sources: apps/main/static/main/js/product_detail.js:4-17 - Add to Cart: A button that adds the selected quantity of the product to the user's cart.
Sources: apps/catalog/templates/catalog/product_detail.html
Cart (cart.html)
The cart page allows users to review and manage the items they have selected.
- Item List: Displays each product in the cart with its name, price, quantity, and a subtotal.
- Quantity Management: Users can update the quantity of each item or remove it entirely.
- Order Summary: A summary box shows the subtotal, shipping costs (which are noted as free), and the total order amount.
- Checkout Button: A prominent button directs the user to the checkout process.
Sources: apps/cart/templates/cart/cart.html
Checkout (checkout.html)
The checkout page is a single-page, multi-section form for completing an order.
- Progress Steps: A visual indicator at the top shows the user's progress through the checkout steps (e.g., Shipping, Payment).
Sources: apps/order/templates/order/checkout.html:20-33, apps/order/static/order/css/checkout.css:25-63 - Checkout Layout: A two-column grid (
checkout-layout) separates the input forms (shipping, payment) from the sticky order summary sidebar.
Sources: apps/order/templates/order/checkout.html:36-37, apps/order/static/order/css/checkout.css:66-71 - Order Summary: A sidebar (
checkout-sidebar) provides a persistent summary of the items being purchased and the total cost.
Sources: apps/order/templates/order/checkout.html:78-123
Sources: apps/order/templates/order/checkout.html
User-Specific Templates
Profile Page (profile_detail_new.html)
This template provides a detailed view of the user's profile information and preferences.
- Layout: It features a header with the user's profile picture, name, and key stats like "Member Since".
- Information Sections: User data is organized into "Contact Information" and "Personal Information" sections within "glass-panel" containers.
- AJAX-powered Preferences: The "Newsletter Subscription" preference is controlled by an iOS-style toggle switch. Toggling the switch triggers an asynchronous POST request to the
/profiles/toggle-newsletter-ajax/endpoint to update the user's preference without a page reload. A toast notification provides feedback on the action's success or failure.
This diagram shows the client-server interaction when a user updates their newsletter preference on the profile page.
Sources: apps/profiles/templates/profiles/profile_detail_new.html:320-345
Conclusion
The UI templates in the Becathlon project form a cohesive and visually consistent frontend, built on Django's templating engine and enhanced with modern CSS and vanilla JavaScript. The structure relies on template inheritance for maintainability, a centralized CSS variable system for a unified design, and targeted JavaScript for interactive, user-friendly features like AJAX-powered modals and preference updates. This architecture successfully mirrors the browsing experience of a modern e-commerce platform.