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

feat: implement product image saving in prerender-single-product and enhance image loading logic in Images component

Browse Source
This commit is contained in:
sebseb7
2025-07-20 10:46:22 +02:00
parent bffb1fed27
commit 92987a518b
2 changed files with 54 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
prerender-single-product.cjs
View File

@@ -88,6 +88,12 @@ const renderSingleProduct = async (productSeoName) => {
const productDetails = await fetchProductDetails(socket, productSeoName); const productDetails = await fetchProductDetails(socket, productSeoName);
console.log(`📦 Product found: ${productDetails.product.name}`); console.log(`📦 Product found: ${productDetails.product.name}`);
// Save product image to static files
if (productDetails.product) {
console.log(`📷 Saving product image...`);
await saveProductImages(socket, [productDetails.product], "Single Product", config.outputDir);
}
// Set up minimal global cache (empty for single product test) // Set up minimal global cache (empty for single product test)
global.window.productCache = {}; global.window.productCache = {};
global.productCache = {}; global.productCache = {};

86
src/components/Images.js
View File

@@ -134,46 +134,56 @@ class Images extends Component {
); );
} }
// SPA version - full functionality // SPA version - full functionality with static fallback
const getImageSrc = () => {
// If dynamic image is loaded, use it
if (this.state.pics[this.state.mainPic]) {
return this.state.pics[this.state.mainPic];
}
// Otherwise, use static fallback (same as prerender)
if (!this.props.pictureList || !this.props.pictureList.trim()) {
return '/assets/images/nopicture.jpg';
}
return `/assets/images/prod${this.props.pictureList.split(',')[0].trim()}.jpg`;
};
return ( return (
<> <>
{this.state.pics[this.state.mainPic] && ( <Box sx={{ position: 'relative', display: 'inline-block', width: '499px', maxWidth: '100%' }}>
<Box sx={{ position: 'relative', display: 'inline-block', width: '499px', maxWidth: '100%' }}> <CardMedia
<CardMedia component="img"
component="img" height="400"
height="400" sx={{
sx={{ objectFit: 'contain',
objectFit: 'contain', cursor: 'pointer',
cursor: 'pointer', transition: 'transform 0.2s ease-in-out',
transition: 'transform 0.2s ease-in-out', width: '499px',
width: '499px', maxWidth: '100%',
maxWidth: '100%', '&:hover': {
'&:hover': { transform: 'scale(1.02)'
transform: 'scale(1.02)' }
} }}
}} image={getImageSrc()}
image={this.state.pics[this.state.mainPic]} onClick={this.props.onOpenFullscreen}
onClick={this.props.onOpenFullscreen} />
/> <IconButton
<IconButton size="small"
size="small" disableRipple
disableRipple sx={{
sx={{ position: 'absolute',
position: 'absolute', top: 8,
top: 8, right: 8,
right: 8, color: 'white',
color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.4)',
backgroundColor: 'rgba(0, 0, 0, 0.4)', pointerEvents: 'none',
pointerEvents: 'none', '&:hover': {
'&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.6)'
backgroundColor: 'rgba(0, 0, 0, 0.6)' }
} }}
}} >
> <LoupeIcon fontSize="small" />
<LoupeIcon fontSize="small" /> </IconButton>
</IconButton> </Box>
</Box>
)}
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-start', mt: 1,mb: 1 }}> <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-start', mt: 1,mb: 1 }}>
{this.state.pics.filter(pic => pic !== null && pic !== this.state.pics[this.state.mainPic]).map((pic, filterIndex) => { {this.state.pics.filter(pic => pic !== null && pic !== this.state.pics[this.state.mainPic]).map((pic, filterIndex) => {
// Find the original index in the full pics array // Find the original index in the full pics array