diff --git a/README.md b/README.md
index c999656..22c4828 100644
--- 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
index db30a0a..99a46e2 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Coveo Headless Search Interface
+ Headless Tutorial
diff --git a/src/App.css b/src/App.css
index 8cf1fe1..08ec1bd 100644
--- 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
index a803197..c3ca155 100644
--- 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() {
diff --git a/src/Engine.ts b/src/Engine.ts
index d30ddc7..2c3ef4f 100644
--- 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(),
-});
\ No newline at end of file
+});
+
+export const headlessEngine = registerAdditionalFields(buildEngine);
\ No newline at end of file
diff --git a/src/components/Interative-result.tsx b/src/components/InteractiveResult.tsx
similarity index 100%
rename from src/components/Interative-result.tsx
rename to src/components/InteractiveResult.tsx
diff --git a/src/components/Pager.tsx b/src/components/Pager.tsx
deleted file mode 100644
index 84b1d6e..0000000
--- a/src/components/Pager.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Pager as HeadlessPager} from '@coveo/headless';
-import {useEffect, useState, FunctionComponent} from 'react';
-
-interface PagerProps {
- controller: HeadlessPager;
-}
-
-const Pager: FunctionComponent = (props) => {
- const { controller } = props;
- const [state, setState] = useState(controller.state);
-
- useEffect(() => controller.subscribe(() => setState(controller.state)), [ReadableByteStreamController]);
-
- return (
-
- );
-};
-
-export default Pager;
\ No newline at end of file
diff --git a/src/components/ResultList.tsx b/src/components/ResultList.tsx
index 8e82067..e4580ae 100644
--- 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 = (props) => {
{result.title}
{result.excerpt}
+ {typeof result.raw.ec_images === 'string' && (
+ 
+ )}
))}
diff --git a/src/controllers/controllers.tsx b/src/controllers/controllers.ts
similarity index 89%
rename from src/controllers/controllers.tsx
rename to src/controllers/controllers.ts
index fc73ad5..ef9c541 100644
--- a/src/controllers/controllers.tsx
+++ b/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);
\ No newline at end of file