feat: Add Global Navbar Search

web/migrations/0064_alter_goods_options_alter_order_options.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.1.15 on 2026-02-23 05:38
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0063_virtualclassroom_virtualclassroomcustomization_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='goods',
+            options={'ordering': ['-created_at']},
+        ),
+        migrations.AlterModelOptions(
+            name='order',
+            options={'ordering': ['-created_at']},
+        ),
+    ]

web/models.py

@@ -1318,6 +1318,9 @@ def save(self, *args, **kwargs):
             self.slug = slug
         super().save(*args, **kwargs)
 
+    class Meta:
+        ordering = ["-created_at"]
+
     def __str__(self):
         return f"{self.name} (${self.price})"
 
@@ -1636,6 +1639,9 @@ def save(self, *args, **kwargs):
     def generate_tracking_number(self):
         return f"TRACK-{self.pk}-{int(time.time())}-{uuid.uuid4().hex[:6].upper()}"
 
+    class Meta:
+        ordering = ["-created_at"]
+
     def __str__(self):
         return f"Order #{self.id} ({self.user.email})"
 

web/templates/base.html

@@ -343,16 +343,22 @@
           </div>
           <!-- Search bar (persistent element) -->
           <div class="relative hidden lg:inline-block w-[250px]">
-            <form action="{% url 'course_search' %}" method="get" class="m-0">
+            <form action="{% url 'course_search' %}"
+                  method="get"
+                  class="m-0"
+                  id="desktop-search-form">
               <input type="text"
                      name="q"
+                     autocomplete="off"
                      placeholder="What do you want to learn?"
-                     class="rounded-full w-[250px] bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
+                     class="navbar-search-input rounded-full w-[250px] bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
               <button type="submit"
                       class="absolute right-3 top-2 text-gray-500 dark:text-gray-300">
                 <i class="fas fa-search"></i>
               </button>
             </form>
+            <div class="navbar-search-results hidden absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto border border-gray-100 dark:border-gray-700">
+            </div>
           </div>
           <!-- Messaging Button -->
           <a href="{% url 'inbox' %}"
@@ -365,15 +371,19 @@
             <a href="{% url 'cart_view' %}"
                class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
               <i class="fa-solid fa-shopping-cart"></i>
-              {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
-                <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                  {% if request.user.is_authenticated %}
-                    {{ request.user.cart.item_count }}
-                  {% else %}
-                    {{ request.session.session_key|get_cart_item_count }}
+              {% with item_count=request.user.cart.item_count|default:0 %}
+                {% with s_count=request.session.session_key|get_cart_item_count|default:0 %}
+                  {% if item_count > 0 or s_count > 0 %}
+                    <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                      {% if request.user.is_authenticated %}
+                        {{ item_count }}
+                      {% else %}
+                        {{ s_count }}
+                      {% endif %}
+                    </span>
                   {% endif %}
-                </span>
-              {% endif %}
+                {% endwith %}
+              {% endwith %}
             </a>
             <!-- New Notification Button for Invitations -->
             <a href="{% url 'user_invitations' %}"
@@ -542,16 +552,22 @@
             <div class="pt-16 px-4 pb-8">
               <!-- Search bar -->
               <div class="relative mb-6">
-                <form action="{% url 'course_search' %}" method="get" class="m-0">
+                <form action="{% url 'course_search' %}"
+                      method="get"
+                      class="m-0"
+                      id="mobile-search-form">
                   <input type="text"
                          name="q"
+                         autocomplete="off"
                          placeholder="What do you want to learn?"
-                         class="w-full rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
+                         class="navbar-search-input w-full rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
                   <button type="submit"
                           class="absolute right-3 top-2.5 text-gray-500 dark:text-gray-400">
                     <i class="fas fa-search"></i>
                   </button>
                 </form>
+                <div class="navbar-search-results hidden absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto border border-gray-100 dark:border-gray-700">
+                </div>
               </div>
               <!-- Mobile Navigation Menu with Accordions -->
               <div class="space-y-4">
@@ -758,15 +774,19 @@
                     <i class="fa-solid fa-shopping-cart mr-2 text-teal-500"></i>
                     <span>Cart</span>
                   </div>
-                  {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
-                    <span class="bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
-                      {% if request.user.is_authenticated %}
-                        {{ request.user.cart.item_count }}
-                      {% else %}
-                        {{ request.session.session_key|get_cart_item_count }}
+                  {% with item_count=request.user.cart.item_count|default:0 %}
+                    {% with s_count=request.session.session_key|get_cart_item_count|default:0 %}
+                      {% if item_count > 0 or s_count > 0 %}
+                        <span class="bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                          {% if request.user.is_authenticated %}
+                            {{ item_count }}
+                          {% else %}
+                            {{ s_count }}
+                          {% endif %}
+                        </span>
                       {% endif %}
-                    </span>
-                  {% endif %}
+                    {% endwith %}
+                  {% endwith %}
                 </a>
                 <!-- User Account Section -->
                 {% if user.is_authenticated %}
@@ -1060,7 +1080,8 @@ <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">CONNECT WITH
               <a href="{% url 'about' %}"
                  class="hover:text-teal-600 dark:hover:text-teal-400">About Us</a>
               <a href="{% url 'terms' %}#terms"
-                 class="hover:text-teal-600 dark:hover:text-teal-400">Terms & Conditions</a>
+                 class="hover:text-teal-600 dark:hover:text-teal-400">Terms &
+              Conditions</a>
               <a href="{% url 'terms' %}#privacy"
                  class="hover:text-teal-600 dark:hover:text-teal-400">Privacy Policy</a>
               <a href="{% url 'terms' %}#cookies"
@@ -1116,6 +1137,71 @@ <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">CONNECT WITH
                 }
             });
         }
