cx/commerce
4
0
Fork 0
Code Pull Requests Activity

Compare commits

base: cx:add-useoptimistic
Branches Tags
cx:main cx:canary-update cx:form-with-prefetch-fix-test cx:add-useoptimistic cx:context cx:dynamic cx:integration-guide cx:pe cx:profile-cart cx:repro-1118 cx:jump
cx:v1
..
compare: cx:context
Branches Tags
cx:main cx:canary-update cx:form-with-prefetch-fix-test cx:add-useoptimistic cx:context cx:dynamic cx:integration-guide cx:pe cx:profile-cart cx:repro-1118 cx:jump
cx:v1

6 Commits
add-useopt ... context

Author SHA1 Message Date
Malte Ubl
5304683150 Cache the cart content in VDC 2024-02-05 06:40:52 -08:00
Malte Ubl
0c3283f591 Upgrade to canary and fix static build 2024-02-04 16:57:55 -08:00
Malte Ubl
47a1c3eea1 next 14.1 2024-02-04 16:50:25 -08:00
Malte Ubl
d12fb77ef9 caching 2024-02-04 16:43:53 -08:00
Malte Ubl
59a00fe9ea Dont reco on 1 2024-02-03 09:58:59 -08:00
Malte Ubl
9c3cc1f8b6 Auto cart context 2024-02-03 09:56:08 -08:00
21 changed files with 1445 additions and 1173 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -36,3 +36,4 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
.env*.local

6
.vscode/settings.json vendored
View File

@@ -2,8 +2,8 @@
"typescript.tsdk": "node_modules/typescript/lib", "typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true, "typescript.enablePromptUseWorkspaceTsdk": true,
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll": true, "source.fixAll": "explicit",
"source.organizeImports": true, "source.organizeImports": "explicit",
"source.sortMembers": true "source.sortMembers": "explicit"
} }
} }

2
app/[page]/page.tsx
View File

