45 lines
1.8 KiB
HTML
45 lines
1.8 KiB
HTML
<section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
|
|
<header class="d-flex align-items-center justify-content-between bg-transparent cart-header">
|
|
<h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
|
|
|
|
@if (showClose()) {
|
|
<button class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-close-btn" type="button" aria-label="Cerrar carrito" (click)="closed.emit()">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
}
|
|
</header>
|
|
|
|
<div class="d-grid gap-2 flex-grow-1 overflow-y-auto cart-items-container">
|
|
@for (item of items(); track item.product + item.discountedPrice) {
|
|
<app-cart-item
|
|
[imageUrl]="item.imageUrl"
|
|
[product]="item.product"
|
|
[originalPrice]="item.originalPrice"
|
|
[discountedPrice]="item.discountedPrice"
|
|
[discountPercentage]="item.discountPercentage"
|
|
[attributes]="item.attributes"
|
|
[quantity]="item.quantity"
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
<footer class="d-grid gap-1 bg-transparent cart-footer">
|
|
<div class="d-flex align-items-baseline justify-content-between gap-3">
|
|
<span class="cart-summary-text-muted">Subtotal:</span>
|
|
<span class="cart-summary-text-muted-bold">{{ formattedSubtotal() }}</span>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-baseline justify-content-between gap-3">
|
|
<span class="cart-summary-text-muted">Descuento:</span>
|
|
<span class="cart-summary-text-muted-bold">{{ formattedDiscount() }}</span>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-baseline justify-content-between gap-3 mt-1">
|
|
<span class="cart-total-text">TOTAL:</span>
|
|
<span class="cart-total-text">{{ formattedTotal() }}</span>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
|