sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support variant-aware cart lines

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/pages/cart/cart.component.html
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>

29
src/app/pages/cart/cart.component.ts
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;

41
src/app/services/cart.service.ts
View File

@@ -5,6 +5,8 @@ import { normalizeDeliveryOption, normalizeOptionalNumber } from '../utils/norma
import { environment } from '../../environments/environment';
import type { } from '../types/telegram.types';
type CartVariant = { colour?: string; size?: string; price?: number; currency?: string };
@Injectable({
providedIn: 'root'
})
@@ -187,16 +189,30 @@ export class CartService {
return false;
}
addItem(itemID: number, quantity: number = 1, variant?: { colour?: string; size?: string; price?: number; currency?: string }): void {
private normalizeVariantSize(size?: string): string {
return size && size.toLowerCase() !== 'default' ? size : '';
}
private isSameCartLine(item: CartItem, itemID: number, variant?: CartVariant): boolean {
return item.itemID === itemID
&& (item.colour ?? '') === (variant?.colour ?? '')
&& this.normalizeVariantSize(item.size) === this.normalizeVariantSize(variant?.size);
}
private findCartLineIndex(itemID: number, variant?: CartVariant): number {
return this.cartItems().findIndex(item => this.isSameCartLine(item, itemID, variant));
}
addItem(itemID: number, quantity: number = 1, variant?: CartVariant): void {
// Prevent duplicate API calls for same item
if (this.addingItems.has(itemID)) return;
const currentItems = this.cartItems();
const existingItem = currentItems.find(i => i.itemID === itemID);
const existingItem = currentItems.find(i => this.isSameCartLine(i, itemID, variant));
if (existingItem) {
// Item exists, increase quantity
this.updateQuantity(itemID, existingItem.quantity + quantity);
this.updateQuantity(itemID, existingItem.quantity + quantity, variant);
} else {
// Get item details from API and add to cart
this.addingItems.add(itemID);
@@ -226,15 +242,15 @@ export class CartService {
}
}
updateQuantity(itemID: number, quantity: number): void {
updateQuantity(itemID: number, quantity: number, variant?: CartVariant): void {
if (quantity <= 0) {
this.removeItem(itemID);
this.removeItem(itemID, variant);
return;
}
const currentItems = this.cartItems();
const updatedItems = currentItems.map(item =>
item.itemID === itemID ? { ...item, quantity } : item
this.isSameCartLine(item, itemID, variant) ? { ...item, quantity } : item
);
this.cartItems.set(updatedItems);
}
@@ -261,8 +277,19 @@ export class CartService {
this.cartItems.set(updatedItems);
}
removeItem(itemID: number): void {
removeItem(itemID: number, variant?: CartVariant): void {
if (!variant) {
this.removeItems([itemID]);
return;
}
const lineIndex = this.findCartLineIndex(itemID, variant);
if (lineIndex === -1) {
return;
}
const updatedItems = this.cartItems().filter((_item, index) => index !== lineIndex);
this.cartItems.set(updatedItems);
}
clearCart(): void {