x

apps/spa/src/pages/ProductDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useParams, Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import ProductCard from '../components/ProductCard'
@@ -21,16 +22,17 @@ export default function ProductDetailPage() {
   const [cmsSections, setCmsSections] = useState<PageSection[]>([])
   
   const { addToCart } = useCartStore()
+  const { i18n } = useTranslation()
 
   useEffect(() => {
-    fetch(`${API_BASE}/categories`)
+    fetch(`${API_BASE}/categories?lang=${i18n.language}`)
       .then((r) => r.json())
       .then(setCategories)
       .catch(console.error)
-  }, [])
+  }, [i18n.language])
 
   useEffect(() => {
-    fetch(`${API_BASE}/pages/product-detail-layout`)
+    fetch(`${API_BASE}/pages/product-detail-layout?lang=${i18n.language}`)
       .then((r) => {
         if (!r.ok) throw new Error('Page not found');
         return r.json();
@@ -43,7 +45,7 @@ export default function ProductDetailPage() {
       .catch((err) => {
         console.log('Product detail dynamic layout sections not loaded:', err.message);
       });
-  }, [])
+  }, [i18n.language])
 
   useEffect(() => {
     if (!id) return
@@ -51,7 +53,7 @@ export default function ProductDetailPage() {
     setError(null)
     setSelectedVariant(0)
 
-    fetch(`${API_BASE}/products/${id}`)
+    fetch(`${API_BASE}/products/${id}?lang=${i18n.language}`)
       .then(async (r) => {
         if (!r.ok) throw new Error('Product not found')
         return r.json()
@@ -59,14 +61,14 @@ export default function ProductDetailPage() {
       .then(async (data: Product) => {
         setProduct(data)
         // Fetch related (same category, different product)
-        const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}`)
+        const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}&lang=${i18n.language}`)
         const relJson = await relRes.json()
         const relData: Product[] = relJson.data || []
         setRelated(relData.filter((p) => p.id !== data.id).slice(0, 6))
       })
       .catch((err) => setError(err.message))
       .finally(() => setLoading(false))
-  }, [id])
+  }, [id, i18n.language])
 
   if (loading) {
     return (