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

feat: integrate quantity selector component into cart and product detail pages for enhanced functionality

Browse Source
This commit is contained in:
ncoronel
2026-07-02 09:01:30 -03:00
parent 394a1dde0d
commit 202205c038
8 changed files with 66 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/features/store/pages/product-detail-page/product-detail-page.component.html
View File

@@ -54,11 +54,8 @@
<section class="product-detail__section">
<div class="product-detail__purchase">
<app-quantity-selector
[quantity]="quantity()"
[(quantity)]="quantity"
[max]="selectedVariant()?.stock ?? 1"
(increase)="increaseQuantity()"
(decrease)="decreaseQuantity()"
(quantityChange)="quantity.set($event)"
/>
<div class="product-detail__actions">

7
src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
View File

@@ -215,14 +215,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
}
}
protected increaseQuantity(): void {
const currentStock = this.selectedVariant()?.stock ?? 1;
this.quantity.update((current) => current < currentStock ? current + 1 : current);
}
protected decreaseQuantity(): void {
this.quantity.update((current) => Math.max(1, current - 1));
}
protected addToCart(): void {
const variant = this.selectedVariant();

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

@@ -33,11 +33,15 @@
}
</div>
<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">
<div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions">
<app-quantity-selector
size="small"
[quantity]="quantity()"
(quantityChange)="onQuantityChange($event)"
(increase)="onIncrease()"
(decrease)="onDecrease()"
/>
<button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button" (click)="onRemove()">
<i class="fa-solid fa-trash"></i>
</button>
</div>

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

@@ -92,19 +92,8 @@
gap: 0.125rem;
}
.cart-item-qty-btn,
.cart-item-qty-value {
width: 18px;
height: 18px;
border-color: #cfcfcf !important;
color: #666666;
font-size: 10px;
line-height: 1;
}
.cart-item-qty-btn {
padding: 0;
}
.cart-item-remove-btn {
width: 18px;

25
src/app/shared/components/cart-item/cart-item.component.ts
View File

@@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
export interface CartItemAttribute {
label: string;
@@ -8,6 +9,7 @@ export interface CartItemAttribute {
@Component({
selector: 'app-cart-item',
standalone: true,
imports: [QuantitySelectorComponent],
templateUrl: './cart-item.component.html',
styleUrl: './cart-item.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
@@ -21,6 +23,27 @@ export class CartItemComponent {
readonly attributes = input<CartItemAttribute[]>([]);
readonly quantity = input<number>(1);
readonly quantityChange = output<number>();
readonly remove = output<void>();
readonly increase = output<void>();
readonly decrease = output<void>();
protected onQuantityChange(newQuantity: number): void {
this.quantityChange.emit(newQuantity);
}
protected onRemove(): void {
this.remove.emit();
}
protected onIncrease(): void {
this.increase.emit();
}
protected onDecrease(): void {
this.decrease.emit();
}
protected readonly formattedOriginalPrice = computed(() => {
const price = this.originalPrice();
return price === null ? null : this.formatCurrency(price);

2
src/app/shared/components/quantity-selector/quantity-selector.component.html
View File

@@ -1,4 +1,4 @@
<div class="quantity-selector" aria-label="Selector de cantidad">
<div class="quantity-selector" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
<button
type="button"
class="quantity-selector__button"

25
src/app/shared/components/quantity-selector/quantity-selector.component.scss
View File

@@ -44,4 +44,29 @@
color: #6f6f6f;
user-select: none;
}
&--small {
min-height: 18px;
border-radius: 0px;
border: 1px solid #cfcfcf;
background: #ffffff;
.quantity-selector__button {
width: 18px;
height: 18px;
font-size: 10px;
background: #ffffff;
color: #666666;
&:not(:disabled):hover {
background-color: #f0f0f0;
}
}
.quantity-selector__value {
min-width: 18px;
font-size: 10px;
color: #666666;
}
}
}

12
src/app/shared/components/quantity-selector/quantity-selector.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
@Component({
selector: 'app-quantity-selector',
@@ -9,27 +9,25 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
changeDetection: ChangeDetectionStrategy.OnPush
})
export class QuantitySelectorComponent {
readonly quantity = input<number>(1);
readonly quantity = model<number>(1);
readonly min = input<number>(1);
readonly max = input<number>(100);
readonly size = input<'small' | 'medium'>('medium');
readonly increase = output<void>();
readonly decrease = output<void>();
readonly quantityChange = output<number>();
protected onDecrease(): void {
if (this.quantity() > this.min()) {
const newValue = this.quantity() - 1;
this.quantity.set(this.quantity() - 1);
this.decrease.emit();
this.quantityChange.emit(newValue);
}
}
protected onIncrease(): void {
if (this.quantity() < this.max()) {
const newValue = this.quantity() + 1;
this.quantity.set(this.quantity() + 1);
this.increase.emit();
this.quantityChange.emit(newValue);
}
}
}