Nhom

Notes

Template Integration Patterns

Common Design Elements:

1. Breadcrumb Navigation: Consistent site navigation
2. Bootstrap Components: Cards, badges, buttons, forms
3. Font Awesome Icons: Visual consistency across templates
4. Responsive Design: Mobile-first approach
5. AJAX Integration: Seamless user interactions

Performance Optimizations:

1. Image Lazy Loading: Efficient image rendering
2. Pagination: Controlled result sets
3. CSS/JS Optimization: Minified resources
4. Database Efficiency: Optimized queries in views

User Experience Features:

1. Search Persistence: Maintains filter state
2. Real-time Updates: Live counts and statistics
3. Multilingual Support: Vietnamese/English content
4. Accessibility: ARIA labels and semantic HTML
5. Mobile Responsiveness: Touch-friendly interface

This template system provides a complete, production-ready classified ads platform with modern web standards, comprehensive functionality, and excellent user experience patterns.

1

1. home.html - Landing Page Template

Structure & Purpose

• Main Function: Homepage/landing page for classified ads section
• Layout: Bootstrap-based responsive design with hero section, stats, categories, and locations
• Target Users: Both visitors and registered users

Key Sections:

Hero Section

<div class="jumbotron bg-primary text-white text-center py-5 mb-5 rounded">

    <h1 class="display-4">Find What You Need</h1>

    <p class="lead">Browse thousands of classified ads or post your own</p>

    <a class="btn btn-light btn-lg" href="{% url 'classified_ads:create' %}">

        <i class="fas fa-plus me-2"></i>Post an Ad

    </a>

</div>

• Call-to-Action: Prominent "Post an Ad" button
• Visual Impact: Large, centered design with contrasting colors
• User Journey: Direct path to ad creation

Statistics Dashboard

<div class="row text-center mb-5">

    <div class="col-md-3">

        <h3 class="text-primary">{{ total_ads }}</h3>

        <p class="text-muted">Total Ads</p>

    </div>

    <!-- Additional stats... -->

</div>

• Real-time Data: Dynamic count from home_view context
• Trust Building: Shows platform activity and size
• Visual Appeal: Color-coded metrics with icons

Category Grid

{% for category in categories %}

<div class="col-lg-3 col-md-4 col-sm-6 mb-3">

    <a href="{% url 'classified_ads:category' category.slug %}">

        <div class="card h-100 border-0 shadow-sm hover-shadow">

            <i class="{{ category.icon }} fa-2x text-primary mb-3"></i>

            <h6>{{ category.name }}</h6>

            <small>{{ category.ad_count }} ads</small>

        </div>

    </a>

</div>

{% endfor %}

• Interactive Cards: Hover effects and visual feedback
• Icon Integration: Font Awesome icons for visual categorization
• Live Counts: Database-driven ad counts per category

Popular Locations

{% for location in popular_locations %}

<div class="card h-100 border-0 shadow-sm hover-shadow">

    <i class="fas fa-map-marker-alt fa-2x text-success mb-3"></i>

    <h6>{{ location.name }}</h6>

    <small>{{ location.ad_count }} ads</small>

</div>

{% endfor %}

• Geographic Navigation: Location-based browsing
• Dynamic Counts: Real-time ad counts via get_ads_count() method

1

This template (home.html) is the homepage for the classified ads section. Here’s what it does:

• Extends the base layout and sets the page title.
• Hero section at the top with a call-to-action to post an ad.
• Stats row showing total ads, number of categories, daily new ads, and that posting is free.
• Categories section: displays a grid of main categories (with icons, names, and ad counts), and a button to view all categories.
• Popular locations section (if available): shows a grid of popular locations (with names, state/province, and ad counts), and a button to browse all locations.
• Featured ads section (if available): displays a grid of featured ads with images, title, category, price, location, and days since published.
• Recent ads section: shows a grid of the most recent ads with images, title, price, and category, and a button to view all ads.
• Includes a hover effect for cards for better visual feedback.

