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