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

feat: Add GPSR safety info translation and remove pre-order cutting button functionality.

Browse Source
This commit is contained in:
sebseb7
2025-12-19 12:46:49 +01:00
parent dbd5df28f8
commit 0ccb00db32
3 changed files with 369 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AddToCartButton.js
View File

@@ -190,8 +190,8 @@ class AddToCartButton extends Component {
}, },
}} }}
> >
{this.props.steckling ? {/*this.props.steckling ?
(this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") : (this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") : */
(this.props.t ? this.props.t('cart.addToCart') : "In den Korb")} (this.props.t ? this.props.t('cart.addToCart') : "In den Korb")}
</Button> </Button>
); );
@@ -342,8 +342,8 @@ class AddToCartButton extends Component {
}, },
}} }}
> >
{this.props.steckling ? {/*this.props.steckling ?
(this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") : (this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") :*/
(this.props.t ? this.props.t('cart.addToCart') : "In den Korb")} (this.props.t ? this.props.t('cart.addToCart') : "In den Korb")}
</Button> </Button>
); );

50
src/components/ProductDetailPage.js
View File

@@ -71,11 +71,11 @@ class ProductDetailPage extends Component {
// Initialize komponenten from cached product data // Initialize komponenten from cached product data
const komponenten = []; const komponenten = [];
if(cachedData.product.komponenten) { if (cachedData.product.komponenten) {
for(const komponent of cachedData.product.komponenten.split(",")) { for (const komponent of cachedData.product.komponenten.split(",")) {
// Handle both "x" and "×" as separators // Handle both "x" and "×" as separators
const [id, count] = komponent.split(/[x×]/); const [id, count] = komponent.split(/[x×]/);
komponenten.push({id: id.trim(), count: count.trim()}); komponenten.push({ id: id.trim(), count: count.trim() });
} }
} }
@@ -123,11 +123,11 @@ class ProductDetailPage extends Component {
// Initialize komponenten from partial product data if available // Initialize komponenten from partial product data if available
const komponenten = []; const komponenten = [];
if(partialProduct.komponenten) { if (partialProduct.komponenten) {
for(const komponent of partialProduct.komponenten.split(",")) { for (const komponent of partialProduct.komponenten.split(",")) {
// Handle both "x" and "×" as separators // Handle both "x" and "×" as separators
const [id, count] = komponent.split(/[x×]/); const [id, count] = komponent.split(/[x×]/);
komponenten.push({id: id.trim(), count: count.trim()}); komponenten.push({ id: id.trim(), count: count.trim() });
} }
} }
@@ -222,7 +222,7 @@ class ProductDetailPage extends Component {
} }
if (this.state.komponenten.length > 0 && !this.state.komponentenLoaded) { if (this.state.komponenten.length > 0 && !this.state.komponentenLoaded) {
for(const komponent of this.state.komponenten) { for (const komponent of this.state.komponenten) {
this.loadKomponent(komponent.id, komponent.count); this.loadKomponent(komponent.id, komponent.count);
} }
} }
@@ -403,7 +403,7 @@ class ProductDetailPage extends Component {
window.socketManager.emit( window.socketManager.emit(
"getProductView", "getProductView",
{ articleId: id, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true}, { articleId: id, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true },
(res) => { (res) => {
if (res.success) { if (res.success) {
// Use translated product if available, otherwise use original product // Use translated product if available, otherwise use original product
@@ -592,7 +592,7 @@ class ProductDetailPage extends Component {
window.socketManager.emit( window.socketManager.emit(
"getProductView", "getProductView",
{ seoName: this.props.seoName, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true}, { seoName: this.props.seoName, language: currentLanguage, requestTranslation: currentLanguage === "de" ? false : true },
(res) => { (res) => {
if (res.success) { if (res.success) {
// Use translated product if available, otherwise use original product // Use translated product if available, otherwise use original product
@@ -618,11 +618,11 @@ class ProductDetailPage extends Component {
} }
const komponenten = []; const komponenten = [];
if(productData.komponenten) { if (productData.komponenten) {
for(const komponent of productData.komponenten.split(",")) { for (const komponent of productData.komponenten.split(",")) {
// Handle both "x" and "×" as separators // Handle both "x" and "×" as separators
const [id, count] = komponent.split(/[x×]/); const [id, count] = komponent.split(/[x×]/);
komponenten.push({id: id.trim(), count: count.trim()}); komponenten.push({ id: id.trim(), count: count.trim() });
} }
} }
this.setState({ this.setState({
@@ -647,8 +647,8 @@ class ProductDetailPage extends Component {
console.warn('ProductDetailPage: setCurrentProduct prop is missing after fetch'); console.warn('ProductDetailPage: setCurrentProduct prop is missing after fetch');
} }
if(komponenten.length > 0) { if (komponenten.length > 0) {
for(const komponent of komponenten) { for (const komponent of komponenten) {
this.loadKomponent(komponent.id, komponent.count); this.loadKomponent(komponent.id, komponent.count);
} }
} }
@@ -1087,7 +1087,7 @@ class ProductDetailPage extends Component {
} }
render() { render() {
const { product, loading, upgrading, error, attributeImages, isSteckling, attributes, komponentenLoaded, komponentenData, komponentenImages, totalKomponentenPrice, totalSavings, shareAnchorEl, sharePopperOpen, snackbarOpen, snackbarMessage, snackbarSeverity } = const { product, loading, upgrading, error, attributeImages, /*isSteckling,*/ attributes, komponentenLoaded, komponentenData, komponentenImages, totalKomponentenPrice, totalSavings, shareAnchorEl, sharePopperOpen, snackbarOpen, snackbarMessage, snackbarSeverity } =
this.state; this.state;
// Debug alerts removed // Debug alerts removed
@@ -1305,7 +1305,7 @@ class ProductDetailPage extends Component {
.map((attribute) => { .map((attribute) => {
const key = attribute.kMerkmalWert; const key = attribute.kMerkmalWert;
return ( return (
<Box key={key} sx={{ mb: 1,border: "1px solid #e0e0e0", borderRadius: 1 }}> <Box key={key} sx={{ mb: 1, border: "1px solid #e0e0e0", borderRadius: 1 }}>
<CardMedia <CardMedia
component="img" component="img"
style={{ width: "72px", height: "98px" }} style={{ width: "72px", height: "98px" }}
@@ -1444,7 +1444,7 @@ class ProductDetailPage extends Component {
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
{this.props.t ? this.props.t('product.inclVat', { vat: product.vat }) : `inkl. ${product.vat}% MwSt.`} {this.props.t ? this.props.t('product.inclVat', { vat: product.vat }) : `inkl. ${product.vat}% MwSt.`}
{product.cGrundEinheit && product.fGrundPreis && ( {product.cGrundEinheit && product.fGrundPreis && (
<>; {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(product.fGrundPreis)}/{product.cGrundEinheit}</> <>; {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.fGrundPreis)}/{product.cGrundEinheit}</>
)} )}
</Typography> </Typography>
@@ -1500,7 +1500,7 @@ class ProductDetailPage extends Component {
alignItems: "flex-start", alignItems: "flex-start",
}} }}
> >
{isSteckling && product.available == 1 && ( {/*isSteckling && product.available == 1 && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@@ -1534,7 +1534,7 @@ class ProductDetailPage extends Component {
{this.props.t ? this.props.t('product.pickupPrice') : 'Abholpreis: 19,90 € pro Steckling.'} {this.props.t ? this.props.t('product.pickupPrice') : 'Abholpreis: 19,90 € pro Steckling.'}
</Typography> </Typography>
</Box> </Box>
)} )*/}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@@ -1663,6 +1663,18 @@ class ProductDetailPage extends Component {
</Box> </Box>
) : null} ) : null}
</Box> </Box>
{/* GPSR Information */}
{product.gpsr && (
<Box sx={{ mt: 3, pt: 2, borderTop: "1px solid #eee" }}>
<Typography variant="subtitle2" sx={{ fontSize: "0.75rem", fontWeight: "bold", mb: 0.5 }}>
{this.props.t ? this.props.t("product.gpsrSafetyInfo") : "GPSR Informationen zur Produktsicherheit:"}
</Typography>
<Typography variant="caption" component="div" sx={{ whiteSpace: "pre-wrap", color: "text.secondary" }}>
{product.gpsr}
</Typography>
</Box>
)}
</Box> </Box>
)} )}

1
src/i18n/locales/de/product.js
View File

@@ -24,6 +24,7 @@ export default {
"youSave": "Sie sparen: {{amount}}", "youSave": "Sie sparen: {{amount}}",
"cheaperThanIndividual": "Günstiger als Einzelkauf", "cheaperThanIndividual": "Günstiger als Einzelkauf",
"pickupPrice": "Abholpreis: 19,90 € pro Steckling.", "pickupPrice": "Abholpreis: 19,90 € pro Steckling.",
"gpsrSafetyInfo": "GPSR Informationen zur Produktsicherheit:",
"consistsOf": "Bestehend aus:", "consistsOf": "Bestehend aus:",
"loadingComponentDetails": "{{index}}. Lädt Komponent-Details...", "loadingComponentDetails": "{{index}}. Lädt Komponent-Details...",
"loadingProduct": "Produkt wird geladen...", "loadingProduct": "Produkt wird geladen...",