This homepage provides a visually appealing, easy-to-navigate entry point for users to browse, search, and post classified ads, highlighting key categories, locations, and featured/recent ads.

2

2. ad_list.html - Main Browse/Search Template

Advanced Search Form

<form method="GET" action="{% url 'classified_ads:ad_list' %}">

    <div class="row g-3">

        <!-- Search Query -->

        <input type="text" name="q" placeholder="Search ads..." value="{{ request.GET.q }}">

        <!-- Category Filter -->

        <select name="category">

            {% for category in categories %}

            <option value="{{ category.id }}">{{ category.name }} ({{ category.ad_count }})</option>

            {% endfor %}

        </select>

        <!-- Location with Autocomplete -->

        <input type="text" name="location" list="popular-locations">

        <datalist id="popular-locations">

            {% for location in all_locations %}

            <option value="{{ location.name }}">

            {% endfor %}

        </datalist>

    </div>

</form>

Key Features:

• Persistent Filters: Maintains search state across pagination
• Autocomplete: HTML5 datalist for location suggestions
• Price Range: Min/max price filtering
• Sorting Options: Multiple sort criteria (newest, price, popularity)

Results Display

{% for ad in ads %}

<div class="card mb-3">

    <div class="row g-0">

        <div class="col-md-3">

            <!-- Image thumbnail -->

        </div>

        <div class="col-md-9">

            <div class="card-body">

                <h5>{{ ad.title }}</h5>

                <p class="text-success">${{ ad.price }}</p>

                <span class="badge bg-primary">{{ ad.get_ad_type_display }}</span>

            </div>

        </div>

    </div>

</div>

{% endfor %}

• Card Layout: Consistent, scannable design
• Image Handling: Thumbnail with fallback for missing images
• Status Badges: Visual indicators for ad type and status

2

This template (ad_list.html) displays the main classified ads listing page. Here’s what it does:

• Extends the base layout and sets the page title.
• Shows a search/filter form at the top, allowing users to filter ads by:
  • Search query
  • Category
  • Ad type (sell, buy, rent, service, job)
  • Location (text input with autocomplete and popular location dropdown)
  • Price range (min/max)
  • Sort order (newest, oldest, price, most viewed)
• Results header displays the current filter context and total ads found.
• "Post New Ad" button for quick access to the ad creation page.
• Ads are displayed in a responsive grid:
  • Each card shows the ad’s image (or a placeholder), title, short description, price, location, badges (type, category, featured), and time since posted.
  • "View Details" button links to the ad’s detail page.
• Pagination controls at the bottom for navigating through multiple pages of ads.
• If no ads are found, a friendly empty state is shown with options to clear filters or post the first ad.
• JavaScript improves UX by clearing the location input when a popular location is selected and vice versa.

This template provides a user-friendly, filterable, and visually appealing interface for browsing and searching classified ads.

3

3. ad_detail.html - Individual Ad View Template

Image Gallery

<div id="adImageCarousel" class="carousel slide">

    <div class="carousel-inner">

        {% for image in ad.images.all %}

        <div class="carousel-item {% if forloop.first %}active{% endif %}">

            <img src="{{ image.image.url }}" style="height: 400px; object-fit: cover;">

            {% if image.caption %}

            <div class="carousel-caption">

                <p>{{ image.caption }}</p>

            </div>

            {% endif %}

        </div>

        {% endfor %}

    </div>

</div>

• Bootstrap Carousel: Multi-image support with navigation
• Responsive Images: CSS object-fit for consistent sizing
• Captions: Optional image descriptions

Ad Information Panel

<div class="card-header">

    <div class="d-flex justify-content-between">

        <div>

            <h1 class="h3">{{ ad.title }}</h1>

            <span class="badge bg-primary">{{ ad.get_ad_type_display }}</span>

            <span class="badge bg-secondary">{{ ad.category.name }}</span>

            {% if ad.featured %}

            <span class="badge bg-warning">Featured</span>

            {% endif %}

        </div>

        <div class="text-end">

            {% if ad.price %}

            <div class="h3 text-success">

                ${{ ad.price }}

                {% if ad.price_negotiable %}(Negotiable){% endif %}

            </div>

            {% endif %}

            <small>Posted {{ ad.created_at|timesince }} ago</small>

        </div>

    </div>

