diff --git a/app/layout.tsx b/app/layout.tsx
index b793efe04..c4c4f9773 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -39,7 +39,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) {
const cartId = cookies().get('cartId')?.value;
// Don't await the fetch, pass the Promise to the context provider
- const cart = getCart(cartId);
+ const cart = getCart(cartId, 'USD');
return (
diff --git a/app/page.tsx b/app/page.tsx
index 7d407ede8..af275eab5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,11 +9,13 @@ export const metadata = {
}
};
-export default function HomePage() {
+export default function HomePage({ searchParams }: { searchParams: { currency?: string } }) {
+ const currency = searchParams.currency || 'USD';
+
return (
<>
-
-
+
+
);
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 71a65198d..c933623b0 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -17,7 +17,7 @@ export async function generateMetadata({
}: {
params: { handle: string };
}): Promise {
- const product = await getProduct(params.handle);
+ const product = await getProduct({ handle: params.handle, currency: 'USD' });
if (!product) return notFound();
@@ -50,8 +50,12 @@ export async function generateMetadata({
};
}
-export default async function ProductPage({ params }: { params: { handle: string } }) {
- const product = await getProduct(params.handle);
+export default async function ProductPage({ params, searchParams }: { params: { handle: string }, searchParams: { currency?: string } }) {
+ const currency = searchParams.currency || 'USD';
+ const product = await getProduct({
+ handle: params.handle,
+ currency: searchParams.currency || 'USD'
+ });
if (!product) return notFound();
diff --git a/components/carousel.tsx b/components/carousel.tsx
index c341cd582..907b9496b 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -2,9 +2,12 @@ import { getCollectionProducts } from 'lib/fourthwall';
import Link from 'next/link';
import { GridTileImage } from './grid/tile';
-export async function Carousel() {
+export async function Carousel({currency}: {currency: string}) {
// Collections that start with `hidden-*` are hidden from the search page.
- const products = await getCollectionProducts({ collection: process.env.FW_COLLECTION || '' });
+ const products = await getCollectionProducts({
+ collection: process.env.FW_COLLECTION || '',
+ currency,
+ });
if (!products?.length) return null;
@@ -19,7 +22,7 @@ export async function Carousel() {
key={`${product.handle}${i}`}
className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
>
-
+
-
-
-
+
+
+
);
}
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index f48584046..26fc25248 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -53,6 +53,9 @@ export async function Navbar() {
diff --git a/lib/fourthwall/index.ts b/lib/fourthwall/index.ts
index ec52cd539..198524a28 100644
--- a/lib/fourthwall/index.ts
+++ b/lib/fourthwall/index.ts
@@ -65,19 +65,23 @@ async function fourthwallPost(url: string, data: any, options: RequestInit =
*/
export async function getCollectionProducts({
collection,
+ currency,
reverse,
sortKey
}: {
collection: string;
+ currency: string;
reverse?: boolean;
sortKey?: string;
}): Promise {
- const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${collection}/products?secret=${process.env.FW_SECRET}`, {
+ const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${collection}/products?secret=${process.env.FW_SECRET}¤cy=${currency}`, {
headers: {
'X-ShopId': process.env.FW_SHOPID || ''
}
});
+ console.warn(JSON.stringify(res.body.results, null, 2));
+
if (!res.body.results) {
console.log(`No collection found for \`${collection}\``);
return [];
@@ -90,9 +94,9 @@ export async function getCollectionProducts({
/**
* Product operations
*/
-export async function getProduct(handle: string): Promise {
+export async function getProduct({ handle, currency } : { handle: string, currency: string }): Promise {
// TODO: replace with real URL
- const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${process.env.FW_COLLECTION}/products?secret=${process.env.FW_SECRET}`, {
+ const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${process.env.FW_COLLECTION}/products?secret=${process.env.FW_SECRET}¤cy=${currency}`, {
headers: {
'X-ShopId': process.env.FW_SHOPID || ''
}
@@ -111,7 +115,7 @@ export async function getProductRecommendations(productId: string): Promise {
+export async function getCart(cartId: string | undefined, currency: string): Promise {
if (!cartId) {
return undefined;
}
diff --git a/lib/fourthwall/reshape.ts b/lib/fourthwall/reshape.ts
index d50b0e6e1..f9056b953 100644
--- a/lib/fourthwall/reshape.ts
+++ b/lib/fourthwall/reshape.ts
@@ -15,7 +15,7 @@ const DEFAULT_IMAGE: Image = {
const reshapeMoney = (money: FourthwallMoney): Money => {
return {
amount: money.value.toString(),
- currencyCode: money.currencyCode
+ currencyCode: money.currency
};
}
@@ -48,7 +48,10 @@ export const reshapeProduct = (product: FourthwallProduct): Product | undefined
const minPrice = Math.min(...variants.map((v) => v.unitPrice.value));
const maxPrice = Math.max(...variants.map((v) => v.unitPrice.value));
- const currencyCode = variants[0]?.unitPrice.currencyCode || 'USD';
+ const currencyCode = variants[0]?.unitPrice.currency || 'USD';
+
+ const sizes = new Set(variants.map((v) => v.attributes.size.name));
+ const colors = new Set(variants.map((v) => v.attributes.color.name));
return {
...rest,
@@ -69,9 +72,17 @@ export const reshapeProduct = (product: FourthwallProduct): Product | undefined
}
},
featuredImage: reshapeImages(images, product.name)[0] || DEFAULT_IMAGE,
+ options: [{
+ id: 'color',
+ name: 'Color',
+ values: [...colors]
+ }, {
+ id: 'size',
+ name: 'Size',
+ values: [...sizes]
+ }],
// TODO: stubbed out
availableForSale: true,
- options: [],
seo: {
title: product.name,
description: product.description,
@@ -96,7 +107,13 @@ const reshapeVariants = (variants: FourthwallProductVariant[]): ProductVariant[]
id: v.id,
title: v.name,
availableForSale: true,
- selectedOptions: [],
+ selectedOptions: [{
+ name: 'Size',
+ value: v.attributes.size.name
+ }, {
+ name: 'Color',
+ value: v.attributes.color.name
+ }],
price: reshapeMoney(v.unitPrice),
}))
}
@@ -134,7 +151,7 @@ const reshapeCartItem = (item: FourthwallCartItem): CartItem => {
export const reshapeCart = (cart: FourthwallCart): Cart => {
const totalValue = cart.items.map((item) => item.quantity * item.variant.unitPrice.value).reduce((a, b) => a + b, 0);
- const currencyCode = cart.items[0]?.variant.unitPrice.currencyCode || 'USD';
+ const currencyCode = cart.items[0]?.variant.unitPrice.currency || 'USD';
return {
...cart,
diff --git a/lib/fourthwall/types.ts b/lib/fourthwall/types.ts
index 50afc8cfc..e0032e7f4 100644
--- a/lib/fourthwall/types.ts
+++ b/lib/fourthwall/types.ts
@@ -1,6 +1,6 @@
export type FourthwallMoney = {
value: number;
- currencyCode: string;
+ currency: string;
}
export type FourthwallProduct = {
@@ -29,17 +29,21 @@ export type FourthwallProductVariant = {
images: FourthwallProductImage[];
// other attr
+ attributes: {
+ description: string;
+ color: {
+ name: string;
+ swatch: string;
+ },
+ size: {
+ name: string;
+ };
+ }
};
export type FourthwallCart = {
id: string | undefined;
- // checkoutUrl: string;
- // cost: {
- // subtotalAmount: Money;
- // totalAmount: Money;
- // totalTaxAmount: Money;
- // };
items: FourthwallCartItem[];
};