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

refactor: simplify layout and improve styling for product attributes and sections in PrerenderProduct component

Browse Source
This commit is contained in:
sebseb7
2025-07-20 00:28:47 +02:00
parent 5d14bef740
commit cc679e77a9
1 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/PrerenderProduct.js
View File

@@ -213,10 +213,10 @@ class PrerenderProduct extends React.Component {
minHeight: "400px", // Ensure consistent minimum height
}
},
// Product identifiers - fixed height to prevent shifts
// Product identifiers
React.createElement(
Box,
{ sx: { mb: 1, minHeight: "24px" } },
{ sx: { mb: 1 } },
React.createElement(
Typography,
{ variant: 'body2', color: 'text.secondary' },
@@ -247,38 +247,58 @@ class PrerenderProduct extends React.Component {
(this.props.t ? this.props.t('product.manufacturer') : 'Hersteller')+': '+product.manufacturer
)
),
// Product specifications (attributes) - fixed height container
React.createElement(
// Attribute images and chips with action buttons section
(attributes.length > 0) && React.createElement(
Box,
{ sx: { mb: 2, minHeight: attributes.length > 0 ? "auto" : "0px" } },
attributes.length > 0 && React.createElement(
{ 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: 1, flexWrap: 'wrap', gap: 1 },
{ direction: 'row', spacing: 2, sx: { flexWrap: "wrap", gap: 1, flex: 1 } },
...attributes.map((attr, index) =>
React.createElement(
Chip,
{
key: index,
label: `${attr.cName}: ${attr.cWert}`,
label: attr.cWert,
disabled: true,
size: "small",
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 - fixed height placeholder
React.createElement(
// Weight
product.weight && product.weight > 0 && React.createElement(
Box,
{ sx: { mb: 2, minHeight: "28px" } },
product.weight && product.weight > 0 && React.createElement(
{ 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 - positioned at bottom
// Price and availability section
React.createElement(
Box,
{
@@ -287,7 +307,6 @@ class PrerenderProduct extends React.Component {
p: 3,
background: "#f9f9f9",
borderRadius: 2,
minHeight: "120px", // Fixed minimum height for price section
}
},
React.createElement(
@@ -347,30 +366,15 @@ class PrerenderProduct extends React.Component {
minWidth: { xs: "100%", sm: "200px" }
}
},
// Placeholder for AddToCartButton area
// Reserved space for AddToCartButton (will be populated by SPA)
React.createElement(
Box,
{
sx: {
minHeight: "48px",
mb: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f0f0f0",
borderRadius: 2,
border: "1px dashed #ccc"
mb: 1
}
},
React.createElement(
Typography,
{
variant: 'body2',
color: 'text.secondary',
sx: { fontStyle: 'italic' }
},
'Add to Cart Button'
)
}
),
// Availability and delivery time info (matching ProductDetailPage)
React.createElement(