425 lines
14 KiB
JavaScript
425 lines
14 KiB
JavaScript
const React = require('react');
|
|
const {
|
|
Container,
|
|
Typography,
|
|
Card,
|
|
CardMedia,
|
|
Grid,
|
|
Box,
|
|
Chip,
|
|
Stack,
|
|
AppBar,
|
|
Toolbar
|
|
} = require('@mui/material');
|
|
const Footer = require('./components/Footer.js').default;
|
|
const { Logo } = require('./components/header/index.js');
|
|
const ProductImage = require('./components/ProductImage.js').default;
|
|
|
|
// Utility function to clean product names by removing trailing number in parentheses
|
|
const cleanProductName = (name) => {
|
|
if (!name) return "";
|
|
// Remove patterns like " (1)", " (3)", " (10)" at the end of the string
|
|
return name.replace(/\s*\(\d+\)\s*$/, "").trim();
|
|
};
|
|
|
|
class PrerenderProduct extends React.Component {
|
|
render() {
|
|
const { productData } = this.props;
|
|
|
|
if (!productData) {
|
|
return React.createElement(
|
|
Box,
|
|
{ sx: { p: 4, textAlign: "center" } },
|
|
React.createElement(
|
|
Typography,
|
|
{ variant: 'h5', gutterBottom: true },
|
|
'Produkt nicht gefunden'
|
|
),
|
|
React.createElement(
|
|
Typography,
|
|
null,
|
|
'Das gesuchte Produkt existiert nicht oder wurde entfernt.'
|
|
)
|
|
);
|
|
}
|
|
|
|
const product = productData.product;
|
|
const attributes = productData.attributes || [];
|
|
const mainImage = product.pictureList && product.pictureList.trim()
|
|
? `/assets/images/prod${product.pictureList.split(',')[0].trim()}.jpg`
|
|
: '/assets/images/nopicture.jpg';
|
|
|
|
// Format price with tax
|
|
const priceWithTax = new Intl.NumberFormat("de-DE", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(product.price);
|
|
|
|
return React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: '100vh',
|
|
mb: 0,
|
|
pb: 0,
|
|
bgcolor: 'background.default'
|
|
}
|
|
},
|
|
React.createElement(
|
|
AppBar,
|
|
{ position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
|
|
React.createElement(
|
|
Toolbar,
|
|
{ sx: { minHeight: 64 } },
|
|
React.createElement(
|
|
Container,
|
|
{ maxWidth: 'lg', sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 } } },
|
|
React.createElement(Logo)
|
|
)
|
|
)
|
|
),
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { flexGrow: 1 } },
|
|
React.createElement(
|
|
Container,
|
|
{
|
|
maxWidth: "lg",
|
|
sx: {
|
|
p: { xs: 2, md: 2 },
|
|
pb: { xs: 4, md: 8 },
|
|
flexGrow: 1
|
|
}
|
|
},
|
|
// Back button (breadcrumbs section)
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
mb: 2,
|
|
position: ["-webkit-sticky", "sticky"],
|
|
top: {
|
|
xs: "80px",
|
|
sm: "80px",
|
|
md: "80px",
|
|
lg: "80px",
|
|
},
|
|
left: 0,
|
|
width: "100%",
|
|
display: "flex",
|
|
zIndex: 999, // Just below the AppBar
|
|
py: 0,
|
|
px: 2,
|
|
}
|
|
},
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
ml: { xs: 0, md: 0 },
|
|
display: "inline-flex",
|
|
px: 0,
|
|
py: 1,
|
|
backgroundColor: "#2e7d32", // primary dark green
|
|
borderRadius: 1,
|
|
}
|
|
},
|
|
React.createElement(
|
|
Typography,
|
|
{ variant: "body2", color: "text.secondary" },
|
|
React.createElement(
|
|
'a',
|
|
{
|
|
href: "#",
|
|
onClick: (e) => {
|
|
e.preventDefault();
|
|
if (window.history.length > 1) {
|
|
window.history.back();
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
},
|
|
style: {
|
|
paddingLeft: 16,
|
|
paddingRight: 16,
|
|
paddingTop: 8,
|
|
paddingBottom: 8,
|
|
textDecoration: "none",
|
|
color: "#fff",
|
|
fontWeight: "bold",
|
|
cursor: "pointer"
|
|
}
|
|
},
|
|
this.props.t ? this.props.t('common.back') : 'Zurück'
|
|
)
|
|
)
|
|
)
|
|
),
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: "flex",
|
|
flexDirection: { xs: "column", md: "row" },
|
|
gap: 4,
|
|
background: "#fff",
|
|
borderRadius: 2,
|
|
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
|
|
}
|
|
},
|
|
// Product Image Section
|
|
React.createElement(
|
|
ProductImage,
|
|
{
|
|
product: product,
|
|
isPrerender: true
|
|
}
|
|
),
|
|
// Product Details Section
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
flex: "1 1 60%",
|
|
p: { xs: 2, md: 4 },
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}
|
|
},
|
|
// Product identifiers
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { mb: 1 } },
|
|
React.createElement(
|
|
Typography,
|
|
{ variant: 'body2', color: 'text.secondary' },
|
|
(this.props.t ? this.props.t('product.articleNumber') : 'Artikelnummer')+': '+product.articleNumber+' '+(product.gtin ? ` | GTIN: ${product.gtin}` : "")
|
|
)
|
|
),
|
|
// Product title
|
|
React.createElement(
|
|
Typography,
|
|
{
|
|
variant: 'h4',
|
|
component: 'h1',
|
|
gutterBottom: true,
|
|
sx: {
|
|
fontWeight: 600,
|
|
color: "#333"
|
|
}
|
|
},
|
|
cleanProductName(product.name)
|
|
),
|
|
// Manufacturer if available
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { display: "flex", alignItems: "center", mb: 2 } },
|
|
product.manufacturer && React.createElement(
|
|
Typography,
|
|
{ variant: 'body2', sx: { fontStyle: "italic" } },
|
|
(this.props.t ? this.props.t('product.manufacturer') : 'Hersteller')+': '+product.manufacturer
|
|
)
|
|
),
|
|
// Attribute images and chips with action buttons section
|
|
(attributes.length > 0) && React.createElement(
|
|
Box,
|
|
{ sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 } },
|
|
// Left side - attributes as chips (visible)
|
|
React.createElement(
|
|
Stack,
|
|
{ direction: 'row', spacing: 2, sx: { flexWrap: "wrap", gap: 1, flex: 1 } },
|
|
...attributes.map((attr, index) =>
|
|
React.createElement(
|
|
Chip,
|
|
{
|
|
key: index,
|
|
label: attr.cWert,
|
|
disabled: true,
|
|
sx: { mb: 1 }
|
|
}
|
|
)
|
|
)
|
|
),
|
|
// Right side - invisible action buttons (space-filling only)
|
|
React.createElement(
|
|
Stack,
|
|
{ direction: 'column', spacing: 1, sx: { flexShrink: 0 } },
|
|
// Invisible "Frage zum Artikel" button
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { height: "32px", width: "120px", visibility: "hidden" } }
|
|
),
|
|
// Invisible "Artikel Bewerten" button
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { height: "32px", width: "120px", visibility: "hidden" } }
|
|
),
|
|
// Invisible "Verfügbarkeit anfragen" button (conditional)
|
|
(product.available !== 1 && product.availableSupplier !== 1) && React.createElement(
|
|
Box,
|
|
{ sx: { height: "32px", width: "140px", visibility: "hidden" } }
|
|
)
|
|
)
|
|
),
|
|
// Weight
|
|
product.weight && product.weight > 0 && React.createElement(
|
|
Box,
|
|
{ sx: { mb: 2 } },
|
|
React.createElement(
|
|
Typography,
|
|
{ variant: 'body2', color: 'text.secondary' },
|
|
(this.props.t ? this.props.t('product.weight', { weight: product.weight.toFixed(1).replace(".", ",") }) : `Gewicht: ${product.weight.toFixed(1).replace(".", ",")} kg`)
|
|
)
|
|
),
|
|
// Price and availability section
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
mt: "auto",
|
|
p: 3,
|
|
background: "#f9f9f9",
|
|
borderRadius: 2,
|
|
}
|
|
},
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: "flex",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
justifyContent: "space-between",
|
|
alignItems: { xs: "flex-start", sm: "flex-start" },
|
|
gap: 2,
|
|
}
|
|
},
|
|
// Left side - Price information
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { flex: 1 } },
|
|
React.createElement(
|
|
Typography,
|
|
{
|
|
variant: "h4",
|
|
color: "primary",
|
|
sx: { fontWeight: "bold", mb: 1 }
|
|
},
|
|
priceWithTax
|
|
),
|
|
// VAT info with fixed height
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { minHeight: "20px", mb: 1 } },
|
|
product.vat && React.createElement(
|
|
Typography,
|
|
{ variant: 'body2', color: 'text.secondary' },
|
|
(this.props.t ? this.props.t('product.inclVat', { vat: product.vat }) : `inkl. ${product.vat}% MwSt.`)
|
|
)
|
|
),
|
|
// Shipping class with fixed height
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { minHeight: "20px", mb: 1 } },
|
|
product.versandklasse &&
|
|
product.versandklasse != "standard" &&
|
|
product.versandklasse != "kostenlos" && React.createElement(
|
|
Typography,
|
|
{ variant: 'body2', color: 'text.secondary' },
|
|
product.versandklasse
|
|
)
|
|
)
|
|
),
|
|
// Right side - Cart button area with availability info
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
minWidth: { xs: "100%", sm: "200px" }
|
|
}
|
|
},
|
|
// Reserved space for AddToCartButton (will be populated by SPA)
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
minHeight: "48px",
|
|
mb: 1
|
|
}
|
|
}
|
|
),
|
|
// Availability and delivery time info (matching ProductDetailPage)
|
|
React.createElement(
|
|
Typography,
|
|
{
|
|
variant: 'caption',
|
|
sx: {
|
|
fontStyle: "italic",
|
|
color: "text.secondary",
|
|
textAlign: "center",
|
|
minHeight: "28px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}
|
|
},
|
|
product.id && product.id.toString().endsWith("steckling") ?
|
|
(this.props.t ? this.props.t('delivery.times.cutting14Days') : "Lieferzeit: 14 Tage") :
|
|
product.available == 1 ?
|
|
(this.props.t ? this.props.t('delivery.times.standard2to3Days') : "Lieferzeit: 2-3 Tage") :
|
|
product.availableSupplier == 1 ?
|
|
(this.props.t ? this.props.t('delivery.times.supplier7to9Days') : "Lieferzeit: 7-9 Tage") :
|
|
(product.available ? '✅ Verfügbar' : '❌ Nicht verfügbar')
|
|
)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
// Product full description - separate card
|
|
product.description && React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
mt: 4,
|
|
p: 4,
|
|
background: "#fff",
|
|
borderRadius: 2,
|
|
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
|
|
}
|
|
},
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
mt: 2,
|
|
lineHeight: 1.7,
|
|
"& p": { mt: 0, mb: 2 },
|
|
"& strong": { fontWeight: 600 },
|
|
}
|
|
},
|
|
React.createElement(
|
|
'div',
|
|
{
|
|
dangerouslySetInnerHTML: { __html: product.description },
|
|
style: {
|
|
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
|
|
fontSize: '1rem',
|
|
lineHeight: '1.7',
|
|
color: '#333'
|
|
}
|
|
}
|
|
)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
React.createElement(Footer)
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = { default: PrerenderProduct };
|