Restored Index Agnostic

components/product/ProductCard/FUTURE_ProductCard.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import cn from 'classnames'
+import Link from 'next/link'
 import Image, { ImageProps } from 'next/image'
 import s from './ProductCard.module.css'
 // Restore Wishlist func
@@ -13,44 +14,63 @@ interface Props {
 }
 
 const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
-  const firstImage = product.images[0]
   return (
-    <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
-      {variant === 'slim' ? (
-        <div className="relative overflow-hidden box-border">
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-              {product.name}
-            </span>
-            {/* Image */}
-          </div>
-        </div>
-      ) : (
-        <>
-          <div className={s.squareBg} />
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
-              <h3 className={s.productTitle}>
-                <span>{product.name}</span>
-              </h3>
-              <span className={s.productPrice}>{product.price}</span>
+    <Link href={`product/${product.slug}`}>
+      <a
+        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+      >
+        {variant === 'slim' ? (
+          <div className="relative overflow-hidden box-border">
+            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+                {product.name}
+              </span>
             </div>
-          </div>
-          <div className={s.imageContainer}>
-            {firstImage.src && (
+            {product.images[0] && (
               <Image
+                quality="85"
                 alt={product.name}
-                className={s.productImage}
-                src={firstImage.src}
-                height={540}
-                width={540}
+                src={product.images[0].url}
+                height={320}
+                width={320}
+                layout="fixed"
                 {...imgProps}
               />
             )}
           </div>
-        </>
-      )}
-    </a>
+        ) : (
+          <>
+            <div className={s.squareBg} />
+            <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+              <div className="absolute top-0 left-0 pr-16 max-w-full">
+                <h3 className={s.productTitle}>
+                  <span>{product.name}</span>
+                </h3>
+                <span className={s.productPrice}>
+                  {product.prices[0].value}
+                  &nbsp;
+                  {product.prices[0].currencyCode}
+                </span>
+              </div>
+            </div>
+            <div className={s.imageContainer}>
+              {product.images[0] && (
+                <Image
+                  alt={product.name}
+                  className={s.productImage}
+                  src={product.images[0].url}
+                  height={540}
+                  width={540}
+                  quality="85"
+                  layout="responsive"
+                  {...imgProps}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </a>
+    </Link>
   )
 }
 

components/ui/Marquee/Marquee.module.css

@@ -1,15 +1,16 @@
 .root {
-  @apply w-full;
+  @apply w-full relative;
+  height: 320px;
   min-width: 100%;
 }
 
 .container {
   @apply flex flex-row items-center;
+}
 
-  & > * {
-    @apply flex-1 px-16 py-4;
-    width: 430px;
-  }
+.container > * {
+  @apply relative flex-1 px-16 py-4 h-full;
+  min-height: 320px;
 }
 
 .primary {

framework/types.d.ts

@@ -1,25 +1,20 @@
+interface ProductImage {
+  url: string
+  alt?: string
+}
+
 interface Product {
   id: string | number
   name: string
   description: string
-  images: Image[]
+  images: ProductImage[]
+  prices: ProductPrice[]
   slug: string
-  price: string
-  variantId: string
+  path?: string
 }
 
-interface Image {
-  src: string
-  alt?: string
+interface ProductPrice {
+  value: number | string
+  currencyCode: 'USD' | 'ARS'
+  type?: 'price' | 'retail' | 'sale' | string
 }
-
-// interface NextImageProps {
-//   src: string
-//   width: number | string
-//   height: number | string
-//   layout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
-//   priority?: boolean
-//   loading?: 'eager' | 'lazy'
-//   sizes?: string
-//   alt?: string
-// }

pages/index.tsx

@@ -13,13 +13,23 @@ import getAllPages from '@framework/api/operations/get-all-pages'
 // Outputs from providers should already be normalized
 // TODO (bc) move this to the provider
 
-function normalize(arr: any[]) {
+function productsNormalizer(arr: any[]) {
   // Normalizes products arr response and flattens node edges
   return arr.map(
     ({
-      node: { entityId: id, images, variants, productOptions, ...rest },
+      node: {
+        entityId: id,
+        images,
+        variants,
+        productOptions,
+        prices,
+        path,
+        ...rest
+      },
     }) => ({
       id,
+      path,
+      slug: path.slice(1, -1),
       images: images.edges.map(
         ({ node: { urlOriginal, altText, ...rest } }: any) => ({
           url: urlOriginal,
@@ -29,6 +39,12 @@ function normalize(arr: any[]) {
       ),
       variants: variants.edges.map(({ node }: any) => node),
       productOptions: productOptions.edges.map(({ node }: any) => node),
+      prices: [
+        {
+          value: prices.price.value,
+          currencyCode: prices.price.currencyCode,
+        },
+      ],
       ...rest,
     })
   )
@@ -46,10 +62,8 @@ export async function getStaticProps({
     preview,
   })
 
-  const products = normalize(rawProducts)
-
-  // console.log(products)
-
+  // Remove normalizer and send to framework provider.
+  const products = productsNormalizer(rawProducts)
   const { categories, brands } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
 
@@ -83,11 +97,11 @@ export default function Home({
           />
         ))}
       </Grid>
-      {/* <Marquee variant="secondary">
-        {bestSelling.slice(3, 6).map(({ node }) => (
+      <Marquee variant="secondary">
+        {products.slice(0, 3).map((product, i) => (
           <ProductCard
-            key={node.path}
-            product={node}
+            key={product.id}
+            product={product}
             variant="slim"
             imgProps={{
               width: 320,
@@ -107,22 +121,22 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {featured.slice(3, 6).map(({ node }, i) => (
+        {products.slice(0, 3).map((product, i) => (
           <ProductCard
-            key={node.path}
-            product={node}
+            key={product.id}
+            product={product}
             imgProps={{
-              width: i === 1 ? 1080 : 540,
-              height: i === 1 ? 1080 : 540,
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
             }}
           />
         ))}
       </Grid>
       <Marquee>
-        {bestSelling.slice(0, 3).map(({ node }) => (
+        {products.slice(0, 3).map((product, i) => (
           <ProductCard
-            key={node.path}
-            product={node}
+            key={product.id}
+            product={product}
             variant="slim"
             imgProps={{
               width: 320,
@@ -130,7 +144,7 @@ export default function Home({
             }}
           />
         ))}
-      </Marquee> */}
+      </Marquee>
       {/* <HomeAllProductsGrid
         newestProducts={newestProducts}
         categories={categories}