tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cart): implement add to cart functionality and display empty cart message

Browse Source
This commit is contained in:
ncoronel
2026-07-20 17:11:06 -03:00
parent 98e899c5bf
commit dafaa85480
8 changed files with 142 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/shared/components/cart/cart.component.html
View File

@@ -34,27 +34,31 @@
(quantityChange)="onItemQuantityChange(idx, $event)"
(remove)="onItemRemove(idx)"
/>
} @empty {
<p class="cart-empty-message" role="status">El carrito está vacío</p>
}
</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>
@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">
<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="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>
<div class="cart-actions mt-3">
<ng-content />
</div>
</footer>
}
</section>