Merge pull request #168 from w3bdesign/dev

Completed a basic Algolia search page design that is working

Author: w3bdesign

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"
                   >

pages/search.vue

@@ -5,27 +5,44 @@
     <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 />
   </ais-instant-search-ssr>
 </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,
@@ -55,6 +71,7 @@ export default {
       indexName: process.env.AlgoliaIndexName,
     }),
   ],
+  layout: 'Layout',
   serverPrefetch() {
     return this.instantsearch.findResultsState(this).then((algoliaState) => {
       this.$ssrContext.nuxt.algoliaState = algoliaState