139 lines
5.1 KiB
HTML
139 lines
5.1 KiB
HTML
<section class="cart-copia" [style.background-color]="backgroundColor()">
|
|
<header class="cart-copia__header">
|
|
<h2 class="cart-copia__title">{{ title() }}</h2>
|
|
|
|
@if (showClose()) {
|
|
<button
|
|
class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__close-button"
|
|
type="button"
|
|
aria-label="Cerrar carrito"
|
|
(click)="closed.emit()"
|
|
>
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
}
|
|
</header>
|
|
|
|
<div class="cart-copia__body">
|
|
<div class="cart-copia__items">
|
|
@for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
|
|
<article class="cart-copia__item">
|
|
<div class="cart-copia__media">
|
|
@if (item.discountPercentage && item.discountPercentage > 0) {
|
|
<span class="cart-copia__discount-badge">-{{ item.discountPercentage }}%</span>
|
|
}
|
|
|
|
@if (item.imageUrl) {
|
|
<img [src]="item.imageUrl" [alt]="item.product" />
|
|
} @else {
|
|
<div class="cart-copia__media-placeholder" aria-hidden="true"></div>
|
|
}
|
|
</div>
|
|
|
|
<div class="cart-copia__content">
|
|
<div class="cart-copia__top-row">
|
|
<h3 class="cart-copia__product">{{ item.product }}</h3>
|
|
|
|
<div class="cart-copia__prices">
|
|
@if (item.originalPrice !== null) {
|
|
<span class="cart-copia__original-price">{{ formatCurrency(item.originalPrice) }}</span>
|
|
}
|
|
|
|
<span class="cart-copia__discounted-price">{{ formatCurrency(item.discountedPrice) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-copia__attributes">
|
|
@for (attribute of item.attributes; track attribute.label + attribute.value) {
|
|
<div class="cart-copia__attribute">
|
|
<span class="cart-copia__attribute-label">{{ attribute.label }}: </span>
|
|
<span class="cart-copia__attribute-value">{{ attribute.value }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="cart-copia__item-actions">
|
|
<div class="cart-copia__quantity-selector" aria-label="Selector de cantidad">
|
|
<button
|
|
class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--decrease"
|
|
type="button"
|
|
aria-label="Disminuir cantidad"
|
|
[disabled]="getItemQuantity(item) <= 1"
|
|
(click)="decreaseItemQuantity(idx)"
|
|
>
|
|
-
|
|
</button>
|
|
|
|
<span class="cart-copia__quantity-value">{{ getItemQuantity(item) }}</span>
|
|
|
|
<button
|
|
class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--increase"
|
|
type="button"
|
|
aria-label="Aumentar cantidad"
|
|
(click)="increaseItemQuantity(idx)"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__remove-button"
|
|
type="button"
|
|
aria-label="Eliminar producto"
|
|
(click)="onItemRemove(idx)"
|
|
>
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="cart-copia__footer">
|
|
<div class="cart-copia__summary-row">
|
|
<span class="cart-copia__summary-label">Subtotal:</span>
|
|
<span class="cart-copia__summary-value">{{ formattedSubtotal() }}</span>
|
|
</div>
|
|
|
|
<div class="cart-copia__summary-row">
|
|
<span class="cart-copia__summary-label">Descuento:</span>
|
|
<span class="cart-copia__summary-value">{{ formattedDiscount() }}</span>
|
|
</div>
|
|
|
|
<div class="cart-copia__divider"></div>
|
|
|
|
<div class="cart-copia__total-row">
|
|
<span class="cart-copia__total-label">TOTAL:</span>
|
|
<span class="cart-copia__total-value">{{ formattedTotal() }}</span>
|
|
</div>
|
|
|
|
@if (showActions()) {
|
|
<div class="row g-2 mt-4 cart-copia__footer-actions">
|
|
<div class="col-12 col-sm-6">
|
|
<app-button
|
|
variant="secondary"
|
|
hostClass="w-100"
|
|
buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
|
|
(click)="secondaryAction.emit()"
|
|
>
|
|
{{ secondaryActionLabel() }}
|
|
</app-button>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6">
|
|
<app-button
|
|
variant="primary"
|
|
hostClass="w-100"
|
|
buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
|
|
(click)="primaryAction.emit()"
|
|
>
|
|
{{ primaryActionLabel() }}
|
|
</app-button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</footer>
|
|
</section>
|