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, prices

Browse Source
This commit is contained in:
andr-ew 2023-06-21 16:42:53 -05:00
parent 7d5d364298
commit ae9d6d7c4b
1 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/page.js
View File

@ -22,6 +22,36 @@ const formatPriceRange = ({ maxVariantPrice, minVariantPrice }) => {
}
};
const PriceRanges = ({ priceRange, compareAtPriceRange, availableForSale }) => {
const onSale =
(compareAtPriceRange?.minVariantPrice?.amount ?? 0) >
(priceRange?.minVariantPrice?.amount ?? 0) ||
(compareAtPriceRange?.maxVariantPrice?.amount ?? 0) >
(priceRange?.maxVariantPrice?.amount ?? 0);
const isForSale = (priceRange?.maxVariantPrice?.amount ?? 0) > 0;
return (
<p>
{availableForSale ? (
isForSale && (
<>
<>
{onSale && (
<span className={'original-price'}>
{formatPriceRange(compareAtPriceRange)}{' '}
</span>
)}
</>
<span>{formatPriceRange(priceRange)}</span>
</>
)
) : (
<span>Sold Out</span>
)}
</p>
);
};
export async function HomeProduct({ product }) {
const featuredImage = product?.images?.[0];
const collections = product?.collections?.nodes;
@ -40,13 +70,7 @@ export async function HomeProduct({ product }) {
?.map(collection => collection?.title)
.join(', ')})`}</p>
)}
{product?.availableForSale ? (
(product?.priceRange?.maxVariantPrice?.amount ?? 0) > 0 && (
<p>{formatPriceRange(product.priceRange)}</p>
)
) : (
<p>Sold Out</p>
)}
<PriceRanges {...product} />
</Link>
);
}
@ -57,8 +81,13 @@ export default async function HomePage() {
collection,
});
console.log({ collection, products });
// console.log({ price: products[0].priceRange, tile: products[0].title });
// console.log({ collection, products });
// const num = 4;
// console.log({
// price: products[num].priceRange,
// compareAt: products[num].compareAtPriceRange,
// title: products[num].title,
// });
return (
<>