Search Products

products/urls.py

@@ -7,4 +7,5 @@
     path('category/<slug:category_slug>/product/<slug:product_slug>/', views.product_detail, name='product_detail'),
     path('category/<slug:category_slug>/', views.products, name='category_products'),
     path('submit_review/<int:product_id>/', views.submit_review, name='submit_review'),
+    path('search/', views.search, name='search'),
 ]

products/views.py

@@ -3,8 +3,8 @@
 from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
-
 from django.urls import reverse
+from django.db.models import Q
 
 from .forms import ReviewForm
 from carts.views import _cart_id
@@ -144,4 +144,20 @@ def submit_review(request, product_id):
             return redirect(referer_url)
 
     # Redirect to the product detail page or the referer URL
-    return redirect(referer_url)
+    return redirect(referer_url)
+
+def search(request):
+    keyword = request.GET.get('keyword', '') # Get keyword or set it as empty string
+    products = Product.objects.all() # Get all products
+    product_count = products.count() # Default count of all the products
+
+    if keyword:
+        products = products.filter(Q(description__icontains=keyword) | Q(product_name__icontains=keyword)).order_by('-created')
+        product_count = products.count()
+
+    context = {
+        'products' : products,
+        'product_count': product_count
+    }
+
+    return render(request, 'products/products.html', context)

templates/includes/navbar.html

@@ -12,11 +12,16 @@
     </a>
 
     <div class="flex w-full flex-wrap items-center">
-      <input
+      <form action="{% url 'search' %}" method="GET">
+        <input
         type="text"
+        name="keyword"
         placeholder="Search something..."
         class="h-11 rounded bg-gray-100 px-6 text-sm outline-[#333] transition-all focus:bg-transparent max-lg:ml-4 max-lg:w-full max-md:mt-4 lg:ml-10 xl:w-96"
       />
+      </form>
+
+
       <div class="ml-auto max-lg:mt-4">
         <ul class="flex items-center">
           <li

templates/products/products.html

@@ -8,7 +8,11 @@
 <div class="bg-gray-50 px-4 py-8 font-sans">
   <div class="mx-auto md:max-w-4xl lg:max-w-6xl">
     <h2 class="mb-12 text-center text-4xl font-extrabold text-gray-800">
-      Top Products
+      {% if request.GET.keyword %}
+        Search Results for "{{ request.GET.keyword }}"
+      {% else %}
+        Top Products
+      {% endif %}
     </h2>
     <div
       class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"