Template
Rami BitarandClaude Opus 5
e04f1e0405
- Cart drawer: single-column layout matching the site — no bag icon, no dividers, square images, tighter type, discount code form, estimated total, and a Go to Checkout button - Cart: per-line loading state so one row's update no longer disables every other row or the checkout button - Discounts: cartDiscountCodesUpdate mutation plus discountCodes on the cart fragment, wired to an applyDiscountCode store action - Products: fix "load more" returning the same first page — the query now takes an `after` cursor and getProductsPage exposes pageInfo - Collections: cards match the product cards (no border, radius, blurb, or CTA row) at 4-up on desktop and 2-up on mobile; section headers match the products section - Shop Pay: cart permalink with payment=shop_pay instead of the hosted shop-js element - Buttons converted to the shadcn Button component throughout - PDP: swipeable image carousel with dots on mobile, sticky info column, colour swatches never fall back to variant photos - Rename the store from Stride to Shop; larger header wordmark Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import { useCollectionProducts } from '@/hooks/use-shopify-collections';
|
|
import ProductCard from './product-card';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const GRID_CLASSES =
|
|
'grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16';
|
|
|
|
const CollectionTitle: React.FC<{ title: string }> = ({ title }) => (
|
|
<h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground mb-16">
|
|
{title}
|
|
</h2>
|
|
);
|
|
|
|
const CollectionDetail: React.FC = () => {
|
|
const params = useParams();
|
|
const handle = params?.handle as string;
|
|
|
|
const { collection, loading, error, refetch } = useCollectionProducts(handle);
|
|
|
|
// Format title from handle
|
|
const formattedTitle = handle
|
|
? handle.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
|
|
: 'Collection';
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="py-16 bg-background">
|
|
<div className="max-w-screen-2xl mx-auto px-8">
|
|
<CollectionTitle title={formattedTitle} />
|
|
|
|
{/* Loading Skeleton */}
|
|
<div className={GRID_CLASSES}>
|
|
{Array.from({ length: 8 }).map((_, index) => (
|
|
<div key={index} className="animate-pulse">
|
|
<div className="aspect-square bg-zinc-100"></div>
|
|
<div className="pt-4 space-y-2">
|
|
<div className="h-4 bg-zinc-200 w-4/5"></div>
|
|
<div className="h-4 bg-zinc-200 w-1/4"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="py-16 bg-background">
|
|
<div className="max-w-screen-2xl mx-auto px-8 text-center">
|
|
<CollectionTitle title={formattedTitle} />
|
|
<p className="text-sm text-muted-foreground mb-6">{error}</p>
|
|
<Button onClick={() => refetch()} variant="outline">
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const products = collection?.products || [];
|
|
const title = collection?.title || formattedTitle;
|
|
|
|
return (
|
|
<div className="py-16 bg-background">
|
|
<div className="max-w-screen-2xl mx-auto px-8">
|
|
<CollectionTitle title={title} />
|
|
|
|
{products.length === 0 ? (
|
|
<p className="text-center text-sm text-muted-foreground">
|
|
This collection doesn't have any products yet.
|
|
</p>
|
|
) : (
|
|
<div className={GRID_CLASSES}>
|
|
{products.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CollectionDetail;
|