app/page: products list markup, further details

app/page.js

@@ -3,8 +3,28 @@ import Image from 'next/image';
 
 import { getCollectionProducts } from 'lib/shopify';
 
+const formatPrice = ({ amount, currencyCode }) => {
+    const USDollar = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: currencyCode,
+    });
+
+    return USDollar.format(amount);
+};
+
+const formatPriceRange = ({ maxVariantPrice, minVariantPrice }) => {
+    if (maxVariantPrice.amount == minVariantPrice.amount) {
+        return `${formatPrice(maxVariantPrice)}`;
+    } else {
+        return `${formatPrice(minVariantPrice)} - ${formatPrice(
+            maxVariantPrice
+        )}`;
+    }
+};
+
 export async function HomeProduct({ product }) {
     const featuredImage = product?.images?.[0];
+    const collections = product?.collections?.nodes;
 
     return (
         <Link href={`/${product?.handle}`}>
@@ -15,6 +35,18 @@ export async function HomeProduct({ product }) {
                 height={featuredImage?.height}
             />
             <p>{product?.title}</p>
+            {collections && collections.length > 0 && (
+                <p>{`(${collections
+                    ?.map(collection => collection?.title)
+                    .join(', ')})`}</p>
+            )}
+            {product?.availableForSale ? (
+                (product?.priceRange?.maxVariantPrice?.amount ?? 0) > 0 && (
+                    <p>{formatPriceRange(product.priceRange)}</p>
+                )
+            ) : (
+                <p>Sold Out</p>
+            )}
         </Link>
     );
 }
@@ -26,7 +58,7 @@ export default async function HomePage() {
     });
 
     console.log({ collection, products });
-    // console.log({ img: products[1].images });
+    // console.log({ price: products[0].priceRange, tile: products[0].title });
 
     return (
         <>
@@ -34,7 +66,7 @@ export default async function HomePage() {
                 <p>{`No products found`}</p>
             ) : (
                 <ul>
-                    {products.map(product => (
+                    {products?.map(product => (
                         <li key={product?.handle}>
                             <HomeProduct {...{ product }} />
                         </li>