x

apps/spa/src/pages/ShopPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import ProductCard from '../components/ProductCard'
@@ -24,6 +25,7 @@ export default function ShopPage() {
   const [loading, setLoading] = useState(true)
   const [productsLoading, setProductsLoading] = useState(false)
   const [cmsSections, setCmsSections] = useState<PageSection[]>([])
+  const { i18n } = useTranslation()
 
   // Handle coupon from URL
   useEffect(() => {
@@ -38,18 +40,18 @@ export default function ShopPage() {
 
   // Fetch categories
   useEffect(() => {
-    fetch(`${API_BASE}/categories`)
+    fetch(`${API_BASE}/categories?lang=${i18n.language}`)
       .then((r) => r.json())
       .then((data: Category[]) => {
         setCategories(data)
         setLoading(false)
       })
       .catch(console.error)
-  }, [])
+  }, [i18n.language])
 
   // Fetch CMS sections for shop-layout
   useEffect(() => {
-    fetch(`${API_BASE}/pages/shop-layout`)
+    fetch(`${API_BASE}/pages/shop-layout?lang=${i18n.language}`)
       .then((r) => {
         if (!r.ok) throw new Error('Page not found');
         return r.json();
@@ -62,7 +64,7 @@ export default function ShopPage() {
       .catch((err) => {
         console.log('Shop dynamic layout sections not loaded:', err.message);
       });
-  }, [])
+  }, [i18n.language])
 
   // Debounce search input
   useEffect(() => {
@@ -86,6 +88,7 @@ export default function ShopPage() {
     params.append('limit', '1000') // fetch all matching items locally
     if (activeCategory) params.append('categoryId', activeCategory.toString())
     if (searchQuery.trim()) params.append('search', searchQuery.trim())
+    params.append('lang', i18n.language)
 
     fetch(`${API_BASE}/products?${params.toString()}`)
       .then((r) => r.json())
@@ -97,7 +100,7 @@ export default function ShopPage() {
       })
       .catch(console.error)
       .finally(() => setProductsLoading(false))
-  }, [activeCategory, searchQuery])
+  }, [activeCategory, searchQuery, i18n.language])
 
   // Intersection Observer for infinite scroll
   useEffect(() => {