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

21
src/app/shared/components/cart-item/cart-item.component.html
View File

@@ -1,15 +1,16 @@
<article class="w-100 p-3 rounded-0 cart-item">
<div class="position-relative overflow-hidden cart-item-media">
@if (discountPercentage() && discountPercentage()! > 0) {
<span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
}
<article
class="w-100 p-3 rounded-0 cart-item"
[class.cart-item-with-media]="imageUrl()"
>
@if (imageUrl()) {
<div class="position-relative overflow-hidden cart-item-media">
@if (discountPercentage() && discountPercentage()! > 0) {
<span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
}
@if (imageUrl()) {
<img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
} @else {
<div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
}
</div>
</div>
}
<div class="d-grid min-w-0 cart-item-content">
<div class="d-grid align-items-start cart-item-top-row">

12
src/app/shared/components/cart-item/cart-item.component.scss
View File

@@ -29,11 +29,15 @@
.cart-item {
display: grid;
grid-template-columns: var(--item-media-size) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
background-color: #f5f5f5;
}
.cart-item-with-media {
grid-template-columns: var(--item-media-size) minmax(0, 1fr);
}
.cart-item-media {
width: var(--item-media-size);
aspect-ratio: 1 / 1;
@@ -63,12 +67,6 @@
line-height: 1;
}
.cart-item-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #d2d2d2, #ececec);
}
.cart-item-content {
gap: 0.5rem;
}