85 lines
3.0 KiB
HTML
85 lines
3.0 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 p-3 justify-content-between bg-transparent cart-header">
|
|
<h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
|
|
|
|
<div class="d-flex align-items-center cart-header-actions">
|
|
@if (!readonly() && allowEditing() && items().length > 0) {
|
|
<button
|
|
class="btn btn-link p-0 border-0 cart-edit-btn"
|
|
type="button"
|
|
[attr.aria-pressed]="editing()"
|
|
[disabled]="editingDisabled()"
|
|
(click)="toggleEditing()"
|
|
>
|
|
{{ editing() ? 'Listo' : 'Modificar' }}
|
|
</button>
|
|
}
|
|
|
|
@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>
|
|
}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
|
|
@for (
|
|
item of items();
|
|
track item.cartItemId || item.product + item.discountedPrice;
|
|
let idx = $index
|
|
) {
|
|
<app-cart-item
|
|
[imageUrl]="item.imageUrl"
|
|
[product]="item.product"
|
|
[originalPrice]="item.originalPrice"
|
|
[discountedPrice]="item.discountedPrice"
|
|
[discountPercentage]="item.discountPercentage"
|
|
[attributes]="item.attributes"
|
|
[variants]="item.variants ?? []"
|
|
[selectedVariant]="getItemVariant(item)"
|
|
[quantity]="getItemQuantity(item)"
|
|
[readonly]="readonly()"
|
|
[quantityDisabled]="editingDisabled() || (allowEditing() && !editing())"
|
|
[showRemove]="allowRemove()"
|
|
(quantityChange)="onItemQuantityChange(idx, $event)"
|
|
(variantChange)="onItemVariantChange(idx, $event)"
|
|
(remove)="onItemRemove(idx)"
|
|
/>
|
|
} @empty {
|
|
<p class="cart-empty-message" role="status">El carrito está vacío</p>
|
|
}
|
|
</div>
|
|
|
|
@if (items().length > 0) {
|
|
<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>
|
|
|
|
<div class="cart-actions mt-3">
|
|
<ng-content />
|
|
</div>
|
|
</footer>
|
|
}
|
|
</section>
|