Progress

components/product/ProductCard/FUTURE_ProductCard.tsx

@@ -1,20 +1,18 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import Image from 'next/image'
+import Image, { ImageProps } from 'next/image'
 import s from './ProductCard.module.css'
+// Restore Wishlist func
 // import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
   product: Product
   variant?: 'slim' | 'simple'
+  imgProps?: Omit<ImageProps, 'src'>
 }
 
-const ProductCard: FC<Props> = ({ className, product, variant }) => {
-  const defaultImageProps = {
-    layout: 'responsive',
-  }
-
+const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
   return (
     <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
       {variant === 'slim' ? (
@@ -38,14 +36,13 @@ const ProductCard: FC<Props> = ({ className, product, variant }) => {
             </div>
           </div>
           <div className={s.imageContainer}>
-            {/* Image */}
-
             <Image
-              quality="85"
-              src={product.images[0].src}
               alt={product.name}
               className={s.productImage}
-              {...defaultImageProps}
+              src={product.images[0].src}
+              height={540}
+              width={540}
+              {...imgProps}
             />
           </div>
         </>

framework/types.d.ts

@@ -13,13 +13,13 @@ interface Images {
   alt?: string
 }
 
-interface NextImage {
-  src: string
-  width: number | string
-  height: number | string
-  layout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
-  priority?: boolean
-  loading?: 'eager' | 'lazy'
-  sizes?: string
-  alt?: 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 copy.tsx

@@ -0,0 +1,152 @@
+import rangeMap from '@lib/range-map'
+import { Layout } from '@components/common'
+import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
+import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+
+import { getConfig } from '@framework/api'
+import getAllProducts from '@framework/api/operations/get-all-products'
+import getSiteInfo from '@framework/api/operations/get-site-info'
+import getAllPages from '@framework/api/operations/get-all-pages'
+
+export async function getStaticProps({
+  preview,
+  locale,
+}: GetStaticPropsContext) {
+  const config = getConfig({ locale })
+
+  // Get Featured Products
+  const { products: featuredProducts } = await getAllProducts({
+    variables: { field: 'featuredProducts', first: 6 },
+    config,
+    preview,
+  })
+
+  // Get Best Selling Products
+  const { products: bestSellingProducts } = await getAllProducts({
+    variables: { field: 'bestSellingProducts', first: 6 },
+    config,
+    preview,
+  })
+
+  // Get Best Newest Products
+  const { products: newestProducts } = await getAllProducts({
+    variables: { field: 'newestProducts', first: 12 },
+    config,
+    preview,
+  })
+
+  const { categories, brands } = await getSiteInfo({ config, preview })
+  const { pages } = await getAllPages({ config, preview })
+
+  // These are the products that are going to be displayed in the landing.
+  // We prefer to do the computation at buildtime/servertime
+  const { featured, bestSelling } = (() => {
+    // Create a copy of products that we can mutate
+    const products = [...newestProducts]
+    // If the lists of featured and best selling products don't have enough
+    // products, then fill them with products from the products list, this
+    // is useful for new commerce sites that don't have a lot of products
+    return {
+      featured: rangeMap(6, (i) => featuredProducts[i] ?? products.shift())
+        .filter(nonNullable)
+        .sort((a, b) => a.node.prices.price.value - b.node.prices.price.value)
+        .reverse(),
+      bestSelling: rangeMap(
+        6,
+        (i) => bestSellingProducts[i] ?? products.shift()
+      ).filter(nonNullable),
+    }
+  })()
+
+  return {
+    props: {
+      featured,
+      bestSelling,
+      newestProducts,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 14400,
+  }
+}
+
+const nonNullable = (v: any) => v
+
+export default function Home({
+  featured,
+  bestSelling,
+  brands,
+  categories,
+  newestProducts,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <div>
+      <Grid>
+        {featured.slice(0, 3).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            imgWidth={i === 0 ? 1080 : 540}
+            imgHeight={i === 0 ? 1080 : 540}
+            imgPriority
+            imgLoading="eager"
+          />
+        ))}
+      </Grid>
+      <Marquee variant="secondary">
+        {bestSelling.slice(3, 6).map(({ node }) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+            imgLayout="fixed"
+          />
+        ))}
+      </Marquee>
+      <Hero
+        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
+        description="
+        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
+        ‘Carbon’ iteration, and now release details have been locked in for
+        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
+        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
+        Hebrew. It’s now undergone a name change, and will be referred to as
+        ‘Natural’."
+      />
+      <Grid layout="B">
+        {featured.slice(3, 6).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            imgWidth={i === 1 ? 1080 : 540}
+            imgHeight={i === 1 ? 1080 : 540}
+          />
+        ))}
+      </Grid>
+      <Marquee>
+        {bestSelling.slice(0, 3).map(({ node }) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+            imgLayout="fixed"
+          />
+        ))}
+      </Marquee>
+      <HomeAllProductsGrid
+        categories={categories}
+        brands={brands}
+        newestProducts={newestProducts}
+      />
+    </div>
+  )
+}
+
+Home.Layout = Layout

pages/index.tsx

@@ -1,6 +1,6 @@
 import rangeMap from '@lib/range-map'
 import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
+import ProductCard from '@components/product/ProductCard/FUTURE_ProductCard'
 import { Grid, Marquee, Hero } from '@components/ui'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
@@ -89,10 +89,10 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            imgWidth={i === 0 ? 1080 : 540}
-            imgHeight={i === 0 ? 1080 : 540}
-            imgPriority
-            imgLoading="eager"
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
           />
         ))}
       </Grid>
@@ -102,9 +102,10 @@ export default function Home({
             key={node.path}
             product={node}
             variant="slim"
-            imgWidth={320}
-            imgHeight={320}
-            imgLayout="fixed"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
           />
         ))}
       </Marquee>
@@ -123,8 +124,10 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            imgWidth={i === 1 ? 1080 : 540}
-            imgHeight={i === 1 ? 1080 : 540}
+            imgProps={{
+              width: i === 1 ? 1080 : 540,
+              height: i === 1 ? 1080 : 540,
+            }}
           />
         ))}
       </Grid>
@@ -134,16 +137,17 @@ export default function Home({
             key={node.path}
             product={node}
             variant="slim"
-            imgWidth={320}
-            imgHeight={320}
-            imgLayout="fixed"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
           />
         ))}
       </Marquee>
       <HomeAllProductsGrid
+        newestProducts={newestProducts}
         categories={categories}
         brands={brands}
-        newestProducts={newestProducts}
       />
     </div>
   )