feat(Content, ProductDetail, SearchBar): enhance product handling with translation support

- Updated Content component to process products using translated attributes, improving localization.
- Modified ProductDetailPage to utilize translatedProduct for similar products.
- Adjusted SearchBar to provide suggestions based on translated products, enhancing user experience across components.

src/components/Content.js

@@ -279,17 +279,25 @@ class Content extends Component {
   }
 
   processData(response) {
-    const unfilteredProducts = response.products;
+    const rawProducts = response.products;
+    const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
     
     if (!window.individualProductCache) {
       window.individualProductCache = {};
     }
-    //console.log("processData", unfilteredProducts);
-    if(unfilteredProducts) unfilteredProducts.forEach(product => {
-      window.individualProductCache[product.id] = {
-        data: product,
+
+    const unfilteredProducts = [];
+
+    //console.log("processData", rawProducts);
+    if(rawProducts) rawProducts.forEach(product => {
+      const effectiveProduct = product.translatedProduct || product;
+      const cacheKey = `${effectiveProduct.id}_${currentLanguage}`;
+      
+      window.individualProductCache[cacheKey] = {
+        data: effectiveProduct,
         timestamp: Date.now()
       };
+      unfilteredProducts.push(effectiveProduct);
     });
 
     this.setState({
@@ -450,7 +458,12 @@ class Content extends Component {
       { query, language: currentLanguage, requestTranslation: currentLanguage === 'de' ? false : true },
       (response) => {
         if (response && response.products) {
-          this.processData(response);
+          // Map products to use translatedProduct if available
+          const enhancedResponse = {
+            ...response,
+            products: response.products.map(p => p.translatedProduct || p)
+          };
+          this.processData(enhancedResponse);
         } else {
           console.log("fetchSearchData in Content failed", response);
         }

src/components/ProductDetailPage.js

@@ -1972,7 +1972,7 @@ class ProductDetailPage extends Component {
               gap: 2 
             }}>
               {this.state.similarProducts.map((similarProductData, index) => {
-                const product = similarProductData.product;
+                const product = similarProductData.translatedProduct || similarProductData.product;
                 return (
                   <Box key={product.id} sx={{ display: 'flex', justifyContent: 'center' }}>
                     <Product

src/components/header/SearchBar.js

@@ -79,7 +79,7 @@ const SearchBar = () => {
         (response) => {
           if (response && response.products) {
             // getSearchProducts returns response.products array
-            const suggestions = response.products.slice(0, 8); // Limit to 8 suggestions
+            const suggestions = response.products.map(p => p.translatedProduct || p).slice(0, 8); // Limit to 8 suggestions
             setSuggestions(suggestions);
             setShowSuggestions(suggestions.length > 0);
             setSelectedIndex(-1); // Reset selection