product: begin content

app/(page)/layout.js

@@ -1,11 +1,6 @@
-export default function ProductLayout({ children }) {
+export default function PageLayout({ children }) {
     return (
         <>
-            {/* <header> */}
-            {/*     <nav> */}
-            {/*         <a>back</a> */}
-            {/*     </nav> */}
-            {/* </header> */}
             <main>{children}</main>
         </>
     );

app/(page)/product/[handle]/page.js

@@ -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 } }) {
+export async function Option({ value, children, selected }) {
-    return <h1>{handle}</h1>;
+    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>
+            )}
+        </>
+    );
 }

components/home.js

@@ -27,6 +27,7 @@ export const PriceRanges = ({
     compareAtPriceRange,
     availableForSale,
 }) => {
+    //TODO: turn these checks into shared functions
     const onSale =
         (compareAtPriceRange?.minVariantPrice?.amount ?? 0) >
             (priceRange?.minVariantPrice?.amount ?? 0) ||

package.json

@@ -30,7 +30,8 @@
         "next": "13.4.6",
         "react": "18.2.0",
         "react-cookie": "^4.1.1",
-    "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "xss": "^1.0.14"
     },
     "devDependencies": {
         "@playwright/test": "^1.34.3",