3e54e88db7
getMainImage() referenced /assets/images/placeholder.svg as the no-image fallback, but src/assets/images/ never existed - any item with zero photos rendered a browser broken-image icon instead of a placeholder. Added the asset. Also added an (error) handler (onImageError) on every dynamic <img> that renders a user/admin-supplied URL (product card, cart line item, cart payment QR code, product gallery main + thumbnails) so a 404'd/broken image URL swaps to the shared placeholder instead of shipping broken.
77 lines
4.3 KiB
HTML
77 lines
4.3 KiB
HTML
<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
|
|
<a [routerLink]="['/product', item.itemID] | langRoute" class="product-link" (click)="onSelected($event)">
|
|
<div class="product-image">
|
|
<img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" (error)="onImageError($event)" />
|
|
@if (showDiscountBadge && item.discount > 0) {
|
|
<div class="discount-badge" [attr.aria-label]="'common.discountLabel' | translate:{ value: item.discount }">-{{ item.discount }}%</div>
|
|
}
|
|
@if (showStock && item.remainings) {
|
|
<span class="stock-badge" [class.out]="item.remainings.toLowerCase() === 'out'">{{ stockLabelKey(item.remainings) | translate }}</span>
|
|
}
|
|
|
|
@if (showFavoriteControl() || showCompareControl() || showShareAction || showQuickViewPlaceholder) {
|
|
<div class="product-actions-overlay">
|
|
@if (showFavoriteControl()) {
|
|
<button type="button" class="product-action-btn product-action-favorite" [attr.aria-label]="'catalog.favorite' | translate" [attr.aria-pressed]="isFavorite" [class.active]="isFavorite" (click)="onFavoritePlaceholder($event)">❤</button>
|
|
}
|
|
@if (showCompareControl()) {
|
|
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.compare' | translate" [attr.aria-pressed]="isCompared" [class.active]="isCompared" (click)="onComparePlaceholder($event)">⇄</button>
|
|
}
|
|
@if (showShareAction) {
|
|
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.share' | translate" (click)="onShare($event)">↗</button>
|
|
}
|
|
@if (showQuickViewPlaceholder) {
|
|
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.quickView' | translate" (click)="onQuickViewPlaceholder($event)">○</button>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (item.badges && item.badges.length > 0) {
|
|
<div class="product-badges-overlay">
|
|
@for (badge of item.badges; track $index) {
|
|
<span class="product-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="product-details">
|
|
<h3 class="product-name">{{ title || item.name }}</h3>
|
|
|
|
@if (showDescription && description) {
|
|
<p class="product-description">{{ cleanDescription(description) }}</p>
|
|
}
|
|
|
|
@if (showRating) {
|
|
<div class="product-rating" [attr.aria-label]="'common.ratingLabel' | translate:{ value: item.rating }">
|
|
<span class="rating-stars">{{ item.rating | number:'1.1-1' }}</span>
|
|
<span class="rating-count">({{ item.callbacks?.length || item.comments?.length || 0 }})</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="product-price">
|
|
@if (item.discount > 0) {
|
|
<span class="original-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
|
|
<span class="discounted-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
|
|
} @else {
|
|
<span class="current-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
|
|
}
|
|
</div>
|
|
|
|
@if (showStock && item.remainings) {
|
|
<div class="product-stock" aria-hidden="true">
|
|
<div class="stock-bar">
|
|
<span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium' || item.remainings === 'low'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'" [class.low]="item.remainings === 'low'"></span>
|
|
<span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'"></span>
|
|
<span class="bar-segment" [class.filled]="item.remainings === 'high'" [class.high]="item.remainings === 'high'"></span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</a>
|
|
|
|
<button class="add-to-cart-btn" type="button" (click)="onAddToCart($event)" [attr.aria-label]="(addToCartLabel || ('catalog.addToCart' | translate)) + ': ' + (title || item.name)">
|
|
{{ addToCartLabel || ('catalog.addToCart' | translate) }}
|
|
</button>
|
|
</article>
|