crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-14 21:47:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

app/page: products list markup, further details

Browse Source
This commit is contained in:
andr-ew 2023-06-21 16:12:41 -05:00
parent 087c5ecb93
commit e270e45de7
1 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/page.js
View File

@ -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>