</div>

• Status Badges: Multiple status indicators
• Price Display: Prominent pricing with negotiable flag
• Timestamp: Human-readable posting time

User Interaction Features

<!-- Favorite Button (AJAX) -->

<button class="btn btn-outline-danger" onclick="toggleFavorite({{ ad.pk }})">

    <i class="fas fa-heart"></i> 

    {% if is_favorited %}Remove from{% else %}Add to{% endif %} Favorites

</button>

<!-- Contact Form -->

<form method="post" action="{% url 'classified_ads:submit_inquiry' ad.pk %}">

    {% csrf_token %}

    {{ inquiry_form|crispy }}

    <button type="submit" class="btn btn-primary">Send Inquiry</button>

</form>

• AJAX Favorites: Instant favorite toggle without page reload
• Contact Integration: Built-in inquiry form
• Permission Handling: Shows different options for owners vs. visitors

3

This template (ad_detail.html) displays the details of a single classified ad. Here’s what it does:

• Extends the base layout and sets the page title to the ad’s title.
• Shows a breadcrumb navigation for easy backtracking.
• Main content area (left):
  • Displays ad images in a Bootstrap carousel (or a placeholder if no images).
  • Shows ad details: title, type, category, featured/status badges, price, posted time, description, location, and view count.
  • Includes a contact form for users to message the seller.
• Sidebar (right):
  • Seller information: name, join date, phone, email, and a link to view all ads by this seller.
  • Action buttons: add/remove favorite, share, report, order (if price exists), and edit/delete (if the user is the ad owner).
  • Safety tips for buyers.
• Related ads section at the bottom (placeholder for now).
• JavaScript functions for toggling favorites (AJAX), sharing the ad, and reporting.

This page provides a comprehensive, user-friendly view of an ad, with all key info, seller contact, and user actions.

4

4. ad_form.html - Create/Edit Ad Template

Multilingual Form Structure

<!-- Creation Guide -->

<div class="creation-guide">

    <h6><i class="fas fa-lightbulb"></i> Classified Ad Creation Guide</h6>

    <ul>

        <li><strong>Option 1:</strong> Create English ad first, add Vietnamese translation later</li>

        <li><strong>Option 2:</strong> Create both English and Vietnamese content simultaneously</li>

        <li><strong>Translation Status:</strong> Will be automatically set based on content completion</li>

    </ul>

</div>

<!-- Tab Navigation -->

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">

        <a class="nav-link active" data-bs-toggle="tab" href="#english-content">

            English Content

        </a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="tab" href="#vietnamese-content">

            Vietnamese Content (Tiếng Việt)

        </a>

    </li>

</ul>

Advanced Features:

• Tabbed Interface: Separate English/Vietnamese content sections
• Translation Management: Status tracking and attribution
• Image Upload: Drag-drop interface with preview
• Rich Text Editor: CKEditor for formatted descriptions
• Draft/Publish: Dual submission options

Image Management

<!-- Image Upload Formset -->

{{ formset.management_form }}

{% for form in formset %}

<div class="image-form">

    {{ form.image }}

    {{ form.caption }}

    {{ form.is_primary }}

    {{ form.order }}

</div>

{% endfor %}

• Dynamic Formsets: Multiple image uploads
• Primary Image: Selection for main thumbnail
• Caption Support: Image descriptions
• Ordering: Display sequence control

4

This template (ad_form.html) is used for creating or editing a classified ad, supporting both English and Vietnamese content. Here’s what it does:

• Extends the base layout and sets the page title based on whether it’s a new or existing ad.
• Includes custom CSS for styling sections, tabs, and tips.
• Shows a breadcrumb for navigation.
• The main form is in a card with a header and a guide for bilingual ad creation.
• Uses tabbed navigation for:
  1. English Content (title, category, ad type, description)
  2. Vietnamese Translation (title, description, translation status, translator, with current status shown if editing)
  3. Contact & Pricing (contact info, location, price, negotiable, expiration)
  4. Images (upload up to 5 images, mark primary, delete existing)
