Merge pull request #887 from w3bdesign/447-search

447 search

Author: w3bdesign

app/Http/Controllers/Api/ProductController.php

@@ -2,17 +2,26 @@
 
 namespace App\Http\Controllers\Api;
 
+use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Models\Product;
 
 class ProductController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
-        return Product::with(['categories' => function ($query) {
+        $query = $request->get('q');
+
+        $products = Product::with(['categories' => function ($query) {
             $query->select('id', 'name');
-        }])
-            ->get();
+        }]);
+
+        if ($query) {
+            $products->where('name', 'like', "%$query%")
+                ->orWhere('description', 'like', "%$query%");
+        }
+
+        return $products->get();
     }
 
     public function show($slug)

public/css/app.css

@@ -759,6 +759,10 @@ video {
   margin-top: 2rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -855,6 +859,14 @@ video {
   height: 100vh;
 }
 
+.h-\[70px\] {
+  height: 70px;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -907,6 +919,62 @@ video {
   width: 100vw;
 }
 
+.w-\[70px\] {
+  width: 70px;
+}
+
+.w-\[400px\] {
+  width: 400px;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-\[300px\] {
+  width: 300px;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[150px\] {
+  width: 150px;
+}
+
+.w-\[170px\] {
+  width: 170px;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
+.max-w-\[65px\] {
+  max-width: 65px;
+}
+
+.max-w-\[80px\] {
+  max-width: 80px;
+}
+
+.max-w-\[90px\] {
+  max-width: 90px;
+}
+
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1095,6 +1163,14 @@ video {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1129,6 +1205,22 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-t-4 {
+  border-top-width: 4px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
@@ -1154,6 +1246,16 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.border-indigo-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
@@ -1215,6 +1317,11 @@ video {
   --tw-bg-opacity: 0.5;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1288,6 +1395,21 @@ video {
   padding-bottom: 1rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1530,6 +1652,14 @@ video {
   transition-duration: 700ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1594,6 +1724,11 @@ video {
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

public/js/app.js

@@ -10,6 +10,7 @@ import Layout from "./layout/Layout.vue";
 import Cart from "./components/Header/Cart.vue";
 import Navbar from "./components/Header/Navbar.vue";
 import MobileMenu from "./components/Header/MobileMenu.vue";
+import Search from "./components/Header/Search.vue";
 
 import ShowAllProducts from "./components/Products/ShowAllProducts.vue";
 import SingleProduct from "./components/Products/SingleProduct.vue";
@@ -44,6 +45,7 @@ app.component("carousel-component", Carousel);
 app.component("mobile-menu", MobileMenu);
 
 app.component("nav-bar", Navbar);
+app.component("search", Search);
 app.component("footer-content", FooterContent);
 app.component("cart-component", Cart);
 app.component("layout-component", Layout);

resources/js/app.js

@@ -1,67 +1,45 @@
 <template>
-  <header
-    role="banner"
-    class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
-  >
+  <header role="banner" class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6">
     <div class="flex flex-wrap justify-between">
       <div class="pr-2 my-2 overflow-hidden">
         <div class="ml-4 lg:ml-0 hidden md:block">
           <router-link to="/">
-            <img
-              alt="Logo"
-              class="h-20 lg:h-24"
-              aria-label="Nettbutikk logo"
-              src="../../../img/svg/Logo.svg"
-            />
+            <img alt="Logo" class="h-20 lg:h-24" aria-label="Nettbutikk logo" src="../../../img/svg/Logo.svg" />
           </router-link>
         </div>
         <router-link to="/">
-          <img
-            alt="Mobile logo"
-            class="h-16 md:hidden block w-32"
-            aria-label="Nettbutikk logo"
-            src="../../../img/svg/MobileLogo.svg"
-          />
+          <img alt="Mobile logo" class="h-16 md:hidden block w-32" aria-label="Nettbutikk logo"
+            src="../../../img/svg/MobileLogo.svg" />
         </router-link>
       </div>
       <div class="lg:hidden block">
         <cart-component />
       </div>
       <mobile-menu />
       <div class="hidden lg:w-1/12 lg:block" />
-      <div
-        id="nav-content"
-        class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
-        aria-expanded="false"
-      >
+      <div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
+        aria-expanded="false">
         <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
           <nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
             <ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
-              <li
-                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
-              >
+              <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
+                <search />
+              </li>
+              <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
                 <router-link tabindex="0" to="/">
-                  <span
-                    class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
-                  >
+                  <span class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue">
                     Home
                   </span>
                 </router-link>
               </li>
-              <li
-                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
-              >
+              <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
                 <router-link tabindex="0" to="/products">
-                  <span
-                    class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
-                  >
+                  <span class="text-2xl text-white no-underline lg:text-black link-underline link-underline-blue">
                     Products
                   </span>
                 </router-link>
               </li>
-              <li
-                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
-              >
+              <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6">
                 <cart-component />
               </li>
             </ul>
@@ -75,7 +53,8 @@
 <style scoped>
 .link-underline {
   border-bottom-width: 0;
-  background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
+  background-image: linear-gradient(transparent, transparent),
+    linear-gradient(#fff, #fff);
   background-size: 0 3px;
   background-position: 0 100%;
   background-repeat: no-repeat;

resources/js/components/Header/Navbar.vue

@@ -0,0 +1,53 @@
+<template>
+    <input
+        class="w-full px-3 py-2 my-2 border-2 border-gray-300 rounded-md text-sm focus:border-blue-500 focus:outline-none transition-all duration-300"
+        type="text" v-model="searchTerm" placeholder="Search">
+
+    <div v-if="data && data.length > 0 && searchTerm.length > 0">
+        <div
+            class="flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md">
+            <div class="w-full">
+                <div v-for="product in data" :key="product.id" class="border-t-2 border-b-2 border-grey-500 py-4 w-full">
+                    <RouterLink :to="{
+                        name: 'single.product',
+                        params: { slug: product.slug },
+                    }">
+                        <div class="flex justify-end">
+                            <div class="h-[70px] w-[70px]">
+                                <img v-if="product.imageUrl"
+                                    class="transform scale-70 max-w-[90px] max-h-full transition ease-in-out duration-200 transform-origin-center left-0 w-65 h-auto object-contain"
+                                    :alt="product.name" :src="product.imageUrl" />
+                            </div>
+                            <div class="w-[170px]">
+                                <div class="product__name">
+                                    <div class="product__title" :title="product.name">
+                                        {{ product.name }}
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <div class="product__price">
+                                        {{ product.price }},-
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </RouterLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import useSWRV from "swrv";
+
+const fetcher = (key) => fetch(key).then((res) => res.json());
+
+const searchTerm = ref("");
+
+const { data } = useSWRV(
+    () => (searchTerm.value ? `/api/products?q=${searchTerm.value}` : null),
+    fetcher
+);
+</script>