feat: Implement multi-image product display with fading and hover effects, and introduce lazy-loaded HTML sanitization.
This commit is contained in:
sebseb7
@@ -71,58 +71,157 @@ const findLevel1CategoryId = (categoryId) => {
|
||||
class Product extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
||||
this._isMounted = false;
|
||||
|
||||
|
||||
if (!window.smallPicCache) {
|
||||
window.smallPicCache = {};
|
||||
}
|
||||
|
||||
if(this.props.pictureList && this.props.pictureList.length > 0 && this.props.pictureList.split(',').length > 0) {
|
||||
const bildId = this.props.pictureList.split(',')[0];
|
||||
if(window.smallPicCache[bildId]){
|
||||
this.state = {image:window.smallPicCache[bildId],loading:false, error: false}
|
||||
}else{
|
||||
this.state = {image: null, loading: true, error: false};
|
||||
|
||||
this.loadImage(bildId);
|
||||
}
|
||||
}else{
|
||||
this.state = {image: null, loading: false, error: false};
|
||||
const pictureIds = (this.props.pictureList && this.props.pictureList.length > 0)
|
||||
? this.props.pictureList.split(',').filter(id => id.trim().length > 0)
|
||||
: [];
|
||||
|
||||
if (pictureIds.length > 0) {
|
||||
const initialImages = pictureIds.map(id => window.smallPicCache[id] || null);
|
||||
const isFirstCached = !!initialImages[0];
|
||||
|
||||
this.state = {
|
||||
images: initialImages,
|
||||
currentImageIndex: 0,
|
||||
loading: !isFirstCached,
|
||||
error: false,
|
||||
isHovering: false
|
||||
};
|
||||
|
||||
pictureIds.forEach((id, index) => {
|
||||
if (!window.smallPicCache[id]) {
|
||||
this.loadImage(id, index);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.state = { images: [], currentImageIndex: 0, loading: false, error: false, isHovering: false };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
this.startRandomFading();
|
||||
}
|
||||
|
||||
loadImage = (bildId) => {
|
||||
|
||||
console.log('loadImagevisSocket', bildId);
|
||||
window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
|
||||
if(res.success){
|
||||
window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
|
||||
if (this._isMounted) {
|
||||
this.setState({image: window.smallPicCache[bildId], loading: false});
|
||||
} else {
|
||||
this.state.image = window.smallPicCache[bildId];
|
||||
this.state.loading = false;
|
||||
}
|
||||
}else{
|
||||
console.log('Fehler beim Laden des Bildes:', res);
|
||||
if (this._isMounted) {
|
||||
this.setState({error: true, loading: false});
|
||||
} else {
|
||||
startRandomFading = () => {
|
||||
if (this.state.isHovering) return;
|
||||
|
||||
const pictureIds = (this.props.pictureList && this.props.pictureList.length > 0)
|
||||
? this.props.pictureList.split(',').filter(id => id.trim().length > 0)
|
||||
: [];
|
||||
|
||||
if (pictureIds.length > 1) {
|
||||
const minInterval = 4000;
|
||||
const maxInterval = 8000;
|
||||
const randomInterval = Math.floor(Math.random() * (maxInterval - minInterval + 1)) + minInterval;
|
||||
|
||||
this.fadeTimeout = setTimeout(() => {
|
||||
if (this._isMounted) {
|
||||
this.setState(prevState => {
|
||||
let nextIndex = (prevState.currentImageIndex + 1) % pictureIds.length;
|
||||
let attempts = 0;
|
||||
while (!prevState.images[nextIndex] && attempts < pictureIds.length) {
|
||||
nextIndex = (nextIndex + 1) % pictureIds.length;
|
||||
attempts++;
|
||||
}
|
||||
if (attempts < pictureIds.length && nextIndex !== prevState.currentImageIndex) {
|
||||
return { currentImageIndex: nextIndex };
|
||||
}
|
||||
return null;
|
||||
}, () => {
|
||||
this.startRandomFading();
|
||||
});
|
||||
}
|
||||
}, randomInterval);
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseMove = (e) => {
|
||||
const pictureIds = (this.props.pictureList && this.props.pictureList.length > 0)
|
||||
? this.props.pictureList.split(',').filter(id => id.trim().length > 0)
|
||||
: [];
|
||||
|
||||
if (pictureIds.length > 1) {
|
||||
if (this.fadeTimeout) {
|
||||
clearTimeout(this.fadeTimeout);
|
||||
this.fadeTimeout = null;
|
||||
}
|
||||
|
||||
const { left, width } = e.currentTarget.getBoundingClientRect();
|
||||
const x = e.clientX - left;
|
||||
|
||||
const segmentWidth = width / pictureIds.length;
|
||||
let targetIndex = Math.floor(x / segmentWidth);
|
||||
if (targetIndex >= pictureIds.length) targetIndex = pictureIds.length - 1;
|
||||
if (targetIndex < 0) targetIndex = 0;
|
||||
|
||||
if (this.state.currentImageIndex !== targetIndex) {
|
||||
if (this.state.images[targetIndex]) {
|
||||
this.setState({ currentImageIndex: targetIndex, isHovering: true });
|
||||
} else {
|
||||
this.setState({ isHovering: true });
|
||||
}
|
||||
} else if (!this.state.isHovering) {
|
||||
this.setState({ isHovering: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave = () => {
|
||||
if (this.state.isHovering) {
|
||||
this.setState({ isHovering: false }, () => {
|
||||
this.startRandomFading();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
loadImage = (bildId, index) => {
|
||||
console.log('loadImagevisSocket', bildId);
|
||||
window.socketManager.emit('getPic', { bildId, size: 'small' }, (res) => {
|
||||
if (res.success) {
|
||||
window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
|
||||
if (this._isMounted) {
|
||||
this.setState(prevState => {
|
||||
const newImages = [...prevState.images];
|
||||
newImages[index] = window.smallPicCache[bildId];
|
||||
return {
|
||||
images: newImages,
|
||||
loading: index === 0 ? false : prevState.loading
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.state.images[index] = window.smallPicCache[bildId];
|
||||
if (index === 0) this.state.loading = false;
|
||||
}
|
||||
} else {
|
||||
console.log('Fehler beim Laden des Bildes:', res);
|
||||
if (this._isMounted) {
|
||||
this.setState(prevState => ({
|
||||
error: index === 0 ? true : prevState.error,
|
||||
loading: index === 0 ? false : prevState.loading
|
||||
}));
|
||||
} else {
|
||||
if (index === 0) {
|
||||
this.state.error = true;
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
if (this.fadeTimeout) {
|
||||
clearTimeout(this.fadeTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
handleQuantityChange = (quantity) => {
|
||||
@@ -151,7 +250,7 @@ class Product extends Component {
|
||||
const {
|
||||
id, name, price, available, manufacturer, seoName,
|
||||
currency, vat, cGrundEinheit, fGrundPreis, thc,
|
||||
floweringWeeks,incoming, neu, weight, versandklasse, availableSupplier, komponenten
|
||||
floweringWeeks, incoming, neu, weight, versandklasse, availableSupplier, komponenten
|
||||
} = this.props;
|
||||
|
||||
const isNew = neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);
|
||||
@@ -171,10 +270,10 @@ class Product extends Component {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
width: { xs: '100%', sm: 'auto' }
|
||||
}}>
|
||||
@@ -191,9 +290,9 @@ class Product extends Component {
|
||||
}}
|
||||
>
|
||||
{/* Background star - slightly larger and rotated */}
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="56"
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="56"
|
||||
height="56"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@@ -202,17 +301,17 @@ class Product extends Component {
|
||||
transform: 'rotate(20deg)'
|
||||
}}
|
||||
>
|
||||
<polygon
|
||||
<polygon
|
||||
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
|
||||
fill="#20403a"
|
||||
fill="#20403a"
|
||||
stroke="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
{/* Middle star - medium size with different rotation */}
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="53"
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="53"
|
||||
height="53"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@@ -221,26 +320,26 @@ class Product extends Component {
|
||||
transform: 'rotate(-25deg)'
|
||||
}}
|
||||
>
|
||||
<polygon
|
||||
<polygon
|
||||
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
|
||||
fill="#40736b"
|
||||
fill="#40736b"
|
||||
stroke="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
{/* Foreground star - main star with text */}
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="50"
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
width="50"
|
||||
height="50"
|
||||
>
|
||||
<polygon
|
||||
<polygon
|
||||
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
|
||||
fill="#609688"
|
||||
fill="#609688"
|
||||
stroke="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
{/* Text as a separate element to position it at the top */}
|
||||
<div
|
||||
style={{
|
||||
@@ -259,9 +358,9 @@ class Product extends Component {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
width: { xs: '100vw', sm: '250px' },
|
||||
minWidth: { xs: '100vw', sm: '250px' },
|
||||
height: '100%',
|
||||
@@ -325,7 +424,7 @@ class Product extends Component {
|
||||
{floweringWeeks} {this.props.t ? this.props.t('product.weeks') : 'Wochen'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<Box
|
||||
onClick={this.handleProductClick}
|
||||
sx={{
|
||||
@@ -338,45 +437,59 @@ class Product extends Component {
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
height: { xs: '240px', sm: '180px' },
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#ffffff',
|
||||
borderTopLeftRadius: '8px',
|
||||
borderTopRightRadius: '8px'
|
||||
}}>
|
||||
<Box
|
||||
onMouseMove={this.handleMouseMove}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: { xs: '240px', sm: '180px' },
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#ffffff',
|
||||
borderTopLeftRadius: '8px',
|
||||
borderTopRightRadius: '8px'
|
||||
}}>
|
||||
{this.state.loading ? (
|
||||
<CircularProgress sx={{ color: '#90ffc0' }} />
|
||||
|
||||
) : this.state.image === null ? (
|
||||
<CardMedia
|
||||
component="img"
|
||||
height={ window.innerWidth < 600 ? "240" : "180" }
|
||||
image="/assets/images/nopicture.jpg"
|
||||
alt={name}
|
||||
fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
|
||||
loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
|
||||
onError={(e) => {
|
||||
// Ensure alt text is always present even on error
|
||||
if (!e.target.alt) {
|
||||
e.target.alt = name || 'Produktbild';
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
objectFit: 'contain',
|
||||
borderTopLeftRadius: '8px',
|
||||
borderTopRightRadius: '8px',
|
||||
width: '100%'
|
||||
}}
|
||||
/>
|
||||
) : this.state.images && this.state.images.length > 0 && this.state.images.some(img => img !== null) ? (
|
||||
this.state.images.map((imgSrc, index) => {
|
||||
if (!imgSrc) return null;
|
||||
return (
|
||||
<CardMedia
|
||||
key={index}
|
||||
component="img"
|
||||
height={window.innerWidth < 600 ? "240" : "180"}
|
||||
image={imgSrc}
|
||||
alt={name}
|
||||
fetchPriority={this.props.priority === 'high' && index === 0 ? 'high' : 'auto'}
|
||||
loading={this.props.priority === 'high' && index === 0 ? 'eager' : 'lazy'}
|
||||
onError={(e) => {
|
||||
// Ensure alt text is always present even on error
|
||||
if (!e.target.alt) {
|
||||
e.target.alt = name || 'Produktbild';
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
objectFit: 'contain',
|
||||
borderTopLeftRadius: '8px',
|
||||
borderTopRightRadius: '8px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
opacity: this.state.currentImageIndex === index ? 1 : 0,
|
||||
transition: this.state.isHovering ? 'opacity 0.2s ease-in-out' : 'opacity 1s ease-in-out'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<CardMedia
|
||||
component="img"
|
||||
height={ window.innerWidth < 600 ? "240" : "180" }
|
||||
image={this.state.image}
|
||||
height={window.innerWidth < 600 ? "240" : "180"}
|
||||
image="/assets/images/nopicture.jpg"
|
||||
alt={name}
|
||||
fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
|
||||
loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
|
||||
@@ -386,20 +499,24 @@ class Product extends Component {
|
||||
e.target.alt = name || 'Produktbild';
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
objectFit: 'contain',
|
||||
borderTopLeftRadius: '8px',
|
||||
sx={{
|
||||
objectFit: 'contain',
|
||||
borderTopLeftRadius: '8px',
|
||||
borderTopRightRadius: '8px',
|
||||
width: '100%'
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<CardContent sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
<CardContent sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'&.MuiCardContent-root:last-child': {
|
||||
paddingBottom: 0
|
||||
}
|
||||
@@ -420,14 +537,14 @@ class Product extends Component {
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="body2" color="text.secondary" style={{minHeight:'1.5em'}}>
|
||||
<Typography variant="body2" color="text.secondary" style={{ minHeight: '1.5em' }}>
|
||||
{manufacturer || ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<div style={{padding:'0px',margin:'0px'}}>
|
||||
|
||||
<div style={{ padding: '0px', margin: '0px' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="primary"
|
||||
@@ -458,24 +575,24 @@ class Product extends Component {
|
||||
{(() => {
|
||||
const rebatePct = this.props.rebate / 100;
|
||||
const originalPrice = Math.round((price / (1 - rebatePct)) * 10) / 10;
|
||||
return new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(originalPrice);
|
||||
return new Intl.NumberFormat('de-DE', { style: 'currency', currency: currency || 'EUR' }).format(originalPrice);
|
||||
})()}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ position: 'relative', zIndex: 2 }}>{new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(price)}</span>
|
||||
<span style={{ position: 'relative', zIndex: 2 }}>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: currency || 'EUR' }).format(price)}</span>
|
||||
</Box>
|
||||
<small style={{ color: '#77aa77', fontSize: '0.6em' }}>({this.props.t ? this.props.t('product.inclVatFooter', { vat }) : `incl. ${vat}% USt.,*`})</small>
|
||||
</Typography>
|
||||
</div>
|
||||
<div style={{ minHeight: '1.5em' }}>
|
||||
{cGrundEinheit && fGrundPreis && fGrundPreis != price && (<Typography variant="body2" color="text.secondary" sx={{ m: 0,p: 0 }}>
|
||||
({new Intl.NumberFormat('de-DE', {style: 'currency', currency: currency || 'EUR'}).format(fGrundPreis)}/{cGrundEinheit})
|
||||
</Typography> )}
|
||||
{cGrundEinheit && fGrundPreis && fGrundPreis != price && (<Typography variant="body2" color="text.secondary" sx={{ m: 0, p: 0 }}>
|
||||
({new Intl.NumberFormat('de-DE', { style: 'currency', currency: currency || 'EUR' }).format(fGrundPreis)}/{cGrundEinheit})
|
||||
</Typography>)}
|
||||
</div>
|
||||
{/*incoming*/}
|
||||
{/*incoming*/}
|
||||
</CardContent>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box sx={{ p: 2, pt: 0, display: 'flex', alignItems: 'center' }}>
|
||||
<IconButton
|
||||
component={Link}
|
||||
@@ -486,7 +603,7 @@ class Product extends Component {
|
||||
>
|
||||
<ZoomInIcon />
|
||||
</IconButton>
|
||||
<AddToCartButton cartButton={true} availableSupplier={availableSupplier} komponenten={komponenten} cGrundEinheit={cGrundEinheit} fGrundPreis={fGrundPreis} available={available} incoming={incoming} seoName={seoName} pictureList={this.props.pictureList} id={id} price={price} vat={vat} weight={weight} name={name} versandklasse={versandklasse}/>
|
||||
<AddToCartButton cartButton={true} availableSupplier={availableSupplier} komponenten={komponenten} cGrundEinheit={cGrundEinheit} fGrundPreis={fGrundPreis} available={available} incoming={incoming} seoName={seoName} pictureList={this.props.pictureList} id={id} price={price} vat={vat} weight={weight} name={name} versandklasse={versandklasse} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
@@ -8,8 +8,7 @@ import EmailIcon from "@mui/icons-material/Email";
|
||||
import LinkIcon from "@mui/icons-material/Link";
|
||||
import CodeIcon from "@mui/icons-material/Code";
|
||||
import { Link } from "react-router-dom";
|
||||
import parse from "html-react-parser";
|
||||
import sanitizeHtml from "sanitize-html";
|
||||
import LazySanitizedHtml from "../utils/LazySanitizedHtml.js";
|
||||
import AddToCartButton from "./AddToCartButton.js";
|
||||
import ProductImage from "./ProductImage.js";
|
||||
import Product from "./Product.js";
|
||||
@@ -1624,10 +1623,10 @@ class ProductDetailPage extends Component {
|
||||
"& strong": { fontWeight: 600 },
|
||||
}}
|
||||
>
|
||||
{product.description ? (() => {
|
||||
try {
|
||||
// Sanitize HTML to remove invalid tags, but preserve style attributes and <product> tags
|
||||
const sanitized = sanitizeHtml(product.description, {
|
||||
{product.description ? (
|
||||
<LazySanitizedHtml
|
||||
html={product.description}
|
||||
sanitizeOptions={(sanitizeHtml) => ({
|
||||
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'product']),
|
||||
allowedAttributes: {
|
||||
'*': ['class', 'style'],
|
||||
@@ -1636,26 +1635,20 @@ class ProductDetailPage extends Component {
|
||||
'product': ['articlenr']
|
||||
},
|
||||
disallowedTagsMode: 'discard'
|
||||
});
|
||||
|
||||
// Parse with custom replace function to handle <product> tags
|
||||
return parse(sanitized, {
|
||||
})}
|
||||
parseOptions={{
|
||||
replace: (domNode) => {
|
||||
if (domNode.type === 'tag' && domNode.name === 'product') {
|
||||
const articleNr = domNode.attribs && domNode.attribs['articlenr'];
|
||||
if (articleNr) {
|
||||
// Render embedded product component
|
||||
return this.renderEmbeddedProduct(articleNr);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse product description HTML:', error);
|
||||
// Fallback to rendering as plain text if HTML parsing fails
|
||||
return <span>{product.description}</span>;
|
||||
}
|
||||
})() : upgrading ? (
|
||||
}}
|
||||
fallback={<span>{product.description}</span>}
|
||||
/>
|
||||
) : upgrading ? (
|
||||
<Box sx={{ textAlign: "center", py: 2 }}>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{this.props.t ? this.props.t('product.loadingDescription') : 'Produktbeschreibung wird geladen...'}
|
||||
|
||||
Reference in New Issue
Block a user