feat(i18n): enhance data fetching and caching with language support

- Update data-fetching functions to include language and translation request parameters for improved internationalization.
- Modify caching logic in Content and GrowTentKonfigurator components to utilize language-aware cache keys.
- Ensure ProductDetailPage retrieves cached data based on the current language, enhancing user experience across different locales.
- Integrate language handling in various components to maintain consistency in data management and rendering.

src/components/ProductDetailPage.js

@@ -34,16 +34,20 @@ class ProductDetailPage extends Component {
     let cachedData = null;
     let partialProduct = null;
     let isUpgrading = false;
-    
-    if (window.productDetailCache && window.productDetailCache[this.props.seoName]) {
-      cachedData = window.productDetailCache[this.props.seoName];
+
+    // Get current language for cache key
+    const currentLanguage = this.props.i18n?.language || 'de';
+    const cacheKey = `product_${this.props.seoName}_${currentLanguage}`;
+
+    if (window.productDetailCache && window.productDetailCache[cacheKey]) {
+      cachedData = window.productDetailCache[cacheKey];
     } else if (window.productDetailCache) {
       // If not found by seoName, search for partial data by checking all cached products
       // Look for a product where the seoName matches this.props.seoName
       for (const key in window.productDetailCache) {
         const cached = window.productDetailCache[key];
-        if (cached && cached.seoName === this.props.seoName) {
-          partialProduct = cached;
+        if (cached && cached.product && cached.product.seoName === this.props.seoName) {
+          partialProduct = cached.product;
           isUpgrading = true;
           break;
         }
@@ -296,9 +300,12 @@ class ProductDetailPage extends Component {
       window.productDetailCache = {};
     }
 
+    const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
+    const cacheKey = `product_${id}_${currentLanguage}`;
+
     // Check if this komponent is already cached
-    if (window.productDetailCache[id]) {
-      const cachedProduct = window.productDetailCache[id];
+    if (window.productDetailCache[cacheKey]) {
+      const cachedProduct = window.productDetailCache[cacheKey];
       
       // Load komponent image if available
       if (cachedProduct.pictureList) {
@@ -367,9 +374,7 @@ class ProductDetailPage extends Component {
     }));
 
     console.log('loadKomponent', id, count);
-    const currentLanguage = this.props.languageContext?.currentLanguage 
-    const currentLanguage2 = this.props.i18n?.language || 'de';
-    console.log('debuglanguage', currentLanguage, currentLanguage2);
+
     window.socketManager.emit(
       "getProductView",
       { articleId: id, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true},
@@ -377,9 +382,9 @@ class ProductDetailPage extends Component {
         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] = productData;
+          window.productDetailCache[cacheKey] = productData;
           
           // Load komponent image if available
           if (productData.pictureList) {
@@ -556,6 +561,9 @@ class ProductDetailPage extends Component {
     console.log('loadProductData', this.props.seoName);
     const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
     console.log('debuglanguage', currentLanguage);
+
+    const cacheKey = `product_${this.props.seoName}_${currentLanguage}`;
+
     window.socketManager.emit(
       "getProductView",
       { seoName: this.props.seoName, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true},
@@ -564,15 +572,15 @@ class ProductDetailPage extends Component {
           // 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 response with translated product
           const cacheData = { ...res, product: productData };
-          window.productDetailCache[this.props.seoName] = cacheData;
+          window.productDetailCache[cacheKey] = cacheData;
           
           // Clean up prerender fallback since we now have real data
           if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
@@ -1317,8 +1325,16 @@ class ProductDetailPage extends Component {
             >
               {product.description ? (() => {
                 try {
-                  // Sanitize HTML to remove invalid tags
-                  return parse(sanitizeHtml(product.description));
+                  // Sanitize HTML to remove invalid tags, but preserve style attributes
+                  return parse(sanitizeHtml(product.description, {
+                    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+                    allowedAttributes: {
+                      '*': ['class', 'style'],
+                      'a': ['href', 'title'],
+                      'img': ['src', 'alt', 'width', 'height']
+                    },
+                    disallowedTagsMode: 'discard'
+                  }));
                 } catch (error) {
                   console.warn('Failed to parse product description HTML:', error);
                   // Fallback to rendering as plain text if HTML parsing fails