frontend-shopify/nextjs-shopify-products
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update default shopify site design

Browse Source
This commit is contained in:
Rami Bitar
2026-06-10 13:20:03 -04:00
parent 1fb1df8cfd
commit e4ecab1875
33 changed files with 527 additions and 2371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/globals.css
View File

@@ -18,16 +18,16 @@
--color-popover-foreground: hsl(222.2 84% 4.9%);
/* Primary */
--color-primary: hsl(222.2 47.4% 11.2%);
--color-primary-foreground: hsl(210 40% 98%);
--color-primary: hsl(0 0% 0%);
--color-primary-foreground: hsl(0 0% 100%);
/* Secondary */
--color-secondary: hsl(210 40% 96.1%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
/* Muted */
--color-muted: hsl(210 40% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
--color-muted: hsl(0 0% 96.1%);
--color-muted-foreground: hsl(0 0% 45%);
/* Accent */
--color-accent: hsl(210 40% 96.1%);
@@ -59,7 +59,7 @@
--radius-xl: 0.75rem;
/* Fonts */
--font-heading: 'Space Grotesk', sans-serif;
--font-heading: var(--font-poppins), 'Poppins', sans-serif;
--font-body: 'Inter', sans-serif;
}

11
app/layout.tsx
View File

@@ -1,11 +1,19 @@
import React from 'react';
import type { Metadata } from 'next';
import { Poppins } from 'next/font/google';
import './globals.css';
import { Providers } from './providers';
import ShopifyCart from '@/components/shopify/cart-drawer';
import ShopHeader from '@/components/shopify/shop-header';
import PromoBanner from '@/components/shopify/promo-banner';
import ShopFooter from '@/components/shopify/shop-footer';
const poppins = Poppins({
subsets: ['latin'],
weight: ['400', '500', '600', '700', '800'],
variable: '--font-poppins',
});
export const metadata: Metadata = {
title: 'Frontend | Shopify',
description: 'Frontend Shopify Storefront',
@@ -17,10 +25,11 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<html lang="en" className={poppins.variable}>
<head></head>
<body className="m-0 p-0 font-body">
<Providers>
<PromoBanner />
<ShopHeader />
<main className="min-h-screen">
{children}

194
app/products/[handle]/page.tsx
View File

@@ -1,197 +1,7 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { useProduct, type Product } from '@/hooks/use-shopify-products';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import ProductDetailGallery from '@/components/shopify/product-detail/product-detail-gallery';
import ProductDetailInfo from '@/components/shopify/product-detail/product-detail-info';
import ProductRecommendations from '@/components/shopify/product-detail/product-recommendations';
import { Button } from '@/components/ui/button';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
interface ProductVariant {
id: string;
title: string;
price: {
amount: string;
currencyCode: string;
};
availableForSale: boolean;
selectedOptions: Array<{
name: string;
value: string;
}>;
image?: {
url: string;
altText?: string;
};
}
import ProductDetail from '@/components/shopify/product-detail';
export default function ProductDetailPage() {
const params = useParams();
const handle = params.handle as string;
const { addItem, openCart } = useShopifyCart();
const { product, loading, error } = useProduct(handle);
const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
const [quantity, setQuantity] = useState(1);
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
const [addingToCart, setAddingToCart] = useState(false);
// Initialize variant when product loads
useEffect(() => {
if (product) {
const firstVariant = product.variants.edges[0]?.node;
if (firstVariant) {
setSelectedVariant(firstVariant);
const initialOptions: Record<string, string> = {};
firstVariant.selectedOptions.forEach((option: { name: string; value: string }) => {
initialOptions[option.name] = option.value;
});
setSelectedOptions(initialOptions);
}
}
}, [product]);
const handleOptionChange = (optionName: string, value: string) => {
const newOptions = { ...selectedOptions, [optionName]: value };
setSelectedOptions(newOptions);
// Find matching variant
const matchingVariant = product?.variants.edges.find(({ node }) => {
return node.selectedOptions.every(option =>
newOptions[option.name] === option.value
);
});
if (matchingVariant) {
setSelectedVariant(matchingVariant.node);
// Update image if variant has an associated image
if (matchingVariant.node.image && product) {
const variantImageUrl = matchingVariant.node.image.url;
const imageIndex = product.images.edges.findIndex(
edge => edge.node.url === variantImageUrl
);
if (imageIndex !== -1) {
setSelectedImageIndex(imageIndex);
}
}
}
};
const handleAddToCart = async () => {
if (!selectedVariant || !product) return;
try {
setAddingToCart(true);
await addItem(selectedVariant.id, quantity);
openCart();
} catch (err) {
console.error('Failed to add item to cart:', err);
} finally {
setAddingToCart(false);
}
};
if (loading) {
return (
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Image Gallery Skeleton */}
<div>
<div className="aspect-square bg-gray-200 rounded-lg animate-pulse mb-4"></div>
<div className="grid grid-cols-4 gap-2">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="aspect-square bg-gray-200 rounded animate-pulse"></div>
))}
</div>
</div>
{/* Product Info Skeleton */}
<div>
<div className="h-8 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-6 bg-gray-200 rounded mb-6 w-1/3 animate-pulse"></div>
<div className="h-24 bg-gray-200 rounded mb-6 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded animate-pulse"></div>
</div>
</div>
</div>
);
}
if (error || !product) {
return (
<div className="container mx-auto px-4 py-8 text-center">
<Alert variant="destructive" className="max-w-md mx-auto p-8">
<i className="ri-error-warning-line text-4xl"></i>
<AlertTitle className="text-lg font-semibold">
Product Not Found
</AlertTitle>
<AlertDescription className="mb-4">
{error || 'The requested product could not be found.'}
</AlertDescription>
<Button
onClick={() => window.history.back()}
variant="destructive"
>
Go Back
</Button>
</Alert>
</div>
);
}
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
<Breadcrumb className="mb-6">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{product.title}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<ProductDetailGallery
images={product.images.edges.map(edge => edge.node)}
selectedImageIndex={selectedImageIndex}
onImageSelect={setSelectedImageIndex}
/>
<ProductDetailInfo
product={product}
selectedVariant={selectedVariant}
selectedOptions={selectedOptions}
quantity={quantity}
setQuantity={setQuantity}
handleAddToCart={handleAddToCart}
onOptionChange={handleOptionChange}
loading={addingToCart}
/>
</div>
</div>
<ProductRecommendations productId={product.id} />
</div>
);
return <ProductDetail />;
}