@@ -6,6 +6,8 @@ import { notFound } from 'next/navigation';
export const runtime = 'edge'; export const runtime = 'edge';
export const revalidate = 43200; // 12 hours in seconds
export async function generateMetadata({ export async function generateMetadata({
params params
}: { }: {

2
app/error.tsx
View File

@@ -2,7 +2,7 @@
export default function Error({ reset }: { reset: () => void }) { export default function Error({ reset }: { reset: () => void }) {
return ( return (
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black"> <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
<h2 className="text-xl font-bold">Oh no!</h2> <h2 className="text-xl font-bold">Oh no!</h2>
<p className="my-2"> <p className="my-2">
There was an issue with our storefront. This could be a temporary issue, please try your There was an issue with our storefront. This could be a temporary issue, please try your

4
app/layout.tsx
View File

@@ -35,7 +35,9 @@ export default async function RootLayout({ children }: { children: ReactNode })
return ( return (
<html lang="en" className={GeistSans.variable}> <html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<Navbar /> <Suspense>
<Navbar />
</Suspense>
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>
</Suspense> </Suspense>

20
app/product/[handle]/page.tsx
View File

@@ -82,20 +82,14 @@ export default async function ProductPage({ params }: { params: { handle: string
}} }}
/> />
<div className="mx-auto max-w-screen-2xl px-4"> <div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black"> <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
<div className="h-full w-full basis-full lg:basis-4/6"> <div className="h-full w-full basis-full lg:basis-4/6">
<Suspense <Gallery
fallback={ images={product.images.map((image: Image) => ({
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" /> src: image.url,
} altText: image.altText
> }))}
<Gallery />
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
</Suspense>
</div> </div>
<div className="basis-full lg:basis-2/6"> <div className="basis-full lg:basis-2/6">

2
app/search/layout.tsx
View File

@@ -7,7 +7,7 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white"> <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]"> <div className="order-first w-full flex-none md:max-w-[125px]">
<Collections /> <Collections />
</div> </div>

63
components/cart/edit-item-quantity-button.tsx
View File

@@ -5,7 +5,6 @@ import clsx from 'clsx';
import { updateItemQuantity } from 'components/cart/actions'; import { updateItemQuantity } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots'; import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types'; import type { CartItem } from 'lib/shopify/types';
import { useOptimistic, useState } from 'react';
import { useFormState, useFormStatus } from 'react-dom'; import { useFormState, useFormStatus } from 'react-dom';
function SubmitButton({ type }: { type: 'plus' | 'minus' }) { function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
@@ -30,67 +29,29 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
{pending ? ( {pending ? (
<LoadingDots className="bg-black dark:bg-white" /> <LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? ( ) : type === 'plus' ? (
<PlusIcon className="w-4 h-4 dark:text-neutral-500" /> <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
) : ( ) : (
<MinusIcon className="w-4 h-4 dark:text-neutral-500" /> <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
)} )}
</button> </button>
); );
} }
export function EditItemQuantityButton({ item, type, onQuantityChange }: { item: CartItem; type: 'plus' | 'minus'; onQuantityChange: (quantity: number) => void }) {
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
const [message, formAction] = useFormState(updateItemQuantity, null); const [message, formAction] = useFormState(updateItemQuantity, null);
const payload = {
const [optimisticQuantity, setOptimisticQuantity] = useOptimistic(item.quantity, (state: number, change: number) => state + change); lineId: item.id,
variantId: item.merchandise.id,
// const handleSubmit = async (event: React.FormEvent) => { quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
// event.preventDefault(); };
// const change = type === 'plus' ? 1 : -1; const actionWithVariant = formAction.bind(null, payload);
// setOptimisticQuantity(change);
// onQuantityChange(optimisticQuantity + change);
// const updatedPayload = {
// lineId: item.id,
// variantId: item.merchandise.id,
// quantity: optimisticQuantity + change
// };
// await formAction(updatedPayload);
// };
return ( return (
<form action={async () => { <form action={actionWithVariant}>
const change = type === 'plus' ? 1 : -1; <SubmitButton type={type} />
setOptimisticQuantity(change);
onQuantityChange(optimisticQuantity + change);
const updatedPayload = {
lineId: item.id,
variantId: item.merchandise.id,
quantity: optimisticQuantity + change
};
const actionWithVariant = formAction.bind(null, updatedPayload);
await actionWithVariant();
}}>
<SubmitButton type={type} pending={!!message} />
<p aria-live="polite" className="sr-only" role="status"> <p aria-live="polite" className="sr-only" role="status">
{message} {message}
</p> </p>
</form> </form>
); );
} }
export function EditItemQuantity({ item }: { item: CartItem }) {
const [quantity, setQuantity] = useState(item.quantity);
const handleQuantityChange = (newQuantity: number) => setQuantity(newQuantity);
return (
<div className="flex flex-row items-center ml-auto border rounded-full h-9 border-neutral-200 dark:border-neutral-700">
<EditItemQuantityButton item={{ ...item, quantity }} type="minus" onQuantityChange={handleQuantityChange} />
<p className="w-6 text-center">
<span className="w-full text-sm">{quantity}</span>
</p>
<EditItemQuantityButton item={{ ...item, quantity }} type="plus" onQuantityChange={handleQuantityChange} />
</div>
);
}

46
components/cart/modal.tsx
View File

@@ -11,7 +11,7 @@ import Link from 'next/link';
import { Fragment, useEffect, useRef, useState } from 'react'; import { Fragment, useEffect, useRef, useState } from 'react';
import CloseCart from './close-cart'; import CloseCart from './close-cart';
import { DeleteItemButton } from './delete-item-button'; import { DeleteItemButton } from './delete-item-button';
import { EditItemQuantity } from './edit-item-quantity-button'; import { EditItemQuantityButton } from './edit-item-quantity-button';
import OpenCart from './open-cart'; import OpenCart from './open-cart';
type MerchandiseSearchParams = { type MerchandiseSearchParams = {
@@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white"> <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-lg font-semibold">My Cart</p> <p className="text-lg font-semibold">My Cart</p>
@@ -74,13 +74,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div> </div>
{!cart || cart.lines.length === 0 ? ( {!cart || cart.lines.length === 0 ? (
<div className="flex flex-col items-center justify-center w-full mt-20 overflow-hidden"> <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
<ShoppingCartIcon className="h-16" /> <ShoppingCartIcon className="h-16" />
<p className="mt-6 text-2xl font-bold text-center">Your cart is empty.</p> <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
</div> </div>
) : ( ) : (
<div className="flex flex-col justify-between h-full p-1 overflow-hidden"> <div className="flex h-full flex-col justify-between overflow-hidden p-1">
<ul className="flex-grow py-4 overflow-auto"> <ul className="flex-grow overflow-auto py-4">
{cart.lines.map((item, i) => { {cart.lines.map((item, i) => {
const merchandiseSearchParams = {} as MerchandiseSearchParams; const merchandiseSearchParams = {} as MerchandiseSearchParams;
@@ -98,9 +98,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
return ( return (
<li <li
key={i} key={i}
className="flex flex-col w-full border-b border-neutral-300 dark:border-neutral-700" className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
> >
<div className="relative flex flex-row justify-between w-full px-1 py-4"> <div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} /> <DeleteItemButton item={item} />
</div> </div>
@@ -109,9 +109,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart} onClick={closeCart}
className="z-30 flex flex-row space-x-4" className="z-30 flex flex-row space-x-4"
> >
<div className="relative w-16 h-16 overflow-hidden border rounded-md cursor-pointer border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"> <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Image <Image
className="object-cover w-full h-full" className="h-full w-full object-cover"
width={64} width={64}
height={64} height={64}
alt={ alt={
@@ -122,7 +122,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
/> />
</div> </div>
<div className="flex flex-col flex-1 text-base"> <div className="flex flex-1 flex-col text-base">
<span className="leading-tight"> <span className="leading-tight">
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
@@ -133,13 +133,19 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
) : null} ) : null}
</div> </div>
</Link> </Link>
<div className="flex flex-col justify-between h-16"> <div className="flex h-16 flex-col justify-between">
<Price <Price
className="flex justify-end space-y-2 text-sm text-right" className="flex justify-end space-y-2 text-right text-sm"
amount={item.cost.totalAmount.amount} amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode} currencyCode={item.cost.totalAmount.currencyCode}
/> />
<EditItemQuantity item={item} /> <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
<EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center">
<span className="w-full text-sm">{item.quantity}</span>
</p>
<EditItemQuantityButton item={item} type="plus" />
</div>
</div> </div>
</div> </div>
</li> </li>
@@ -147,22 +153,22 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
})} })}
</ul> </ul>
<div className="py-4 text-sm text-neutral-500 dark:text-neutral-400"> <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
<div className="flex items-center justify-between pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
<p>Taxes</p> <p>Taxes</p>
<Price <Price
className="text-base text-right text-black dark:text-white" className="text-right text-base text-black dark:text-white"
amount={cart.cost.totalTaxAmount.amount} amount={cart.cost.totalTaxAmount.amount}
currencyCode={cart.cost.totalTaxAmount.currencyCode} currencyCode={cart.cost.totalTaxAmount.currencyCode}
/> />
</div> </div>
<div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<p>Shipping</p> <p>Shipping</p>
<p className="text-right">Calculated at checkout</p> <p className="text-right">Calculated at checkout</p>
</div> </div>
<div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<p>Total</p> <p>Total</p>
<Price <Price
className="text-base text-right text-black dark:text-white" className="text-right text-base text-black dark:text-white"
amount={cart.cost.totalAmount.amount} amount={cart.cost.totalAmount.amount}
currencyCode={cart.cost.totalAmount.currencyCode} currencyCode={cart.cost.totalAmount.currencyCode}
/> />
@@ -170,7 +176,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div> </div>
<a <a
href={cart.checkoutUrl} href={cart.checkoutUrl}
className="block w-full p-3 text-sm font-medium text-center text-white bg-blue-600 rounded-full opacity-90 hover:opacity-100" className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
> >
Proceed to Checkout Proceed to Checkout
</a> </a>

2
components/layout/footer-menu.tsx
View File

@@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
<Link <Link
href={item.path} href={item.path}
className={clsx( className={clsx(
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300', 'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
{ {
'text-black dark:text-neutral-300': active 'text-black dark:text-neutral-300': active
} }

4
components/layout/footer.tsx
View File

@@ -16,9 +16,9 @@ export default async function Footer() {
return ( return (
<footer className="text-sm text-neutral-500 dark:text-neutral-400"> <footer className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700"> <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
<div> <div>
<Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/"> <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
<LogoSquare size="sm" /> <LogoSquare size="sm" />
<span className="uppercase">{SITE_NAME}</span> <span className="uppercase">{SITE_NAME}</span>
</Link> </Link>

10
components/layout/navbar/index.tsx
View File

@@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
import { Suspense } from 'react'; import { Suspense } from 'react';
import MobileMenu from './mobile-menu'; import MobileMenu from './mobile-menu';
import Search, { SearchSkeleton } from './search'; import Search from './search';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
export default async function Navbar() { export default async function Navbar() {
@@ -15,9 +15,7 @@ export default async function Navbar() {
return ( return (
<nav className="relative flex items-center justify-between p-4 lg:px-6"> <nav className="relative flex items-center justify-between p-4 lg:px-6">
<div className="block flex-none md:hidden"> <div className="block flex-none md:hidden">
<Suspense fallback={null}> <MobileMenu menu={menu} />
<MobileMenu menu={menu} />
</Suspense>
</div> </div>
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<div className="flex w-full md:w-1/3"> <div className="flex w-full md:w-1/3">
@@ -43,9 +41,7 @@ export default async function Navbar() {
) : null} ) : null}
</div> </div>
<div className="hidden justify-center md:flex md:w-1/3"> <div className="hidden justify-center md:flex md:w-1/3">
<Suspense fallback={<SearchSkeleton />}> <Search />
<Search />
</Suspense>
</div> </div>
<div className="flex justify-end md:w-1/3"> <div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}> <Suspense fallback={<OpenCart />}>

10
components/layout/navbar/mobile-menu.tsx
View File

@@ -3,11 +3,11 @@
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';
import { Fragment, Suspense, useEffect, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'; import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { Menu } from 'lib/shopify/types'; import { Menu } from 'lib/shopify/types';
import Search, { SearchSkeleton } from './search'; import Search from './search';
export default function MobileMenu({ menu }: { menu: Menu[] }) { export default function MobileMenu({ menu }: { menu: Menu[] }) {
const pathname = usePathname(); const pathname = usePathname();
@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<button <button
onClick={openMobileMenu} onClick={openMobileMenu}
aria-label="Open mobile menu" aria-label="Open mobile menu"
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white" className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
> >
<Bars3Icon className="h-4" /> <Bars3Icon className="h-4" />
</button> </button>
@@ -72,9 +72,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
</button> </button>
<div className="mb-4 w-full"> <div className="mb-4 w-full">
<Suspense fallback={<SearchSkeleton />}> <Search />
<Search />
</Suspense>
</div> </div>
{menu.length ? ( {menu.length ? (
<ul className="flex w-full flex-col"> <ul className="flex w-full flex-col">

14
components/layout/navbar/search.tsx
View File

@@ -41,17 +41,3 @@ export default function Search() {
</form> </form>
); );
} }
export function SearchSkeleton() {
return (
<form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
<input
placeholder="Search for products..."
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" />
</div>
</form>
);
}

11
components/layout/search/filter/index.tsx
View File

@@ -1,5 +1,4 @@
import { SortFilterItem } from 'lib/constants'; import { SortFilterItem } from 'lib/constants';
import { Suspense } from 'react';
import FilterItemDropdown from './dropdown'; import FilterItemDropdown from './dropdown';
import { FilterItem } from './item'; import { FilterItem } from './item';
@@ -21,19 +20,15 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
<> <>
<nav> <nav>
{title ? ( {title ? (
<h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400"> <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
{title} {title}
</h3> </h3>
) : null} ) : null}
<ul className="hidden md:block"> <ul className="hidden md:block">
<Suspense fallback={null}> <FilterItemList list={list} />
<FilterItemList list={list} />
</Suspense>{' '}
</ul> </ul>
<ul className="md:hidden"> <ul className="md:hidden">
<Suspense fallback={null}> <FilterItemDropdown list={list} />
<FilterItemDropdown list={list} />
</Suspense>{' '}
</ul> </ul>
</nav> </nav>
</> </>

2
components/layout/search/filter/item.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import clsx from 'clsx'; import clsx from 'clsx';
import type { SortFilterItem } from 'lib/constants'; import { SortFilterItem } from 'lib/constants';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';

12
components/product/product-description.tsx
View File

@@ -1,8 +1,8 @@
import { AddToCart } from 'components/cart/add-to-cart'; import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price'; import Price from 'components/price';
import Prose from 'components/prose'; import Prose from 'components/prose';
import { FitToCart } from 'lib/ai/fit-to-cart';
import { Product } from 'lib/shopify/types'; import { Product } from 'lib/shopify/types';
import { Suspense } from 'react';
import { VariantSelector } from './variant-selector'; import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) { export function ProductDescription({ product }: { product: Product }) {
@@ -17,9 +17,7 @@ export function ProductDescription({ product }: { product: Product }) {
/> />
</div> </div>
</div> </div>
<Suspense fallback={null}> <VariantSelector options={product.options} variants={product.variants} />
<VariantSelector options={product.options} variants={product.variants} />
</Suspense>
{product.descriptionHtml ? ( {product.descriptionHtml ? (
<Prose <Prose
@@ -27,10 +25,8 @@ export function ProductDescription({ product }: { product: Product }) {
html={product.descriptionHtml} html={product.descriptionHtml}
/> />
) : null} ) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
<Suspense fallback={null}> <FitToCart currentProduct={product} />
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
</Suspense>
</> </>
); );
} }

84
lib/ai/fit-to-cart.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { OpenAIStream, StreamingTextResponse } from 'ai';
import { getCart } from 'lib/shopify';
import { Product } from 'lib/shopify/types';
import { unstable_cache } from 'next/cache';
import { cookies } from 'next/headers';
import OpenAI from 'openai';
import { Suspense } from 'react';
async function getCartFromCookies() {
const cartId = cookies().get('cartId')?.value;
if (cartId) {
return getCart(cartId);
}
return null;
}
export async function FitToCart({ currentProduct }: { currentProduct: Product }) {
return (
<Suspense fallback={null}>
<FitToCartInternal currentProduct={currentProduct} />
</Suspense>
);
}
async function FitToCartInternal({ currentProduct }: { currentProduct: Product }) {
const pitch = await getPitch({ currentProduct });
if (!pitch) return null;
return <div className="mt-6 text-sm leading-tight dark:text-white/[60%]">{pitch}</div>;
}
const fireworks = new OpenAI({
baseURL: 'https://api.fireworks.ai/inference/v1',
apiKey: process.env.FIREWORKS_API_KEY!
});
function buildPrompt(prompt: string) {
return prompt.split('\n').map((message) => ({
role: 'user' as const,
content: message
}));
}
export async function getPitch({ currentProduct }: { currentProduct: Product }) {
const cart = await getCartFromCookies();
if (!cart) return null;
const products = cart.lines
.filter((line) => line.merchandise.product.id !== currentProduct.id)
.map((line) => `"${line.merchandise.product.title}"`);
if (!products.length) return null;
const prompt = `Write a 30 word pitch for why a person who has ${products.join(
' and '
)} in their shopping cart should also purchase the "${currentProduct.title}"`;
const query = {
model: 'accounts/fireworks/models/mistral-7b-instruct-4k',
stream: true,
messages: buildPrompt(prompt),
max_tokens: 1000,
temperature: 0.75,
top_p: 1,
frequency_penalty: 1
} as const;
return unstable_cache(async () => {
// Request the Fireworks API for the response based on the prompt
const response = await fireworks.chat.completions.create(query);
// Convert the response into a friendly text-stream
const stream = OpenAIStream(response);
// Respond with the stream
const streamingResponse = new StreamingTextResponse(stream);
let text = await streamingResponse.text();
// Remove the quotes from the response tht the LLM sometimes adds.
text = text.trim().replace(/^"/, '').replace(/"$/, '');
return text;
}, [
JSON.stringify(query),
'1.0',
process.env.VERCEL_BRANCH_URL || '',
process.env.NODE_ENV || ''
])();
}

10
lib/shopify/index.ts
View File

@@ -210,6 +210,10 @@ export async function createCart(): Promise<Cart> {
return reshapeCart(res.body.data.cartCreate.cart); return reshapeCart(res.body.data.cartCreate.cart);
} }
function revalidateCart(cartId: string) {
revalidateTag(`cart-${cartId}`);
}
export async function addToCart( export async function addToCart(
cartId: string, cartId: string,
lines: { merchandiseId: string; quantity: number }[] lines: { merchandiseId: string; quantity: number }[]
@@ -222,6 +226,7 @@ export async function addToCart(
}, },
cache: 'no-store' cache: 'no-store'
}); });
revalidateCart(cartId);
return reshapeCart(res.body.data.cartLinesAdd.cart); return reshapeCart(res.body.data.cartLinesAdd.cart);
} }
@@ -234,6 +239,7 @@ export async function removeFromCart(cartId: string, lineIds: string[]): Promise
}, },
cache: 'no-store' cache: 'no-store'
}); });
revalidateCart(cartId);
return reshapeCart(res.body.data.cartLinesRemove.cart); return reshapeCart(res.body.data.cartLinesRemove.cart);
} }
@@ -250,6 +256,7 @@ export async function updateCart(
}, },
cache: 'no-store' cache: 'no-store'
}); });
revalidateCart(cartId);
return reshapeCart(res.body.data.cartLinesUpdate.cart); return reshapeCart(res.body.data.cartLinesUpdate.cart);
} }
@@ -258,8 +265,7 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
const res = await shopifyFetch<ShopifyCartOperation>({ const res = await shopifyFetch<ShopifyCartOperation>({
query: getCartQuery, query: getCartQuery,
variables: { cartId }, variables: { cartId },
tags: [TAGS.cart], tags: [TAGS.cart, `cart-${cartId}`]
cache: 'no-store'
}); });
// Old carts becomes `null` when you checkout. // Old carts becomes `null` when you checkout.

44
package.json
View File

@@ -6,7 +6,7 @@
"pnpm": ">=7" "pnpm": ">=7"
}, },
"scripts": { "scripts": {
"dev": "next dev --turbo", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
@@ -22,31 +22,33 @@
"*": "prettier --write --ignore-unknown" "*": "prettier --write --ignore-unknown"
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^1.7.18", "@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.1.3", "@heroicons/react": "^2.0.18",
"clsx": "^2.1.0", "ai": "^2.2.33",
"geist": "^1.3.0", "clsx": "^2.0.0",
"next": "14.1.4", "geist": "^1.0.0",
"next": "14.1.1-canary.27",
"openai": "^4.26.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0" "react-dom": "18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.11", "@tailwindcss/typography": "^0.5.10",
"@types/node": "20.11.30", "@types/node": "20.8.9",
"@types/react": "18.2.72", "@types/react": "18.2.33",
"@types/react-dom": "18.2.22", "@types/react-dom": "18.2.14",
"@vercel/git-hooks": "^1.0.0", "@vercel/git-hooks": "^1.0.0",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.16",
"eslint": "^8.57.0", "eslint": "^8.52.0",
"eslint-config-next": "^14.1.4", "eslint-config-next": "^14.0.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.0.0",
"eslint-plugin-unicorn": "^51.0.1", "eslint-plugin-unicorn": "^48.0.1",
"lint-staged": "^15.2.2", "lint-staged": "^15.0.2",
"postcss": "^8.4.38", "postcss": "^8.4.31",
"prettier": "3.2.5", "prettier": "3.0.3",
"prettier-plugin-tailwindcss": "^0.5.12", "prettier-plugin-tailwindcss": "^0.5.6",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.3.5",
"typescript": "5.4.3" "typescript": "5.2.2"
} }
} }

2269
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff