seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source 
- 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.
This commit is contained in:
sebseb7
2025-08-06 08:05:32 +02:00
parent 09cd68c144
commit 7a8d07ffc3
1 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ProductDetailPage.js
View File

@@ -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) {
this.loadKomponentImage(id, res.product.pictureList);
if (productData.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)
window.productDetailCache[this.props.seoName] = res;
// Cache the complete response data (product + attributes) - cache the response with translated product
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) {
for(const komponent of res.product.komponenten.split(",")) {
if(productData.komponenten) {
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,