From 23e3859553049ebbbd2bcfce0793b8da4f96badb Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 2 Dec 2020 04:34:49 +0100
Subject: [PATCH] Connect Algolia search page to live product results

---
 .env.example                            |  5 ++++-
 components/Products/ShowAllProducts.vue |  1 -
 nuxt.config.js                          |  3 +++
 pages/search.vue                        | 14 +++++++++-----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/.env.example b/.env.example
index e8a414e8..9d2cdb37 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,6 @@
 NODE_ENV="development"
 GRAPHQL_URL = "change me"
-PLACEHOLDER_SMALL_IMAGE_URL = "change me"
\ No newline at end of file
+PLACEHOLDER_SMALL_IMAGE_URL = "change me"
+ALGOLIA_APPLICATION_ID = "change me"
+ALGOLIA_SEARCH_ONLY_API_KEY = "change me"
+ALGOLIA_INDEX_NAME = "change me"
\ No newline at end of file
diff --git a/components/Products/ShowAllProducts.vue b/components/Products/ShowAllProducts.vue
index c2493c29..20d911ac 100644
--- a/components/Products/ShowAllProducts.vue
+++ b/components/Products/ShowAllProducts.vue
@@ -52,7 +52,6 @@ export default {
   name: 'ShowProducts',
   props: {
     products: { type: Array, required: true },
-    // TODO Add more prop types here
   },
   methods: {
     productImage(product) {
diff --git a/nuxt.config.js b/nuxt.config.js
index fd9a8637..75736133 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -7,6 +7,9 @@ export default {
   env: {
     graphqlUrl: process.env.GRAPHQL_URL || 'http://localhost:3000/graphql',
     placeholderSmallImage: process.env.PLACEHOLDER_SMALL_IMAGE_URL || '',
+    AlgoliaApplicationId: process.env.ALGOLIA_APPLICATION_ID || '',
+    AlgoliaSearchOnlyAPIKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY || '',
+    AlgoliaIndexName: process.env.ALGOLIA_INDEX_NAME || '',
   },
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
diff --git a/pages/search.vue b/pages/search.vue
index 38fca3b5..5d886ce0 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -6,10 +6,13 @@
     <ais-hits>
       <template slot="item" slot-scope="{ item }">
         <p>
-          <ais-highlight attribute="name" :hit="item" />
+          <ais-highlight attribute="product_name" :hit="item" />
         </p>
         <p>
-          <ais-highlight attribute="brand" :hit="item" />
+          <ais-highlight attribute="short_description" :hit="item" />
+        </p>
+        <p>
+          <img :src="item.product_image" alt="item.product_name" />
         </p>
       </template>
     </ais-hits>
@@ -28,11 +31,12 @@ import {
   AisPagination,
   createServerRootMixin,
 } from 'vue-instantsearch'
+
 import algoliasearch from 'algoliasearch/lite'
 
 const searchClient = algoliasearch(
-  'latency',
-  '6be0576ff61c053d5f9a3225e2a90f76'
+  process.env.AlgoliaApplicationId,
+  process.env.AlgoliaSearchOnlyAPIKey
 )
 
 export default {
@@ -48,7 +52,7 @@ export default {
   mixins: [
     createServerRootMixin({
       searchClient,
-      indexName: 'instant_search',
+      indexName: process.env.AlgoliaIndexName,
     }),
   ],
   serverPrefetch() {