278 lines
12 KiB
TypeScript
278 lines
12 KiB
TypeScript
import { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { getProductBySlug, getAllProducts, getCategoriesByLocale } from '@/lib/data';
|
|
import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
|
|
import { processHTML } from '@/lib/html-compat';
|
|
import { SEO } from '@/components/SEO';
|
|
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
|
|
|
interface PageProps {
|
|
params: {
|
|
slug: string;
|
|
locale?: string;
|
|
};
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
const locale = (params.locale as string) || 'en';
|
|
const product = getProductBySlug(params.slug, locale as 'en' | 'de');
|
|
|
|
if (!product) {
|
|
return {
|
|
title: 'Product not found',
|
|
};
|
|
}
|
|
|
|
const site = getSiteInfo();
|
|
|
|
return {
|
|
title: `${product.name} | ${site.title}`,
|
|
description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
|
|
alternates: {
|
|
canonical: getLocalizedPath(`/product/${product.slug}`, locale as 'en' | 'de'),
|
|
languages: {
|
|
'en': `/en/product/${product.slug}`,
|
|
'de': `/de/product/${product.slug}`,
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: product.name,
|
|
description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
|
|
type: 'website',
|
|
locale,
|
|
...(product.images && product.images.length > 0 && {
|
|
images: product.images.map(img => ({ url: img, alt: product.name })),
|
|
}),
|
|
},
|
|
};
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
const productsEN = getAllProducts();
|
|
const productsDE = getAllProducts();
|
|
|
|
const enParams = productsEN.filter(p => p.locale === 'en').map((product) => ({
|
|
slug: product.slug,
|
|
locale: 'en',
|
|
}));
|
|
|
|
const deParams = productsDE.filter(p => p.locale === 'de').map((product) => ({
|
|
slug: product.slug,
|
|
locale: 'de',
|
|
}));
|
|
|
|
return [...enParams, ...deParams];
|
|
}
|
|
|
|
export default async function ProductDetailPage({ params }: PageProps) {
|
|
const locale = (params.locale as string) || 'en';
|
|
const product = getProductBySlug(params.slug, locale as 'en' | 'de');
|
|
|
|
if (!product) {
|
|
notFound();
|
|
}
|
|
|
|
// Process description HTML with WordPress compatibility
|
|
const processedDescription = product.descriptionHtml ?
|
|
processHTML(product.descriptionHtml) : '';
|
|
|
|
// Get related products (same category)
|
|
const allProducts = getAllProducts();
|
|
const relatedProducts = allProducts
|
|
.filter((p: any) =>
|
|
p.locale === locale &&
|
|
p.slug !== product.slug &&
|
|
p.categories?.some((cat: any) => product.categories?.some((pc: any) => pc.slug === cat.slug))
|
|
)
|
|
.slice(0, 4);
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={product.name}
|
|
description={product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || ''}
|
|
locale={locale as 'en' | 'de'}
|
|
path={`/product/${product.slug}`}
|
|
type="product"
|
|
images={product.images}
|
|
/>
|
|
|
|
<div className="bg-white py-12 sm:py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Back to products link */}
|
|
<div className="mb-8">
|
|
<Link
|
|
href={getLocalizedPath('/products', locale as 'en' | 'de')}
|
|
className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
|
>
|
|
<svg className="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
{t('products.backToProducts', locale as 'en' | 'de')}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="lg:grid lg:grid-cols-2 lg:gap-x-12 lg:items-start">
|
|
{/* Product Images */}
|
|
<div className="flex flex-col-reverse">
|
|
{product.images && product.images.length > 0 ? (
|
|
<>
|
|
<div className="hidden lg:grid lg:grid-cols-1 lg:gap-4 mt-4">
|
|
{product.images.map((img: string, index: number) => (
|
|
<div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
|
<img
|
|
src={img}
|
|
alt={`${product.name} - ${index + 1}`}
|
|
className="h-full w-full object-cover object-center"
|
|
loading={index === 0 ? 'eager' : 'lazy'}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="lg:hidden aspect-square overflow-hidden rounded-lg bg-gray-100 mb-4">
|
|
<img
|
|
src={product.images[0]}
|
|
alt={product.name}
|
|
className="h-full w-full object-cover object-center"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100 flex items-center justify-center">
|
|
<svg className="h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Product Info */}
|
|
<div className="mt-10 px-4 sm:px-0 sm:mt-16 lg:mt-0">
|
|
{/* Categories */}
|
|
{product.categories && product.categories.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{product.categories.map((cat: any) => (
|
|
<Link
|
|
key={cat.slug}
|
|
href={getLocalizedPath(`/product-category/${cat.slug}`, locale as 'en' | 'de')}
|
|
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors"
|
|
>
|
|
{cat.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<h1 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-4">
|
|
{product.name}
|
|
</h1>
|
|
|
|
{product.sku && (
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
{t('products.sku', locale as 'en' | 'de')}: {product.sku}
|
|
</p>
|
|
)}
|
|
|
|
{product.shortDescriptionHtml && (
|
|
<p className="text-lg text-gray-600 mb-6">
|
|
{product.shortDescriptionHtml}
|
|
</p>
|
|
)}
|
|
|
|
{/* Product Description */}
|
|
{processedDescription && (
|
|
<div className="border-t border-gray-200 pt-6 mb-8">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">
|
|
{t('products.description', locale as 'en' | 'de')}
|
|
</h3>
|
|
<div
|
|
className="prose prose-sm max-w-none text-gray-600"
|
|
dangerouslySetInnerHTML={{ __html: processedDescription }}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link
|
|
href={getLocalizedPath('/contact', locale as 'en' | 'de')}
|
|
className="flex-1 inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm"
|
|
>
|
|
{t('products.inquire', locale as 'en' | 'de')}
|
|
<svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</Link>
|
|
<Link
|
|
href={getLocalizedPath('/products', locale as 'en' | 'de')}
|
|
className="flex-1 inline-flex justify-center items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
|
>
|
|
{t('products.backToProducts', locale as 'en' | 'de')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Related Products */}
|
|
{relatedProducts.length > 0 && (
|
|
<div className="mt-20 border-t border-gray-200 pt-12">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{t('products.relatedProducts', locale as 'en' | 'de')}
|
|
</h2>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{relatedProducts.map((relatedProduct: any) => (
|
|
<Link
|
|
key={relatedProduct.slug}
|
|
href={getLocalizedPath(`/product/${relatedProduct.slug}`, locale as 'en' | 'de')}
|
|
className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
|
>
|
|
{relatedProduct.images && relatedProduct.images.length > 0 ? (
|
|
<div className="aspect-square bg-gray-100 overflow-hidden">
|
|
<img
|
|
src={relatedProduct.images[0]}
|
|
alt={relatedProduct.name}
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-200"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-square bg-gray-100 flex items-center justify-center">
|
|
<svg className="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<div className="p-4">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors mb-1 line-clamp-2">
|
|
{relatedProduct.name}
|
|
</h3>
|
|
{relatedProduct.shortDescriptionHtml && (
|
|
<p className="text-sm text-gray-600 line-clamp-2 mb-2">
|
|
{relatedProduct.shortDescriptionHtml}
|
|
</p>
|
|
)}
|
|
<span className="text-xs text-blue-600 font-medium">
|
|
{t('products.viewDetails', locale as 'en' | 'de')} →
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Locale Switcher */}
|
|
<div className="bg-gray-50 py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<LocaleSwitcher />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |