feat: improve product data handling in ProductDetailPage for better localization support

- Updated ProductDetailPage to utilize translated product data when available, enhancing localization.
- Adjusted caching logic to store translated products and their attributes.
- Ensured that component images and related data are loaded from the correct product source, improving user experience.

src/components/ProductDetailPage.js

@@ -302,12 +302,15 @@ class ProductDetailPage extends Component {
       { articleId: id, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true},
       (res) => {
         if (res.success) {
+          // Use translated product if available, otherwise use original product
+          const productData = res.translatedProduct || res.product;
+          
           // Cache the successful response
-          window.productDetailCache[id] = res.product;
+          window.productDetailCache[id] = productData;
           
           // Load komponent image if available
-          if (res.product.pictureList) {
+          if (productData.pictureList) {
-            this.loadKomponentImage(id, res.product.pictureList);
+            this.loadKomponentImage(id, productData.pictureList);
           }
           
           // Update state with loaded data
@@ -315,7 +318,7 @@ class ProductDetailPage extends Component {
             const newKomponentenData = {
               ...prevState.komponentenData,
               [id]: {
-                ...res.product,
+                ...productData,
                 count: parseInt(count),
                 loading: false,
                 loaded: true
@@ -416,15 +419,18 @@ class ProductDetailPage extends Component {
       { seoName: this.props.seoName, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true},
       (res) => {
         if (res.success) {
-          res.product.seoName = this.props.seoName;
+          // Use translated product if available, otherwise use original product
+          const productData = res.translatedProduct || res.product;
+          productData.seoName = this.props.seoName;
           
           // Initialize cache if it doesn't exist
           if (!window.productDetailCache) {
             window.productDetailCache = {};
           }
           
-          // Cache the complete response data (product + attributes)
+          // Cache the complete response data (product + attributes) - cache the response with translated product
-          window.productDetailCache[this.props.seoName] = res;
+          const cacheData = { ...res, product: productData };
+          window.productDetailCache[this.props.seoName] = cacheData;
           
           // Clean up prerender fallback since we now have real data
           if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
@@ -433,15 +439,15 @@ class ProductDetailPage extends Component {
           }
           
           const komponenten = [];
-          if(res.product.komponenten) {
+          if(productData.komponenten) {
-            for(const komponent of res.product.komponenten.split(",")) {
+            for(const komponent of productData.komponenten.split(",")) {
               // Handle both "x" and "×" as separators
               const [id, count] = komponent.split(/[x×]/);
               komponenten.push({id: id.trim(), count: count.trim()});
             }
           }
           this.setState({
-            product: res.product,
+            product: productData,
             loading: false,
             upgrading: false, // Clear upgrading state since we now have complete data
             error: null,