diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js index 7f998f5..05d9a3d 100644 --- a/src/components/ProductDetailPage.js +++ b/src/components/ProductDetailPage.js @@ -165,11 +165,50 @@ class ProductDetailPage extends Component { } componentDidUpdate(prevProps) { - if (prevProps.seoName !== this.props.seoName) + // Check for seoName changes + if (prevProps.seoName !== this.props.seoName) { this.setState( { product: null, loading: true, upgrading: false, error: null, imageDialogOpen: false }, this.loadProductData ); + return; + } + + // Check for language changes + const prevLanguage = prevProps.languageContext?.currentLanguage || prevProps.i18n?.language || 'de'; + const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de'; + + if (prevLanguage !== currentLanguage) { + console.log('Language changed from', prevLanguage, 'to', currentLanguage, '- reloading product data'); + + // Clear relevant caches to force fresh socket calls with new language + if (window.productDetailCache) { + // Clear cache for current product + delete window.productDetailCache[this.props.seoName]; + + // Clear cache for any komponenten if they exist + if (this.state.komponenten && this.state.komponenten.length > 0) { + this.state.komponenten.forEach(komponent => { + delete window.productDetailCache[komponent.id]; + }); + } + } + + // Reset component state and reload data + this.setState( + { + loading: false, + upgrading: false, + error: null, + imageDialogOpen: false, + komponentenData: {}, + komponentenLoaded: false, + totalKomponentenPrice: 0, + totalSavings: 0 + }, + this.loadProductData + ); + } } loadKomponentImage = (komponentId, pictureList) => {