• Action buttons at the bottom: Save as Draft, Publish Ad, Cancel.
• Sidebar with tips for better ads and a translation status legend.
• JavaScript for:
  • Tab switching.
  • Auto-updating translation status based on Vietnamese fields.
  • Previewing selected images before upload.

This template provides a clear, step-by-step, and visually appealing workflow for posting or editing classified ads, supporting both English and Vietnamese content, and managing images.

5

5. my_ads.html - User Dashboard Template

Multilingual Support

<h2>

    <i class="fas fa-list-alt"></i>

    {% if request.LANGUAGE_CODE == 'vi' %}

        Quảng cáo của tôi

    {% else %}

        My Ads

    {% endif %}

</h2>

• Language Detection: Dynamic content based on locale
• Consistent Branding: Icons and visual hierarchy

Ad Management Grid

{% for ad in ads %}

<div class="col-md-6 col-lg-4 mb-4">

    <div class="card h-100">

        <div class="card-header">

            <div class="d-flex justify-content-between">

                <span class="badge bg-{{ ad.status|status_color }}">{{ ad.get_status_display }}</span>

                <span class="text-muted">{{ ad.view_count }} views</span>

            </div>

        </div>

        <div class="card-body">

            <h6>{{ ad.title|truncatechars:50 }}</h6>

            <p class="text-success">${{ ad.price }}</p>

            <div class="btn-group">

                <a href="{% url 'classified_ads:edit' ad.pk %}" class="btn btn-sm btn-outline-primary">Edit</a>

                <a href="{% url 'classified_ads:delete' ad.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>

            </div>

        </div>

    </div>

</div>

{% endfor %}

• Status Indicators: Color-coded status badges
• Performance Metrics: View counts and statistics
• Quick Actions: Edit/delete buttons for each ad

5

This template (my_ads.html) displays the current user's own classified ads, with support for both English and Vietnamese languages. Here’s what it does:

• Extends the base layout and sets the page title to "My Ads" or "Quảng cáo của tôi" based on the user's language.
• Header with a title and a button to post a new ad (label changes with language).
• If the user has a profile, shows an account status card with:
  • Plan type, ad count/limit, total views, and an upgrade button (if on a free plan), all with bilingual labels.
• If the user has ads:
  • Displays each ad in a card grid.
  • Each card shows:
    • The ad’s image (or a placeholder).
    • Title (in Vietnamese if available and language is 'vi', otherwise English).
    • Translation status badge (pending, translated, or English only, with bilingual labels).
    • Price, location, view count, and posted date (all bilingual).
    • Action buttons: View, Edit, Delete (labels change with language).
    • Badges for promoted or inactive ads (bilingual).
  • Pagination controls with bilingual navigation.
• If the user has no ads:
  • Shows an empty state with a message and a button to post the first ad (bilingual).

This template provides a user-friendly, bilingual dashboard for users to manage their own ads, see their account status, and quickly post, edit, or delete ads.

6

6. category_list.html - Category Browser Template

Hierarchical Display

{% for category in categories %}

<div class="col-lg-4 col-md-6 mb-4">

    <div class="card h-100 shadow-sm hover-shadow">

        <div class="card-body">

            <div class="d-flex align-items-start">

                <div class="flex-shrink-0 me-3">

                    <i class="{{ category.icon }} fa-2x text-primary"></i>

                </div>

                <div class="flex-grow-1">

                    <h5><a href="{% url 'classified_ads:category' category.slug %}">{{ category.name }}</a></h5>

                    <p class="text-muted">{{ category.description|truncatewords:15 }}</p>

                    <div class="d-flex justify-content-between">

                        <span class="badge bg-primary">{{ category.ad_count }} ads</span>

                        {% if category.children.exists %}

                        <span class="text-muted">{{ category.children.count }} subcategories</span>

                        {% endif %}

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

