diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index a94c835..ab964f8 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
import parse from "html-react-parser";
import AddToCartButton from "./AddToCartButton.js";
import ProductImage from "./ProductImage.js";
+import Product from "./Product.js";
import { withI18n } from "../i18n/withTranslation.js";
import ArticleQuestionForm from "./ArticleQuestionForm.js";
import ArticleRatingForm from "./ArticleRatingForm.js";
@@ -97,7 +98,9 @@ class ProductDetailPage extends Component {
// Snackbar state
snackbarOpen: false,
snackbarMessage: "",
- snackbarSeverity: "success"
+ snackbarSeverity: "success",
+ // Similar products
+ similarProducts: cachedData.similarProducts || []
};
} else if (partialProduct && isUpgrading) {
// Partial product data found - enter upgrading state
@@ -144,7 +147,9 @@ class ProductDetailPage extends Component {
// Snackbar state
snackbarOpen: false,
snackbarMessage: "",
- snackbarSeverity: "success"
+ snackbarSeverity: "success",
+ // Similar products
+ similarProducts: []
};
} else {
// No cached data found - full loading state
@@ -173,7 +178,9 @@ class ProductDetailPage extends Component {
// Snackbar state
snackbarOpen: false,
snackbarMessage: "",
- snackbarSeverity: "success"
+ snackbarSeverity: "success",
+ // Similar products
+ similarProducts: []
};
}
}
@@ -196,7 +203,7 @@ class ProductDetailPage extends Component {
// Check for seoName changes
if (prevProps.seoName !== this.props.seoName) {
this.setState(
- { product: null, loading: true, upgrading: false, error: null, imageDialogOpen: false },
+ { product: null, loading: true, upgrading: false, error: null, imageDialogOpen: false, similarProducts: [] },
this.loadProductData
);
return;
@@ -225,7 +232,8 @@ class ProductDetailPage extends Component {
komponentenData: {},
komponentenLoaded: false,
totalKomponentenPrice: 0,
- totalSavings: 0
+ totalSavings: 0,
+ similarProducts: []
},
this.loadProductData
);
@@ -514,7 +522,8 @@ class ProductDetailPage extends Component {
imageDialogOpen: false,
attributes: res.attributes,
komponenten: komponenten,
- komponentenLoaded: komponenten.length === 0 // If no komponenten, mark as loaded
+ komponentenLoaded: komponenten.length === 0, // If no komponenten, mark as loaded
+ similarProducts: res.similarProducts || []
}, () => {
if(komponenten.length > 0) {
for(const komponent of komponenten) {
@@ -1599,6 +1608,57 @@ class ProductDetailPage extends Component {
)}
+ {/* Similar Products Section */}
+ {this.state.similarProducts && this.state.similarProducts.length > 0 && (
+
+
+ {this.props.t ? this.props.t('product.similarProducts') : 'Ähnliche Produkte'}
+
+
+ {this.state.similarProducts.map((similarProductData, index) => {
+ const product = similarProductData.product;
+ return (
+
+
+
+ );
+ })}
+
+
+ )}
+
{/* Snackbar for user feedback */}