filter

static/css/custom.css

@@ -12,4 +12,9 @@
     position: fixed;
     bottom: 01% !important;
     left: 03% !important;
+}
+
+.search-bar{
+    width: 40% !important;
+    margin-left: 10%;
 }

store/templates/store/inc/navbar.html

@@ -4,6 +4,17 @@
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
+
+      <div class="search-bar">
+          <form action="{% url 'searchproducts' %}" method="POST">
+            {% csrf_token %}
+          <div class="input-group ">
+            <input type="search" required id="searchproduct" name="productsearch" class="form-control" placeholder="Search">
+            <button type="submit" class="input-group-text" > <i class="fa fa-search"></i> </button>
+          </div>
+        </form>
+      </div>
+
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto">
           <li class="nav-item">

store/templates/store/layouts/main.html

@@ -20,7 +20,7 @@
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
 <!-- Default theme -->
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>
-
+<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="{% static 'css/custom.css' %}">   
@@ -29,7 +29,7 @@
             text-decoration: none;
         }
         .product-viewtag{
-            background-color: red;
+            background-color: rgb(227, 1, 1);
             color: aliceblue;
             font-size: 11px;
             line-height: 1;
@@ -78,8 +78,11 @@
     <script src="{% static '/js/custom.js' %}" ></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+
     <!-- alertifyjs/ -->
 
+
     <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
     <script>
 
@@ -90,6 +93,25 @@
         {% endfor %}
     </script>
 
+    <script>
+        var availableTags = [];
+        $.ajax({
+            method: "GET",
+            url: "/product-list",
+            success: function (response){
+                startAutocomplete(response)
+            }
+        });
+        function startAutocomplete(availableTags)
+        {
+            $( "#searchproduct" ).autocomplete({
+              source: availableTags
+            });
+        }
+
+
+    </script>
+
     {% block scripts %}
 
     {% endblock scripts %}

store/urls.py

@@ -32,4 +32,9 @@
     path('view-order/<str:t_no>', order.vieworder, name="orderview"),
 
 
+    path('product-list', views.productlistAjax),
+
+
+
+    path('searchproducts', views.searchproducts, name="searchproducts"),
 ]

store/views.py

@@ -1,6 +1,8 @@
 from django.shortcuts import render, redirect
 from .models import *
 from django.contrib import messages
+from django.http import JsonResponse
+
 # Create your views here.
 def home(request):
     return render(request, "store/index.html")
@@ -42,7 +44,26 @@ def Productview(request, cate_slug, prod_slug):
     return render(request, "store/products/view.html", context)
 
 
-
+def productlistAjax(request):
+    products= Product.objects.filter(status=0).values_list('name', flat=True)
+    productslist = list(products)
+
+    return JsonResponse(productslist, safe=False)
 
 
-
+
+
+def searchproducts(request):
+    if request.method == 'POST':
+        searchedterm = request.POST.get('productsearch')
+        if searchedterm == "":
+            return redirect(request.META.get('HTTP_REFERER'))
+        else:
+            product = Product.objects.filter(name__contains=searchedterm).first()
+            if product:
+                return redirect('collections/' +product.category.slug+'/'+product.slug)
+            else:
+                messages.info(request, "No product matched your search")
+                return redirect(request.META.get('HTTP_REFERER'))
+
+    return redirect(request.META.get('HTTP_REFERER'))