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 */}