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

feat: implement cart icon component with quantity badge and integrate into store header for improved UI

Browse Source
This commit is contained in:
ncoronel
2026-07-02 09:27:01 -03:00
parent 8a6ed763df
commit 16eea32ce7
12 changed files with 266 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -114,6 +114,42 @@
</div>
</div>
<div class="icon-button-showcase mt-4">
<h2>Cart Icons</h2>
<p class="text-muted mb-4">
Icono de carrito con badge opcional indicando cantidad.
</p>
<div class="icon-button-showcase__grid">
<!-- Disabled Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Disabled</span>
<div class="icon-button-showcase__items">
<app-cart-icon [disabled]="true" [quantity]="3" />
<app-cart-icon [disabled]="true" />
</div>
</div>
<!-- Normal Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Normal</span>
<div class="icon-button-showcase__items">
<app-cart-icon [quantity]="3" />
<app-cart-icon />
</div>
</div>
<!-- Hover/Active Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Active / Hover</span>
<div class="icon-button-showcase__items">
<app-cart-icon [quantity]="3" class="hover-preview" />
<app-cart-icon class="hover-preview" />
</div>
</div>
</div>
</div>
<div class="input-grid">
<div class="input-field">
<label for="search-input">Texto</label>

4
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
View File

@@ -6,6 +6,7 @@ import { PaginatorComponent } from '../../../../shared/components/paginator/pagi
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
import { TenantService } from '../../../../core/services/tenant.service';
import { ToastService } from '../../../../core/services/toast.service';
@@ -18,7 +19,8 @@ import { ToastService } from '../../../../core/services/toast.service';
PaginatorComponent,
ProductCardComponent,
StoreSectionComponent,
IconButtonComponent
IconButtonComponent,
CartIconComponent
],
templateUrl: './reutilizables-test-page.component.html',
styleUrl: './reutilizables-test-page.component.scss'