{% endfor %}

• Icon Integration: Visual category identification
• Subcategory Preview: Shows hierarchy structure
• Live Statistics: Real-time ad and subcategory counts

6

This template (category_list.html) displays all main (parent) categories for classified ads. Here’s what it does:

• Extends the base layout and sets the page title.
• Shows a header with breadcrumb navigation, a title, a description, and a "Post New Ad" button.
• Lists all parent categories in a responsive grid:
  • Each card shows the category’s icon (or a folder icon), name (linked to the category detail page), truncated description, and the number of ads in that category.
  • If the category has subcategories, they are shown as badges in the card footer (up to 4, with a "+N more" badge if there are more).
• If there are multiple pages of categories, pagination controls are shown at the bottom.
• If no categories exist, a friendly empty state is displayed.
• At the bottom, a call-to-action section encourages users to browse all ads or post an ad if they don’t see the right category.
• Includes custom CSS for card hover effects.

This template provides a visually appealing and organized way for users to browse and select categories for classified ads, with easy navigation to subcategories and ad posting.

7

7. favorites.html - User Favorites Template

Favorites Management

{% for favorite in favorites %}

{% with ad=favorite.ad %}

<div class="col-md-6 col-lg-4 mb-4">

    <div class="card h-100">

        {% if ad.images.first %}

        <img src="{{ ad.images.first.image.url }}" class="card-img-top" style="height: 200px; object-fit: cover;">

        {% endif %}

        <div class="card-body">

            <h6>{{ ad.title|truncatechars:50 }}</h6>

            <p class="text-success">${{ ad.price }}</p>

            <p class="text-muted">Added: {{ favorite.created_at|date:"M d, Y" }}</p>

            <div class="d-flex justify-content-between">

                <a href="{% url 'classified_ads:detail' ad.pk %}" class="btn btn-sm btn-primary">View</a>

                <button onclick="toggleFavorite({{ ad.pk }})" class="btn btn-sm btn-outline-danger">Remove</button>

            </div>

        </div>

    </div>

</div>

{% endwith %}

{% endfor %}

• Collection Management: Personal ad collections
• Quick Actions: View and remove functionality
• Timestamp Tracking: When ads were favorited

7

This template (favorites.html) displays the user's list of favorite classified ads. Here’s what it does:

• Extends the base layout and sets the page title to "My Favorites".
• Shows a header with a heart icon, title, and a button to browse more ads.
• If the user has favorites:
  • Displays each favorite ad in a card grid.
  • Each card shows:
    • The ad’s image (or a placeholder if none).
    • Title (truncated), price, category, location, seller username, and the date it was added to favorites.
    • "View Details" button linking to the ad’s detail page.
    • "Remove" button (form) to unfavorite the ad.
    • Badges for promoted or inactive ads (if applicable).
  • Pagination controls if there are multiple pages of favorites.
• If no favorites:
  • Shows an empty state with a broken heart icon, message, and a button to browse ads.

This template provides a user-friendly way for users to view, access, and manage their favorite ads.

8

8. ad_confirm_delete.html - Deletion Confirmation

Safety Features

<div class="card-header bg-danger text-white">

    <h4><i class="fas fa-exclamation-triangle"></i> Confirm Deletion</h4>

</div>

<div class="card-body">

    <div class="alert alert-warning">

        <strong>Warning:</strong> This action cannot be undone!

    </div>

    <h5>Are you sure you want to delete this ad?</h5>

    <!-- Ad preview for confirmation -->

    <form method="post">

        {% csrf_token %}

        <button type="submit" class="btn btn-danger">Yes, Delete</button>

        <a href="{% url 'classified_ads:my_ads' %}" class="btn btn-secondary">Cancel</a>

    </form>

</div>

• Warning System: Clear deletion warnings
• Ad Preview: Shows what will be deleted
• Safe Navigation: Cancel option to prevent accidental deletion

8

This template (ad_confirm_delete.html) is the confirmation page shown when a user tries to delete a classified ad. Here’s what it does:

