From ffcb65640e7c1990f2d8e2f655e2e13366022177 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 2 Dec 2020 04:43:31 +0100
Subject: [PATCH 1/2] Replace search bar with search page for now

---
 components/Header/Navbar.vue | 15 ++++++++++-----
 pages/search.vue             |  1 +
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/Header/Navbar.vue b/components/Header/Navbar.vue
index 6d96f753..e6f5e0c0 100644
--- a/components/Header/Navbar.vue
+++ b/components/Header/Navbar.vue
@@ -32,11 +32,6 @@
                 <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 lg:px-4"
-                  >
-                    <Search />
-                  </li>
                   <li
                     class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
@@ -68,6 +63,16 @@
                       >
                     </NuxtLink>
                   </li>
+                  <li
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                  >
+                    <NuxtLink to="/search">
+                      <span
+                        class="text-xl text-white no-underline lg:text-black is-active"
+                        >Search</span
+                      >
+                    </NuxtLink>
+                  </li>
                   <li
                     class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
diff --git a/pages/search.vue b/pages/search.vue
index 5d886ce0..612ddce5 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -55,6 +55,7 @@ export default {
       indexName: process.env.AlgoliaIndexName,
     }),
   ],
+  layout: 'Layout',
   serverPrefetch() {
     return this.instantsearch.findResultsState(this).then((algoliaState) => {
       this.$ssrContext.nuxt.algoliaState = algoliaState

From 0c47885fe625b25f10c43b5261d903140da15a75 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 2 Dec 2020 05:08:08 +0100
Subject: [PATCH 2/2] Display products in search and link to product page

---
 pages/search.vue | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/pages/search.vue b/pages/search.vue
index 612ddce5..f4893c29 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -5,15 +5,27 @@
     <ais-refinement-list attribute="brand" />
     <ais-hits>
       <template slot="item" slot-scope="{ item }">
-        <p>
-          <ais-highlight attribute="product_name" :hit="item" />
-        </p>
-        <p>
-          <ais-highlight attribute="short_description" :hit="item" />
+        <NuxtLink
+          class="text-black cursor-pointer hover:underline"
+          :to="{
+            path: '/product/' + item.product_name,
+            query: { id: item.objectID },
+          }"
+        >
+          <p class="p-2 text-2xl font-bold text-center">
+            {{ item.product_name }}
+          </p>
+        </NuxtLink>
+
+        <p class="p-2 text-xl text-center">
+          {{ item.short_description }}
         </p>
-        <p>
+        <p class="p-2">
           <img :src="item.product_image" alt="item.product_name" />
         </p>
+        <p class="p-2 text-xl text-center">
+          {{ item.sale_price ? item.sale_price : item.regular_price }} kr
+        </p>
       </template>
     </ais-hits>
     <ais-pagination />
@@ -21,11 +33,16 @@
 </template>
 
 <script>
+// TODO
+/*
+  Replace empty spaces with dash (-)
+
+  const trimmedProductName = product_name.replace(/ /g, '-');
+*/
 import {
   AisInstantSearchSsr,
   AisRefinementList,
   AisHits,
-  AisHighlight,
   AisSearchBox,
   AisStats,
   AisPagination,
@@ -44,7 +61,6 @@ export default {
     AisInstantSearchSsr,
     AisRefinementList,
     AisHits,
-    AisHighlight,
     AisSearchBox,
     AisStats,
     AisPagination,