Connect Algolia search page to live product results

Author: w3bdesign

.env.example

@@ -1,3 +1,6 @@
 NODE_ENV="development"
 GRAPHQL_URL = "change me"
-PLACEHOLDER_SMALL_IMAGE_URL = "change me"
+PLACEHOLDER_SMALL_IMAGE_URL = "change me"
+ALGOLIA_APPLICATION_ID = "change me"
+ALGOLIA_SEARCH_ONLY_API_KEY = "change me"
+ALGOLIA_INDEX_NAME = "change me"

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) {

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: {

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() {