Support variant-aware cart lines

This commit is contained in:
sdarbinyan
2026-07-05 01:12:07 +04:00
parent 3f5aa2af2a
commit 01d2b26021
3 changed files with 58 additions and 22 deletions

View File

@@ -37,7 +37,7 @@
<div class="item-info">
<div class="item-header">
<a [routerLink]="['/item', item.itemID] | langRoute" class="item-name">{{ itemName(item) }}</a>
<button class="remove-btn" (click)="removeItem(item.itemID)" title="Remove">
<button class="remove-btn" (click)="removeItem(item)" title="Remove">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
@@ -81,13 +81,13 @@
</div>
<div class="quantity-controls">
<button class="qty-btn" (click)="decreaseQuantity(item.itemID, item.quantity)" [disabled]="item.quantity <= 1">
<button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12h14"/>
</svg>
</button>
<span class="qty-value">{{ item.quantity }}</span>
<button class="qty-btn" (click)="increaseQuantity(item.itemID, item.quantity)">
<button class="qty-btn" (click)="increaseQuantity(item)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 5v14M5 12h14"/>
</svg>
@@ -104,7 +104,7 @@
</div>
</div>
<button class="delete-btn-mobile" (click)="removeItem(item.itemID)">
<button class="delete-btn-mobile" (click)="removeItem(item)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>

View File

@@ -102,27 +102,36 @@ export class CartComponent implements OnDestroy {
}
}
removeItem(itemID: number): void {
this.cartService.removeItem(itemID);
removeItem(item: CartItem): void {
this.cartService.removeItem(item.itemID, this.cartVariant(item));
this.swipedItemId.set(null);
}
updateQuantity(itemID: number, quantity: number): void {
this.cartService.updateQuantity(itemID, quantity);
updateQuantity(item: CartItem, quantity: number): void {
this.cartService.updateQuantity(item.itemID, quantity, this.cartVariant(item));
}
increaseQuantity(itemID: number, currentQuantity: number): void {
this.updateQuantity(itemID, currentQuantity + 1);
increaseQuantity(item: CartItem): void {
this.updateQuantity(item, item.quantity + 1);
}
decreaseQuantity(itemID: number, currentQuantity: number): void {
if (currentQuantity <= 1) {
this.removeItem(itemID);
decreaseQuantity(item: CartItem): void {
if (item.quantity <= 1) {
this.removeItem(item);
} else {
this.updateQuantity(itemID, currentQuantity - 1);
this.updateQuantity(item, item.quantity - 1);
}
}
private cartVariant(item: CartItem): { colour?: string; size?: string; price?: number; currency?: string } {
return {
colour: item.colour,
size: item.size,
price: item.price,
currency: item.currency,
};
}
onSwipeStart(itemID: number, event: TouchEvent): void {
const startX = event.touches[0].clientX;