1a5d43523a
P0-1: stock badge rendered the raw item.remainings value ('High',
etc) untranslated on every product card sitewide. Now maps to
catalog.stockHigh/Medium/Low/Out via the translate pipe; the 'out'
class check is now case-insensitive to match.
P0-2: favorite/share/quick-view action-button aria-labels rendered
literal 'catalog.favorite'/'catalog.share'/'catalog.quickView' keys
because they never existed in translations.ts/en.ts/ru.ts/hy.ts
(only catalog.compare existed, and it was likewise unused). Added
all 4 keys to the Translations interface and all 3 locales.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
77 lines
4.1 KiB
HTML
77 lines
4.1 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" />
|
|
@if (showDiscountBadge && item.discount > 0) {
|
|
<div class="discount-badge" [attr.aria-label]="'Discount ' + 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" [class.active]="isFavorite" (click)="onFavoritePlaceholder($event)">❤</button>
|
|
}
|
|
@if (showCompareControl()) {
|
|
<button type="button" class="product-action-btn" [attr.aria-label]="'catalog.compare' | translate" [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">{{ description }}</p>
|
|
}
|
|
|
|
@if (showRating) {
|
|
<div class="product-rating" [attr.aria-label]="'Rating ' + 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>
|