x

apps/website/src/components/ProductCard.tsx

@@ -7,6 +7,7 @@ import { ShoppingBag, Layers } from 'lucide-react'
 import type { Product } from '@homaroma/types'
 import { getCategoryImage, formatPrice } from '@homaroma/types'
 import { resolveCategoryName, resolveLocalized } from '../lib/localization'
+import { generateProductSlug } from '../lib/slugify'
 import { useLang } from '../hooks/useLang'
 import { useCartStore } from '../store/cartStore'
 import WishlistButton from './WishlistButton'
@@ -22,6 +23,7 @@ export default function ProductCard({ product }: ProductCardProps) {
   
   const categoryName = resolveCategoryName(product.category, lang)
   const productName = resolveLocalized(product.name, lang) || product.brand.name
+  const productSlug = generateProductSlug(productName, product.id)
   const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
   const displayPrice = selectedVariant?.price ?? product.variants[0]?.price ?? 0
 
@@ -58,7 +60,7 @@ export default function ProductCard({ product }: ProductCardProps) {
     <div className="ui-card ui-card-hover group flex h-full cursor-pointer flex-col overflow-hidden p-2">
       <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-surface-page md:h-64 md:aspect-auto">
         <WishlistButton product={product} />
-        <Link href={`/products/${product.id}`} className="block h-full w-full">
+        <Link href={`/products/${productSlug}`} className="block h-full w-full">
           <Image
             src={imageUrl}
             alt={productName}
@@ -77,7 +79,7 @@ export default function ProductCard({ product }: ProductCardProps) {
       <div className="flex flex-1 flex-col p-4">
         <div className="mb-2">
           <h3 className="line-clamp-1 text-base font-bold leading-tight text-text-main transition-colors group-hover:text-brand-primary md:text-lg">
-            <Link href={`/products/${product.id}`}>
+            <Link href={`/products/${productSlug}`}>
               {productName}
             </Link>
           </h3>
@@ -105,7 +107,7 @@ export default function ProductCard({ product }: ProductCardProps) {
           </div>
 
           {product.variants && product.variants.length > 1 ? (
-            <Link href={`/products/${product.id}`} className="block w-full">
+            <Link href={`/products/${productSlug}`} className="block w-full">
               <button
                 type="button"
                 className="ui-button-primary w-full gap-1.5 shadow-sm"