diff --git a/app/page.js b/app/page.js index 175972b67..2ae11afe1 100644 --- a/app/page.js +++ b/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 ( @@ -15,6 +35,18 @@ export async function HomeProduct({ product }) { height={featuredImage?.height} />

{product?.title}

+ {collections && collections.length > 0 && ( +

{`(${collections + ?.map(collection => collection?.title) + .join(', ')})`}

+ )} + {product?.availableForSale ? ( + (product?.priceRange?.maxVariantPrice?.amount ?? 0) > 0 && ( +

{formatPriceRange(product.priceRange)}

+ ) + ) : ( +

Sold Out

+ )} ); } @@ -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() {

{`No products found`}

) : (