• Extends the base blog layout.
• Sets the page title to "Delete Ad - [ad title]".
• Shows a warning that deletion is irreversible.
• Asks the user to confirm deletion.
• Displays a card with:
  • The ad’s image (or a placeholder if no image).
  • The ad’s title, category, location, price, and creation date.
• Provides a form with two actions:
  • "Cancel" button: returns to the ad detail page.
  • "Yes, Delete Ad" button: submits the form to actually delete the ad (using POST and CSRF protection).

This ensures users are clearly warned and can review the ad details before confirming deletion.

a

This template (ad_form_clean.html) is for creating or editing a classified ad, with a focus on bilingual (English/Vietnamese) content and a modern, user-friendly UI. Here’s what it does:

• Extends the base layout, sets the page title based on whether it’s a new or existing ad.
• Includes custom CSS for sections, tabs, and tips.
• Shows a breadcrumb for navigation.
• Main form is in a card with a header indicating creation or editing, and a guide for bilingual ad creation.
• Uses tabbed navigation for:
  1. English Content (title, category, ad type, description)
  2. Vietnamese Translation (title, description, translation status, translator)
  3. Contact & Pricing (contact info, location, price, negotiable, expiration)
  4. Images (upload up to 5 images, mark primary, delete existing)
• Action buttons at the bottom: Save as Draft, Publish Ad, Cancel.
• Sidebar with tips for better ads and a translation status legend.
• JavaScript for:
  • Tab switching.
  • Auto-updating translation status based on Vietnamese fields.
  • Previewing selected images before upload.

This template provides a clear, step-by-step, and visually appealing workflow for posting or editing classified ads, supporting both English and Vietnamese content, and managing images.

a

The file ad_form_vi.html is currently empty. There is no code or template content inside, so it does not provide any functionality or display anything at this time. If you intend to create a Vietnamese-only ad form or a special template for Vietnamese content, you would need to add the appropriate HTML and template logic to this file.

a

This template (category_detail.html) displays all classified ads within a specific category. Here’s what it does:

• Extends the base layout and sets the page title to the category name.
• Shows a header with:
  • Breadcrumb navigation (including parent category if present).
  • Category name, icon, and description.
  • Button to post a new ad in this category.
• If there are subcategories, displays them in a grid with icons and ad counts, each linking to their own category page.
• Provides a search/filter form for ads within this category (by query, ad type, location).
• Results header shows the current search context and total ads found, with buttons to browse all categories or post a new ad.
• Ads are displayed in a responsive grid:
  • Each card shows the ad’s image (or a placeholder), title, short description, price, location, badges (type, featured), and time since posted.
  • "View Details" button links to the ad’s detail page.
• Pagination controls for navigating multiple pages of ads.
• If no ads are found, a friendly empty state is shown with options to browse all ads or post the first ad in this category.
• Includes custom CSS for card hover effects.

This template provides a user-friendly, filterable, and visually appealing interface for browsing and searching ads within a specific category, with support for subcategories and easy ad posting.

a

This template (location_detail.html) displays all classified ads for a specific location. Here’s what it does:

• Extends the base layout and sets the page title to the location name.
• Shows a breadcrumb for navigation.
• Location header displays the location name, state/province (if any), number of ads, and a button to post a new ad in this location.
• Main content area:
  • Search/filter form for ads in this location (by query, category, ad type).
  • Hidden input ensures the location filter is always applied.
  • Ads are displayed in a grid:
    • Each card shows the ad’s image (if any), title, short description, price, location, badges (type, category), and time since posted.
    • "View Details" button links to the ad’s detail page.
  • Pagination controls for navigating multiple pages of ads.
  • If no ads are found, a friendly empty state is shown with a button to post the first ad.
• Sidebar:
  • Related (nearby) locations with ad counts, each linking to their own location page.
  • Quick actions: post ad, browse all ads, browse categories.

This template provides a user-friendly, filterable, and visually appealing interface for browsing and searching ads within a specific location, with easy navigation to related locations and quick actions.