46 lines
1.6 KiB
HTML
46 lines
1.6 KiB
HTML
<article class="cart-item">
|
|
<div class="cart-item__media">
|
|
@if (discountPercentage() && discountPercentage()! > 0) {
|
|
<span class="cart-item__discount-badge">-{{ discountPercentage() }}%</span>
|
|
}
|
|
|
|
@if (imageUrl()) {
|
|
<img class="cart-item__image" [src]="imageUrl()" [alt]="product()" />
|
|
} @else {
|
|
<div class="cart-item__image cart-item__image--placeholder" aria-hidden="true"></div>
|
|
}
|
|
</div>
|
|
|
|
<div class="cart-item__content">
|
|
<div class="cart-item__top-row">
|
|
<h3 class="cart-item__product">{{ product() }}</h3>
|
|
|
|
<div class="cart-item__prices">
|
|
@if (formattedOriginalPrice(); as originalPrice) {
|
|
<span class="cart-item__price cart-item__price--original">{{ originalPrice }}</span>
|
|
}
|
|
|
|
<span class="cart-item__price cart-item__price--discounted">{{ formattedDiscountedPrice() }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-item__attributes">
|
|
@for (attribute of attributes(); track attribute.label + attribute.value) {
|
|
<div class="cart-item__attribute">
|
|
<span class="cart-item__attribute-label">{{ attribute.label }}:</span>
|
|
<span class="cart-item__attribute-value">{{ attribute.value }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="cart-item__actions" aria-hidden="true">
|
|
<button class="cart-item__quantity-control" type="button">-</button>
|
|
<span class="cart-item__quantity">{{ quantity() }}</span>
|
|
<button class="cart-item__quantity-control" type="button">+</button>
|
|
<button class="cart-item__remove" type="button">
|
|
<i class="fa-solid fa-trash-can"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|