Asynchronous/AJAX Endpoints
Relevant source files
The following files were used as context for generating this wiki page:The Becathlon application leverages Asynchronous JavaScript and XML (AJAX) to create a dynamic, single-page-like user experience for several core features. This approach avoids full-page reloads for common actions, providing instant feedback to the user. The frontend communicates with the Django backend through a series of dedicated API endpoints that primarily consume and produce JSON data.
This system is most prominent in the main, cart, and catalog applications. The main app uses AJAX for product creation, deletion, and dynamic filtering on the homepage. The cart app relies entirely on AJAX for adding, updating, and removing items, as well as for refreshing cart state across the site. The catalog app uses AJAX to power its "Quick View" modal, fetching product details on demand.
General AJAX Configuration
CSRF Protection
All POST and DELETE requests made via AJAX include a CSRF token to protect against Cross-Site Request Forgery. A utility function, getCSRFToken(), is available in the frontend JavaScript to retrieve this token from the document's cookies.
Sources: apps/cart/static/cart/js/cart.js:4-9, apps/main/templates/main/home.html:245-257
// Example from apps/cart/static/cart/js/cart.js
function getCSRFToken() {
return document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];
}
Sources: apps/cart/static/cart/js/cart.js:4-8
Product Management Endpoints (Main App)
The homepage (apps/main) provides asynchronous functionality for sellers to manage their product listings and for all users to view and filter products without page reloads.
Sources: apps/main/templates/main/home.html, IMPLEMENTATION.md
Endpoints Summary
| Method | Endpoint | Description | Authentication |
|---|---|---|---|
GET | /api/products/ | Fetches a paginated and filtered list of products. | Not Required |
POST | /api/products/add/ | Adds a new product to the catalog. | Required (Seller) |
DELETE | /api/products/<id>/delete/ | Deletes a product owned by the user. | Required (Owner) |
Sources: IMPLEMENTATION.md:37-39, apps/main/templates/main/home.html:283-305, 381-393, 400-418
Detailed Flows
Loading and Filtering Products
The loadProducts() JavaScript function on the homepage fetches products from the /api/products/ endpoint. It supports pagination and filtering by search query, product type, and price range. The response is a JSON object containing a list of products and pagination details.
This diagram illustrates the process of loading products on the homepage.
Adding a Product
Authenticated sellers can add a new product directly from the homepage. The form data is serialized into a JSON object and sent via a POST request.
This diagram shows the sequence for adding a new product.
Cart Management Endpoints (Cart App)
The cart app is heavily reliant on AJAX for all its operations, providing a seamless shopping experience. The frontend logic is primarily contained in apps/cart/static/cart/js/cart.js.
Sources: apps/cart/static/cart/js/cart.js
Endpoints Summary
| Method | Endpoint | Description | Authentication |
|---|---|---|---|
POST | /cart/add/<product_id>/ | Adds a product to the cart. | Not Required (Session-based) |
POST | /cart/update/<item_id>/ | Updates the quantity of an item in the cart. Setting quantity to 0 removes it. | Not Required (Session-based) |
POST | /cart/clear/ | Removes all items from the cart. | Not Required (Session-based) |
GET | /cart/api/count/ | Retrieves the total number of items in the cart. | Not Required (Session-based) |
GET | /cart/api/summary/ | Retrieves cart subtotal and total item count. | Not Required (Session-based) |
Sources: apps/cart/static/cart/js/cart.js:25-45, 59-100, 119-138, 141-153, 156-172
Detailed Flows
Updating Cart Item Quantity
When a user changes the quantity of an item in the cart view, the updateCartItem function is triggered. It sends a POST request with the new quantity. The backend responds with updated totals, and the frontend updates the UI accordingly.
This diagram shows the flow for updating a cart item's quantity.
Refreshing Cart State
To keep the cart information consistent across the site (e.g., the badge in the navigation bar), the refreshCartCount() function is called after cart modifications and on page loads. It makes a GET request to /cart/api/count/ and updates the DOM with the returned item count. A similar function, refreshCartSummary(), exists for the main cart page.
Sources: apps/cart/static/cart/js/cart.js:141-153, apps/stores/templates/stores/base_stores.html:276-288
Catalog Endpoints (Catalog App)
The catalog app uses AJAX to enhance the product browsing experience, notably with a "Quick View" feature.
Sources: apps/catalog/static/catalog/js/catalog.js
Endpoints Summary
| Method | Endpoint | Description | Authentication |
|---|---|---|---|
GET | /catalog/api/product/<product_id>/quick-view/ | Fetches detailed product information for a modal view. | Not Required |
GET | /catalog/api/filter/ | [Future] Filters products based on various criteria. | Not Required |
Sources: apps/catalog/static/catalog/js/catalog.js:111-117, 260-277
Detailed Flows
Product Quick View
When a user clicks the "Quick View" button on a product card, the initQuickView function triggers an AJAX call to fetch detailed data for that specific product. The data is then used to populate a modal window, allowing the user to see more details without navigating away from the catalog page.
This diagram illustrates the Quick View data flow.
The buildQuickViewHTML function dynamically constructs the HTML for the modal content based on the JSON response, including product images, name, price, stock status, and action buttons.
Sources: apps/catalog/static/catalog/js/catalog.js:154-196
Conclusion
The project's asynchronous architecture is a key component for delivering a modern, fluid e-commerce experience. By using JavaScript's Fetch API to communicate with a set of well-defined Django API endpoints, the application can update specific parts of the UI—such as the product grid, shopping cart, and modals—without requiring disruptive page reloads. This design improves perceived performance and user satisfaction across the main, cart, and catalog modules.
Sources: IMPLEMENTATION.md:21-26, README.md:83-86