diff --git a/README.md b/README.md
index d15338456b..4b1b4e4ca2 100644
--- a/README.md
+++ b/README.md
@@ -86,3 +86,25 @@ Learn more about Catalyst at [catalyst.dev](https://catalyst.dev).
> [!IMPORTANT]
> If you just want to build a storefront, start with the [CLI](#quickstart) which will install the Next.js application in [/core](/core/).
> If you wish to contribute back to Catalyst or create a fork of Catalyst, you can check the [docs for this monorepo](https://catalyst.dev/docs/monorepo) to get started.
+
+
+
+## Klevu Integration Notes
+
+This branch contains the code modifications necessary to integrate the Klevu React Webcomponents in place of the **Search results page**, **Cateogory pages**, and the **Search-as-you-type input** in the header of all pages.
+
+You can inspect the commit to find all the changes made to Catalyst, but we will highlight a few changes here for your convenience.
+
+The most important is found within `core/components/ui/klevu/init.jsx`
+
+This file contains the KlevuInit component which needs two attributes specific to your Klevu account `apiKey` & `url`.
+
+You can find these values from the Klevu Merchant Center (Klevu admin) within the **Store Settings/Store Into** section.
+
+### Integration Overview
+
+Although Klevu has a number of integration options, for this integration of Klevu into Catalyst we used the Webcomponents library available through npm. More information can be [found here](https://webcomponents.klevu.com/).
+
+The webcomponent library is built on top of the Klevu Headless SDK which you can [reference here](https://docs.klevu.com/headless-sdk).
+
+The combination of these two libraries is extremely powerful and offer you a lot of control over the implementation of Klevu into Catalyst.
\ No newline at end of file
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
index 28905b1a91..e8c0b11ec7 100644
--- a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
+++ b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
@@ -16,6 +16,9 @@ import { EmptyState } from './_components/empty-state';
import { SubCategories } from './_components/sub-categories';
import { getCategoryPageData } from './page-data';
+// Klevu Category Merchandizing Component
+import KlevuCategory from '~/components/ui/klevu/category';
+
interface Props {
params: Promise<{
slug: string;
@@ -68,7 +71,15 @@ export default async function Category(props: Props) {
return notFound();
}
- const productsCollection = search.products;
+ // Klevu Category Merchandizing Component
+ if (category) {
+ return (
+
+ );
+ }
+
+ /* Original Category Page commented*/
+ /* const productsCollection = search.products;
const products = productsCollection.items;
const { hasNextPage, hasPreviousPage, endCursor, startCursor } = productsCollection.pageInfo;
@@ -138,7 +149,7 @@ export default async function Category(props: Props) {
- );
+ ); */
}
export const runtime = 'edge';
diff --git a/core/app/[locale]/(default)/(faceted)/search/page.tsx b/core/app/[locale]/(default)/(faceted)/search/page.tsx
index 08a77334f7..500ecea22c 100644
--- a/core/app/[locale]/(default)/(faceted)/search/page.tsx
+++ b/core/app/[locale]/(default)/(faceted)/search/page.tsx
@@ -9,6 +9,9 @@ import { MobileSideNav } from '../_components/mobile-side-nav';
import { SortBy } from '../_components/sort-by';
import { fetchFacetedSearch } from '../fetch-faceted-search';
+// Klevu Search Result Landing Page Component
+import KlevuSearch from '~/components/ui/klevu/search';
+
export async function generateMetadata() {
const t = await getTranslations('Search');
@@ -36,7 +39,13 @@ export default async function Search(props: Props) {
);
}
- const search = await fetchFacetedSearch({ ...searchParams });
+ // Klevu Search Result Landing Page Component
+ return (
+
+ );
+
+ /* Original Search Result Landing Page commented */
+ /* const search = await fetchFacetedSearch({ ...searchParams });
const productsCollection = search.products;
const products = productsCollection.items;
@@ -111,7 +120,7 @@ export default async function Search(props: Props) {
- );
+ ); */
}
export const runtime = 'edge';
diff --git a/core/app/[locale]/(default)/layout.tsx b/core/app/[locale]/(default)/layout.tsx
index a1dc8354ac..880c3b3bd6 100644
--- a/core/app/[locale]/(default)/layout.tsx
+++ b/core/app/[locale]/(default)/layout.tsx
@@ -5,6 +5,9 @@ import { Footer } from '~/components/footer/footer';
import { Header, HeaderSkeleton } from '~/components/header';
import { Cart } from '~/components/header/cart';
+// Klevu Web Component Libray Styles added
+import '@klevu/ui/dist/klevu-ui/klevu-ui.css';
+
interface Props extends PropsWithChildren {
params: Promise<{ locale: string }>;
}
diff --git a/core/app/globals.css b/core/app/globals.css
index b5c61c9567..b820ee39e8 100644
--- a/core/app/globals.css
+++ b/core/app/globals.css
@@ -1,3 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+/* KLEVU STYLES */
+klevu-init {
+ @apply w-full;
+ }
+ klevu-quicksearch::part(quicksearch-content) {
+ @apply w-full overflow-auto;
+ }
+ klevu-quicksearch::part(textfield-input) {
+ @apply rounded-none h-12 w-full appearance-none border-2 border-gray-200 px-12 py-3 text-base placeholder:text-gray-500 hover:border-primary focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:bg-gray-100 disabled:hover:border-gray-200;
+ }
+
+ klevu-merchandising::part(product-addtocart), klevu-search-landing-page::part(product-addtocart), klevu-quicksearch::part(product-addtocart) {
+ display: none !important;
+ visibility: 0 !important;
+ height: 0 !important;
+ }
+
\ No newline at end of file
diff --git a/core/components/ui/header/search.tsx b/core/components/ui/header/search.tsx
index f1c7819e57..36a8362031 100644
--- a/core/components/ui/header/search.tsx
+++ b/core/components/ui/header/search.tsx
@@ -16,6 +16,9 @@ import { Price } from '../product-card';
import { Input } from './input';
+// Klevu Quick Search Component
+import KlevuQuicksearch from '~/components/ui/klevu/quick-search';
+
interface Image {
src: string;
altText: string;
@@ -137,7 +140,11 @@ const Search = ({ initialTerm = '', logo, onSearch }: Props) => {
)}
-
+
+ {/* Default Catalyst Quick Search Form has been commented out */}
+ {/* {
/>
-
+ */}