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

feat: refactor cart item and cart components for improved layout and styling

Browse Source
This commit is contained in:
ncoronel
2026-07-02 08:42:35 -03:00
parent 06d29be056
commit 8471505e6f
4 changed files with 187 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,47 @@
<article class="cart-item">
<div class="cart-item__media">
<article class="w-100 rounded-0 cart-item">
<div class="position-relative overflow-hidden cart-item-media">
@if (discountPercentage() && discountPercentage()! > 0) {
<span class="cart-item__discount-badge">-{{ discountPercentage() }}%</span>
<span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
}
@if (imageUrl()) {
<img class="cart-item__image" [src]="imageUrl()" [alt]="product()" />
<img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
} @else {
<div class="cart-item__image cart-item__image--placeholder" aria-hidden="true"></div>
<div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
}
</div>
<div class="cart-item__content">
<div class="cart-item__top-row">
<h3 class="cart-item__product">{{ product() }}</h3>
<div class="d-grid min-w-0 cart-item-content">
<div class="d-grid align-items-start cart-item-top-row">
<h3 class="m-0 text-uppercase fw-normal cart-item-product">{{ product() }}</h3>
<div class="cart-item__prices">
<div class="text-nowrap cart-item-prices">
@if (formattedOriginalPrice(); as originalPrice) {
<span class="cart-item__price cart-item__price--original">{{ originalPrice }}</span>
<span class="text-decoration-line-through fw-light cart-item-original-price">{{ originalPrice }}</span>
}
<span class="cart-item__price cart-item__price--discounted">{{ formattedDiscountedPrice() }}</span>
<span class="fw-normal cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
</div>
</div>
<div class="cart-item__attributes">
<div class="d-grid cart-item-attributes">
@for (attribute of attributes(); track attribute.label + attribute.value) {
<div class="cart-item__attribute">
<span class="cart-item__attribute-label">{{ attribute.label }}:</span>
<span class="cart-item__attribute-value">{{ attribute.value }}</span>
<div class="cart-item-attribute">
<span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
<span class="fw-bold">{{ attribute.value }}</span>
</div>
}
</div>
<div class="cart-item__actions" aria-hidden="true">
<button class="cart-item__quantity-control" type="button">-</button>
<span class="cart-item__quantity">{{ quantity() }}</span>
<button class="cart-item__quantity-control" type="button">+</button>
<button class="cart-item__remove" type="button">
<i class="fa-solid fa-trash-can"></i>
<div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions" aria-hidden="true">
<button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">-</button>
<span class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-value" >{{ quantity() }}</span>
<button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">+</button>
<button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button">
<i class="fa-solid fa-trash"></i>
</button>
</div>
</div>
</article>