Merge pull request #1 from coveo/DOC-15369-Resurrect-initial-Headless…

…-tutorial DOC-15369 update readme
coveooss · Aug 7, 2024 · 0ab4bbf · 0ab4bbf
2 parents 7797bd8 + 3cf03c9
commit 0ab4bbf
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ This project was set up with [Vite](https://vitejs.dev/guide/#scaffolding-your-f
 
 ## Setup
 
-Vite requires `Node.js` version 18+ or 20+, please upgrade if warned.
+Vite requires `Node.js` version 18+ or 20+, please upgrade if warned by your package manager.
 
 Clone or download the project and run `npm install` in the project directory.
 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Coveo Headless Search Interface</title>
+    <title>Headless Tutorial</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -5,10 +5,15 @@
   text-align: center;
 }
 
+img {
+  max-width: 40%;
+}
+
 .search-section {
   display: flex;
   justify-content: center;
   margin-bottom: 2rem;
+  text-align: left;
 }
 
 .search-box {

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,13 +8,11 @@ import {
   facet as FacetController,
   resultList as ResultListController,
   sort as SortController,
-  pager as PagerController
 } from './controllers/controllers'
 import './App.css'
 
 import { headlessEngine } from "./Engine";
 import { criteria, Sort } from './components/Sort';
-import Pager from './components/Pager';
 
 let didInit = false;
 
@@ -39,7 +37,6 @@ function App() {
           <div className="results-section column">
             <Sort controller={SortController} criteria={criteria}/>
             <ResultList controller={ResultListController} />
-            <Pager controller={PagerController} />
           </div>
       </div>
     </>

diff --git a/src/Engine.ts b/src/Engine.ts
@@ -1,9 +1,28 @@
 import { 
   buildSearchEngine, 
-  getSampleSearchEngineConfiguration
+  getSampleSearchEngineConfiguration,
+  loadFieldActions,
+  SearchEngine,
 } from "@coveo/headless";
 
 
-export const headlessEngine = buildSearchEngine({
+const FIELDS = [
+  "ec_brand",
+  "ec_images",
+  "ec_price",
+  "ec_promo_price",
+  "ec_rating",
+  "ec_reviews",
+];
+
+const registerAdditionalFields = (headlessEngine: SearchEngine) => {
+  const fieldActions = loadFieldActions(headlessEngine);
+  headlessEngine.dispatch(fieldActions.registerFieldsToInclude(FIELDS));
+  return headlessEngine;
+}
+
+const buildEngine = buildSearchEngine({
   configuration: getSampleSearchEngineConfiguration(),
-});
+});
+
+export const headlessEngine = registerAdditionalFields(buildEngine);
diff --git a/src/components/Interative-result.tsx → src/components/InteractiveResult.tsx b/src/components/Interative-result.tsx → src/components/InteractiveResult.tsx
diff --git a/src/components/Pager.tsx b/src/components/Pager.tsx
diff --git a/src/components/ResultList.tsx b/src/components/ResultList.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, FunctionComponent } from "react";
 import { ResultList as ResultListController } from "@coveo/headless";
-import { InteractiveResult } from "./Interative-result";
+import { InteractiveResult } from "./InteractiveResult";
 
 interface ResultListProps {
   controller: ResultListController;
@@ -28,6 +28,9 @@ const ResultList: FunctionComponent<ResultListProps> = (props) => {
                 <h2>{result.title}</h2>
               </InteractiveResult>
               <p>{result.excerpt}</p>
+              {typeof result.raw.ec_images === 'string' && (
+                <img src={result.raw.ec_images} alt="" />
+              )}
             </article>
           </li>
         ))}

diff --git a/src/controllers/controllers.tsx → src/controllers/controllers.ts b/src/controllers/controllers.tsx → src/controllers/controllers.ts
@@ -3,7 +3,6 @@ import {
   buildResultList,
   buildFacet,
   buildSort,
-  buildPager,
 } from "@coveo/headless";
 import { criteria } from "../components/Sort";
 import { headlessEngine } from "../Engine";
@@ -18,5 +17,3 @@ const initialCriterion = criteria[0][1];
 export const sort = buildSort(headlessEngine, {
   initialState: { criterion: initialCriterion },
 });
-
-export const pager = buildPager(headlessEngine);