product grid creating
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
|
||||
<a [routerLink]="['/item', item.itemID] | langRoute" class="product-link">
|
||||
<a [routerLink]="['/item', 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 (item.discount > 0) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { Item } from '../../models';
|
||||
import { Product } from '../../core/products/models/product-domain.model';
|
||||
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
|
||||
import { getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';
|
||||
|
||||
@@ -16,7 +16,7 @@ export type ProductCardAppearance = 'standard' | 'compact';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ProductCardComponent {
|
||||
@Input({ required: true }) item!: Item;
|
||||
@Input({ required: true }) item!: Product;
|
||||
@Input() title = '';
|
||||
@Input() description = '';
|
||||
@Input() addToCartLabel = 'Add to cart';
|
||||
@@ -27,6 +27,7 @@ export class ProductCardComponent {
|
||||
|
||||
@Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
|
||||
@Output() preview = new EventEmitter<number>();
|
||||
@Output() selected = new EventEmitter<{ itemID: number; event: Event }>();
|
||||
|
||||
readonly getMainImage = getMainImage;
|
||||
readonly getDiscountedPrice = getDiscountedPrice;
|
||||
@@ -35,4 +36,8 @@ export class ProductCardComponent {
|
||||
onAddToCart(event: Event): void {
|
||||
this.addToCart.emit({ itemID: this.item.itemID, event });
|
||||
}
|
||||
|
||||
onSelected(event: Event): void {
|
||||
this.selected.emit({ itemID: this.item.itemID, event });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user