+
+        // Global Search Functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInputs = document.querySelectorAll('.navbar-search-input');
+            let debounceTimer;
+
+            searchInputs.forEach(input => {
+                const resultsContainer = input.closest('.relative').querySelector('.navbar-search-results');
+
+                input.addEventListener('input', function() {
+                    clearTimeout(debounceTimer);
+                    const query = this.value.trim();
+
+                    if (query.length < 2) {
+                        resultsContainer.innerHTML = '';
+                        resultsContainer.classList.add('hidden');
+                        return;
+                    }
+
+                    debounceTimer = setTimeout(() => {
+                        fetch(`/api/search/?q=${encodeURIComponent(query)}`)
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.results.length > 0) {
+                                    resultsContainer.innerHTML = data.results.map(result => `
+                                        <a href="${result.url}" class="flex items-center px-4 py-3 hover:bg-teal-50 dark:hover:bg-teal-900/30 border-b border-gray-100 dark:border-gray-700 last:border-0 transition-colors">
+                                            <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-400 mr-3">
+                                                <i class="${result.icon}"></i>
+                                            </div>
+                                            <div>
+                                                <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">${result.title}</div>
+                                                <div class="text-xs text-gray-500 dark:text-gray-400 capitalize">${result.type}</div>
+                                            </div>
+                                        </a>
+                                    `).join('');
+                                    resultsContainer.classList.remove('hidden');
+                                } else {
+                                    resultsContainer.innerHTML = `
+                                        <div class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
+                                            No results found for "${query}"
+                                        </div>
+                                    `;
+                                    resultsContainer.classList.remove('hidden');
+                                }
+                            });
+                    }, 300);
+                });
+
+                // Close results on escape
+                input.addEventListener('keydown', function(e) {
+                    if (e.key === 'Escape') {
+                        resultsContainer.classList.add('hidden');
+                    }
+                });
+            });
+
+            // Close results when clicking outside
+            document.addEventListener('click', function(event) {
+                if (!event.target.closest('.relative')) {
+                    document.querySelectorAll('.navbar-search-results').forEach(container => {
+                        container.classList.add('hidden');
+                    });
+                }
+            });
+        });
     </script>
     {% block extra_js %}
     {% endblock extra_js %}

web/urls.py

@@ -102,6 +102,7 @@
     # Course Management
     path("courses/create/", views.create_course, name="create_course"),
     path("courses/search/", views.course_search, name="course_search"),
+    path("api/search/", views.global_search_api, name="global_search_api"),
     path("courses/<slug:slug>/", views.course_detail, name="course_detail"),
     path("courses/<slug:course_slug>/enroll/", views.enroll_course, name="enroll_course"),
     path("courses/<slug:slug>/add-session/", views.add_session, name="add_session"),

web/views.py

@@ -8839,3 +8839,38 @@ def leave_session_waiting_room(request, course_slug):
         messages.info(request, "You are not in the session waiting room for this course.")
 
     return redirect("course_detail", slug=course_slug)
+
+
+def global_search_api(request):
+    """API endpoint for global search of subjects and courses."""
+    query = request.GET.get("q", "").strip()
+    if not query or len(query) < 2:
+        return JsonResponse({"results": []})
+
+    results = []
+
+    # Search Subjects
+    subjects = Subject.objects.filter(name__icontains=query)[:5]
+    for subject in subjects:
+        results.append(
+            {
+                "type": "subject",
+                "title": subject.name,
+                "url": reverse("course_search") + f"?subject={subject.slug}",
+                "icon": "fas fa-tag",
+            }
+        )
+
+    # Search Courses
+    courses = Course.objects.filter(Q(title__icontains=query) | Q(tags__icontains=query), status="published")[:5]
+    for course in courses:
+        results.append(
+            {
+                "type": "course",
+                "title": course.title,
+                "url": reverse("course_detail", kwargs={"slug": course.slug}),
+                "icon": "fas fa-book",
+            }
+        )
+
+    return JsonResponse({"results": results})