Update products search

rayc2045 · May 3, 2024 · 45fc966 · 45fc966
1 parent aa467c6
commit 45fc966
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -32,11 +32,12 @@
     <script src="./src/app.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/@imacrayon/[email protected]/dist/cdn.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.0/dist/purify.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.x.x/dist/purify.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.x.x/dist/gsap.min.js" defer></script>
   </head>
   <body
     x-data="{ BRAND_NAME, prefer, localStore, ...style, ...utils, sideMenu, router, shop, cart, user }"
+    x-init="await shop.loadProducts()"
     class="min-h-svh flex flex-col tracking-wide bg-gray-100"
     :class="sideMenu.isOpen && 'overflow-hidden'"
     @dragstart.prevent
@@ -100,16 +101,19 @@
             <a :class="a.nav" href="#/about"> About </a>
           </li>
         </ul>
-        <div class="hidden md:flex ml-auto max-w-60 relative" x-data="{ open: false }">
+        <div
+          class="hidden md:flex ml-auto max-w-60 relative"
+          x-data="{ open: false }"
+        >
           <label for="search" class="sr-only">Search</label>
           <input
             id="search"
             type="text"
             placeholder="Search"
-            x-bind="shop.searchText"
+            x-model="shop.searchText"
             class="w-full pl-2.5 pr-10 py-2.5 sm:text-sm rounded-md bg-inherit border-gray-300 shadow"
-            @focus="!shop.products.length && await shop.loadProducts(); open = true"
-            @blur="open = false"
+            @focus="open = true"
+            @click.outside="open = false"
           />
           <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
             <button type="button" class="text-gray-600 hover:text-gray-700">
@@ -119,23 +123,22 @@
           </span>
           <div
             x-cloak
-            x-data="shop.filterProducts"
-            x-show="open && shop.filterProducts.length"
-            class="absolute right-0 top-14 z-50 w-72 rounded-md border border-gray-100 bg-white shadow-lg"
+            x-show="open && shop.searchResult.length"
+            class="absolute top-14 w-72 rounded-lg bg-gray-100 border border-gray-200 shadow-lg"
           >
-            <ul class="max-h-64 space-y-1 overflow-auto p-2">
+            <ul class="p-2 max-h-64 overflow-y-auto space-y-1">
               <template
-                x-for="product in shop.filterProducts"
+                x-for="product in shop.searchResult"
                 :key="product.name"
               >
                 <li>
                   <a
-                    class="flex items-center justify-between rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-50"
-                    :href="product.href"
+                    class="flex items-center justify-between rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:bg-gray-50"
+                    :href="`#/shop/${product.category}/${product.name}`.toLowerCase().replaceAll(' ', '_')"
                   >
                     <span x-text="product.name"></span>
                     <span
-                      class="block rounded bg-gray-900 px-1.5 py-0.5 text-xs text-white"
+                      class="px-1.5 py-0.5 text-xs text-white rounded bg-gray-700"
                       x-text="product.category"
                     ></span>
                   </a>

diff --git a/src/app.js b/src/app.js
@@ -150,6 +150,9 @@ const utils = {
     el.removeAttribute('style');
     for (const prop in style) el.style[prop] = style[prop];
   },
+  getUniques(arr) {
+    return arr.filter((item, idx) => arr.indexOf(item) === idx);
+  },
   copyText(text) {
     navigator.clipboard.writeText(text.trim());
   },
@@ -179,7 +182,7 @@ const router = {
     { path: '/contact', component: '/about/contact.html', title: 'Contact Us' },
     { path: '/faq', component: '/about/faq.html', title: 'Frequently asked questions' },
     { path: '/shop', component: '/shop/shop.html', title: 'Shop' },
-    { path: '/shop/:name', component: '/shop/product.html' },
+    { path: '/shop/:category/:name', component: '/shop/product.html' },
     { path: '/cart', component: '/shop/cart.html', title: 'My cart' },
     { path: '/login', component: '/login.html', title: 'Log in' },
     { path: '/account', component: '/account.html', title: 'My account' },
@@ -235,21 +238,18 @@ const router = {
 };
 
 const shop = {
-  products: [
-    // { name, category, href, image, description, price }
-  ],
+  products: [],
   searchText: '',
-  get filterProducts() {
+  get searchResult() {
     return this.searchText
-      ? this.products.filter(product => product.name.includes(this.searchText))
+      ? this.products.filter(product => product.name.toLowerCase().includes(this.searchText))
       : this.products;
   },
   get categories() {
-    const categories = this.products.map(product => product.category);
-    return categories.filter((c, i) => categories.indexOf(c) === i);
+    return utils.getUniques(this.products.map(product => product.category))
   },
   async loadProducts() {
-    this.products = await utils.getData(api);
+    this.products = await utils.getData('./src/data/products.json');
   },
 };