Add reusable marketplace product card
This commit is contained in:
sdarbinyan
55
src/app/components/product-card/product-card.component.html
Normal file
55
src/app/components/product-card/product-card.component.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
|
||||
<a [routerLink]="['/item', item.itemID] | langRoute" class="product-link">
|
||||
<div class="product-image">
|
||||
<img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
|
||||
@if (item.discount > 0) {
|
||||
<div class="discount-badge">-{{ item.discount }}%</div>
|
||||
}
|
||||
@if (item.badges && item.badges.length > 0) {
|
||||
<div class="product-badges-overlay">
|
||||
@for (badge of item.badges; track badge) {
|
||||
<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 + ': ' + (title || item.name)">
|
||||
{{ addToCartLabel }}
|
||||
</button>
|
||||
</article>
|
||||
219
src/app/components/product-card/product-card.component.scss
Normal file
219
src/app/components/product-card/product-card.component.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
.product-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
.product-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
border: 1px solid #d3dad9;
|
||||
border-radius: 13px 13px 0 0;
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
padding: 12px;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-badges-overlay {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
background: #497671;
|
||||
color: #fff;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
width: 100%;
|
||||
border: 1px solid #d3dad9;
|
||||
border-top: none;
|
||||
border-radius: 0 0 13px 13px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
background: #f5f3f9;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-weight: 700;
|
||||
font-size: clamp(14px, 1.4vw, 18px);
|
||||
color: #1e3c38;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: calc(2 * 1.3em);
|
||||
}
|
||||
|
||||
.product-description {
|
||||
margin: 0;
|
||||
color: #697777;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: #697777;
|
||||
|
||||
.rating-stars {
|
||||
color: #b45309;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
text-decoration: line-through;
|
||||
color: #a1b4b5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.discounted-price,
|
||||
.current-price {
|
||||
color: #1e3c38;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.product-stock {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.stock-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.bar-segment {
|
||||
flex: 1;
|
||||
border-radius: 999px;
|
||||
background: #d3dad9;
|
||||
|
||||
&.filled.high {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
&.filled.medium {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
&.filled.low {
|
||||
background: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-cart-btn {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
min-height: 42px;
|
||||
border: 0;
|
||||
border-radius: 13px;
|
||||
background: #497671;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #3d635f;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid rgba(73, 118, 113, 0.25);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-compact {
|
||||
.product-details {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.product-description,
|
||||
.product-stock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
38
src/app/components/product-card/product-card.component.ts
Normal file
38
src/app/components/product-card/product-card.component.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { Item } from '../../models';
|
||||
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
|
||||
import { getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';
|
||||
|
||||
export type ProductCardAppearance = 'standard' | 'compact';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-card',
|
||||
standalone: true,
|
||||
imports: [DecimalPipe, RouterLink, LangRoutePipe],
|
||||
templateUrl: './product-card.component.html',
|
||||
styleUrls: ['./product-card.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ProductCardComponent {
|
||||
@Input({ required: true }) item!: Item;
|
||||
@Input() title = '';
|
||||
@Input() description = '';
|
||||
@Input() addToCartLabel = 'Add to cart';
|
||||
@Input() appearance: ProductCardAppearance = 'standard';
|
||||
@Input() showDescription = false;
|
||||
@Input() showStock = true;
|
||||
@Input() showRating = true;
|
||||
|
||||
@Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
|
||||
@Output() preview = new EventEmitter<number>();
|
||||
|
||||
readonly getMainImage = getMainImage;
|
||||
readonly getDiscountedPrice = getDiscountedPrice;
|
||||
readonly getBadgeClass = getBadgeClass;
|
||||
|
||||
onAddToCart(event: Event): void {
|
||||
this.addToCart.emit({ itemID: this.item.itemID, event });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user