crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

product: begin content

Browse Source
This commit is contained in:
andr-ew
2023-06-21 20:51:00 -05:00
parent f0187e9f7a
commit b4b6221389
5 changed files with 3398 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/(page)/product/[handle]/page.js
View File

@@ -1,4 +1,6 @@
import { getProducts } from 'lib/shopify';
import xss from 'xss';
import { getProducts, getProduct } from 'lib/shopify';
export async function generateStaticParams() {
const products = await getProducts({
@@ -7,11 +9,87 @@ export async function generateStaticParams() {
query: '',
});
console.log({ products });
return products.map(product => ({ product: product.handle }));
}
export default async function ProductPage({ params: { handle } }) {
return <h1>{handle}</h1>;
export async function Option({ value, children, selected }) {
return <option {...{ value, selected }}>{children}</option>;
}
export async function Select({ id, label, children }) {
return (
<div>
<select name={label} id={id}>
{children}
</select>
{/* TODO: parentheses around label w/ css */}
<label for={id}>{label}</label>
</div>
);
}
//TODO: NumberInput
export default async function ProductPage({ params: { handle } }) {
const product = await getProduct(handle);
const hasOptions = product?.options?.[0]?.values.length > 1 ?? false;
//TODO: turn these checks into shared functions
// const onSale =
// (compareAtPriceRange?.minVariantPrice?.amount ?? 0) >
// (priceRange?.minVariantPrice?.amount ?? 0) ||
// (compareAtPriceRange?.maxVariantPrice?.amount ?? 0) >
// (priceRange?.maxVariantPrice?.amount ?? 0);
const isForSale = (product?.priceRange?.maxVariantPrice?.amount ?? 0) > 0;
return (
<>
{product?.handle ? (
<>
<h1>{product?.title}</h1>
<div
dangerouslySetInnerHTML={{
__html: xss(product.descriptionHtml),
}}
/>
{product?.availableForSale && isForSale && (
<>
<div>
<input
type='number'
id='quantity'
name='quantity'
min='1'
/>
<label for='quantity'>Qty</label>
</div>
<>
{hasOptions &&
product?.options?.map(option => (
<Select
key={option?.id}
id={option?.name}
label={option?.name}
>
{option?.values?.map((value, i) => (
<Option
key={value}
value={value}
selected={i == 0}
>
{value}
</Option>
))}
</Select>
))}
</>
</>
)}
</>
) : (
<p>Product not found</p>
)}
</>
);
}