Use new indexing display value

.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 
 # turbo
 .turbo
+.vercel

composable-ui/src/components/klevu/klevu.tsx

@@ -92,25 +92,14 @@ function CustomGridRenderer(props: { products: KlevuRecord[] }) {
   return (
     <KlevuProductGrid>
       {props.products.map((product) => {
+        // additionalDataToReturn is JSON have been indexed to display key on the product.
+        const originalProductJSON = JSON.parse(product.additionalDataToReturn).default
         return (
           <KlevuProduct key={product.id} product={product} isWrapper>
             {/* Above: Components should be put inside KlevuProduct that has `isWrapper` prop defined. It means that it's empty shell. */}
             {/* Below: Here you can use your own components */}
             <CategoryProductCard
-              product={{
-                brand: product.brand,
-                description: product.description,
-                images: [
-                  {
-                    url: product.image,
-                    alt: product.name,
-                  },
-                ],
-                name: product.name,
-                price: product.price,
-                sku: product.sku,
-                slug: product.url,
-              }}
+              product={originalProductJSON}
             />
           </KlevuProduct>
         )

composable-ui/src/components/product-listing-page/product-listing-page.tsx

@@ -43,6 +43,8 @@ export const ProductListingPage = ({
   const [productsGridOption, setProductsGridOption] =
     useState<CategoryPageProductGrid>('comfortable')
 
+  return null
+  /*
   return (
     <InstantSearchSSRProvider {...serverState}>
       <InstantSearch searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
@@ -116,4 +118,5 @@ export const ProductListingPage = ({
       </InstantSearch>
     </InstantSearchSSRProvider>
   )
+  */
 }