From c3e4e695ebe4ef95908fe7fa02d0745d8a302be2 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Fri, 6 Mar 2026 17:45:34 +0400 Subject: [PATCH] changes and optimisations --- src/app/pages/cart/cart.component.ts | 6 +- src/app/pages/home/home.component.ts | 17 ++- .../item-detail/item-detail.component.html | 100 +++++++++--------- .../item-detail/item-detail.component.scss | 10 +- .../item-detail/item-detail.component.ts | 11 +- src/app/pages/search/search.component.ts | 2 +- src/app/pipes/lang-route.pipe.ts | 23 ++-- src/app/services/cart.service.ts | 9 +- src/app/services/seo.service.ts | 20 +++- 9 files changed, 129 insertions(+), 69 deletions(-) diff --git a/src/app/pages/cart/cart.component.ts b/src/app/pages/cart/cart.component.ts index df11865..745a5a5 100644 --- a/src/app/pages/cart/cart.component.ts +++ b/src/app/pages/cart/cart.component.ts @@ -167,7 +167,7 @@ export class CartComponent implements OnDestroy { const paymentData = { amount: this.totalPrice(), - currency: 'RUB', + currency: this.items()[0]?.currency || 'RUB', siteuserID: userId, siteorderID: orderId, redirectUrl: '', @@ -193,6 +193,7 @@ export class CartComponent implements OnDestroy { error: (err) => { console.error('Error creating payment:', err); this.paymentStatus.set('timeout'); + if (this.closeTimeout) clearTimeout(this.closeTimeout); this.closeTimeout = setTimeout(() => { this.closePaymentPopup(); }, 4000); @@ -201,6 +202,7 @@ export class CartComponent implements OnDestroy { } startPolling(): void { + this.stopPolling(); this.pollingSubscription = interval(5000) // every 5 seconds .pipe( take(this.maxChecks), // maximum 36 checks (3 minutes) @@ -225,6 +227,7 @@ export class CartComponent implements OnDestroy { if (this.paymentStatus() === 'waiting') { this.paymentStatus.set('timeout'); // Close popup after showing timeout message + if (this.closeTimeout) clearTimeout(this.closeTimeout); this.closeTimeout = setTimeout(() => { this.closePaymentPopup(); }, 3000); @@ -233,6 +236,7 @@ export class CartComponent implements OnDestroy { error: (err) => { console.error('Error checking payment status:', err); // Continue checking even on error until time runs out + if (this.closeTimeout) clearTimeout(this.closeTimeout); this.closeTimeout = setTimeout(() => { this.closePaymentPopup(); }, 3000); diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index c931d09..8cd5b40 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, OnDestroy, signal, computed, ChangeDetectionStrategy } from '@angular/core'; import { Router, RouterLink } from '@angular/router'; import { ApiService, LanguageService } from '../../services'; import { Category } from '../../models'; @@ -14,7 +14,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe'; styleUrls: ['./home.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class HomeComponent implements OnInit { +export class HomeComponent implements OnInit, OnDestroy { brandName = environment.brandFullName; isnovo = environment.theme === 'novo'; categories = signal([]); @@ -56,6 +56,14 @@ export class HomeComponent implements OnInit { this.loadCategories(); } + ngOnDestroy(): void { + this.pendingImages.forEach(img => { + img.onload = null; + img.onerror = null; + }); + this.pendingImages.clear(); + } + loadCategories(): void { this.loading.set(true); this.apiService.getCategories().subscribe({ @@ -84,13 +92,17 @@ export class HomeComponent implements OnInit { return this.wideCategories().has(categoryID); } + private pendingImages = new Set(); + private detectWideImages(categories: Category[]): void { const topLevel = categories.filter(c => c.parentID === 0); topLevel.forEach(cat => { if (!cat.wideBanner) return; const img = new Image(); + this.pendingImages.add(img); img.onload = () => { + this.pendingImages.delete(img); const ratio = img.naturalWidth / img.naturalHeight; if (ratio > 2) { this.wideCategories.update(set => { @@ -100,6 +112,7 @@ export class HomeComponent implements OnInit { }); } }; + img.onerror = () => this.pendingImages.delete(img); img.src = cat.wideBanner; }); } diff --git a/src/app/pages/item-detail/item-detail.component.html b/src/app/pages/item-detail/item-detail.component.html index a66bacc..1a94c01 100644 --- a/src/app/pages/item-detail/item-detail.component.html +++ b/src/app/pages/item-detail/item-detail.component.html @@ -15,21 +15,22 @@ } - @if (item() && !loading()) { + @if (item(); as item) { + @if (!loading()) {
- @if (item()?.photos && item()!.photos!.length > 0) { + @if (item.photos && item.photos.length > 0) {
- @if (item()!.photos![selectedPhotoIndex()]?.video) { - + @if (item.photos[selectedPhotoIndex()]?.video) { + } @else { - + }
- @if (item()!.photos!.length > 1) { + @if (item.photos.length > 1) {
- @for (photo of item()!.photos!; track $index) { + @for (photo of item.photos; track $index) {
-

{{ item()!.name }}

+

{{ item.name }}

- {{ getRatingStars(item()!.rating) }} - {{ item()!.rating }} - ({{ item()!.callbacks?.length || 0 }}) + {{ getRatingStars(item.rating) }} + {{ item.rating }} + ({{ item.callbacks?.length || 0 }})
- @if (item()!.discount > 0) { + @if (item.discount > 0) {
- {{ item()!.price }} {{ item()!.currency }} - -{{ item()!.discount }}% + {{ item.price }} {{ item.currency }} + -{{ item.discount }}%
-
{{ getDiscountedPrice() | number:'1.2-2' }} {{ item()!.currency }}
+
{{ getDiscountedPrice() | number:'1.2-2' }} {{ item.currency }}
} @else { -
{{ item()!.price }} {{ item()!.currency }}
+
{{ item.price }} {{ item.currency }}
}
{{ 'itemDetail.stock' | translate }} -
+
- {{ item()!.remainings === 'high' ? ('itemDetail.inStock' | translate) : item()!.remainings === 'medium' ? ('itemDetail.mediumStock' | translate) : ('itemDetail.lowStock' | translate) }} + {{ item.remainings === 'high' ? ('itemDetail.inStock' | translate) : item.remainings === 'medium' ? ('itemDetail.mediumStock' | translate) : ('itemDetail.lowStock' | translate) }}
@@ -94,13 +95,13 @@

{{ 'itemDetail.description' | translate }}

-
+
-

{{ 'itemDetail.reviews' | translate }} ({{ item()!.callbacks?.length || 0 }})

+

{{ 'itemDetail.reviews' | translate }} ({{ item.callbacks?.length || 0 }})

@@ -169,8 +170,8 @@
- @if (item()!.callbacks && item()!.callbacks!.length > 0) { - @for (review of item()!.callbacks!; track review.userID) { + @if (item.callbacks && item.callbacks.length > 0) { + @for (review of item.callbacks; track $index) {
@@ -189,6 +190,7 @@ }
+ } }
} @else { @@ -208,13 +210,14 @@
} - @if (item() && !loading()) { + @if (item(); as item) { + @if (!loading()) {
- @if (item()?.photos && item()!.photos!.length > 0) { + @if (item.photos && item.photos.length > 0) {
- @for (photo of item()!.photos!; track $index) { + @for (photo of item.photos; track $index) {
}
- @if (item()?.photos && item()!.photos!.length > 0) { - @if (item()!.photos![selectedPhotoIndex()]?.video) { - + @if (item.photos && item.photos.length > 0) { + @if (item.photos[selectedPhotoIndex()]?.video) { + } @else { - + } } @else {
@@ -249,40 +252,40 @@
-

{{ item()!.name }}

+

{{ item.name }}

@for (star of [1, 2, 3, 4, 5]; track star) { - + }
- {{ item()!.rating }} - ({{ item()!.callbacks?.length || 0 }} {{ 'itemDetail.reviewsCount' | translate }}) + {{ item.rating }} + ({{ item.callbacks?.length || 0 }} {{ 'itemDetail.reviewsCount' | translate }})
- @if (item()!.discount > 0) { + @if (item.discount > 0) {
- {{ item()!.price }} {{ item()!.currency }} - -{{ item()!.discount }}% + {{ item.price }} {{ item.currency }} + -{{ item.discount }}%
}
- {{ item()!.discount > 0 ? (getDiscountedPrice() | number:'1.2-2') : item()!.price }} {{ item()!.currency }} + {{ item.discount > 0 ? (getDiscountedPrice() | number:'1.2-2') : item.price }} {{ item.currency }}
{{ 'itemDetail.stock' | translate }} + [class.high]="item.remainings === 'high'" + [class.medium]="item.remainings === 'medium'" + [class.low]="item.remainings === 'low'"> - {{ item()!.remainings === 'high' ? ('itemDetail.inStock' | translate) : item()!.remainings === 'medium' ? ('itemDetail.mediumStock' | translate) : ('itemDetail.lastItems' | translate) }} + {{ item.remainings === 'high' ? ('itemDetail.inStock' | translate) : item.remainings === 'medium' ? ('itemDetail.mediumStock' | translate) : ('itemDetail.lastItems' | translate) }}
@@ -297,14 +300,14 @@

{{ 'itemDetail.description' | translate }}

-
+
-

{{ 'itemDetail.reviews' | translate }} ({{ item()!.callbacks?.length || 0 }})

+

{{ 'itemDetail.reviews' | translate }} ({{ item.callbacks?.length || 0 }})

{{ 'itemDetail.leaveReview' | translate }}

@@ -365,8 +368,8 @@
- @if (item()?.callbacks && item()!.callbacks!.length > 0) { - @for (callback of item()!.callbacks; track $index) { + @if (item.callbacks && item.callbacks.length > 0) { + @for (callback of item.callbacks; track $index) {
@@ -397,11 +400,11 @@
- @if (item()!.questions && item()!.questions!.length > 0) { + @if (item.questions && item.questions.length > 0) {
-

{{ 'itemDetail.qna' | translate }} ({{ item()!.questions!.length }})

+

{{ 'itemDetail.qna' | translate }} ({{ item.questions.length }})

- @for (question of item()!.questions!; track $index) { + @for (question of item.questions; track $index) {
В @@ -426,6 +429,7 @@
} + } }
} \ No newline at end of file diff --git a/src/app/pages/item-detail/item-detail.component.scss b/src/app/pages/item-detail/item-detail.component.scss index 60503fd..111c88d 100644 --- a/src/app/pages/item-detail/item-detail.component.scss +++ b/src/app/pages/item-detail/item-detail.component.scss @@ -1,4 +1,6 @@ -// ========== DEXAR ITEM DETAIL - Redesigned 2026 ========== +@use 'sass:color'; + +// ========== DEXAR ITEM DETAIL - Redesigned 2026 ========== $dx-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; $dx-dark: #1e3c38; $dx-primary: #497671; @@ -50,7 +52,7 @@ $dx-card-bg: #f5f3f9; transition: all 0.2s; &:hover { - background: darken($dx-primary, 8%); + background: color.adjust($dx-primary, $lightness: -8%); transform: translateY(-1px); } } @@ -281,7 +283,7 @@ $dx-card-bg: #f5f3f9; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); &:hover { - background: darken($dx-primary, 8%); + background: color.adjust($dx-primary, $lightness: -8%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(73, 118, 113, 0.3); } @@ -434,7 +436,7 @@ $dx-card-bg: #f5f3f9; justify-content: center; &:hover:not(:disabled) { - background: darken($dx-primary, 8%); + background: color.adjust($dx-primary, $lightness: -8%); transform: translateY(-1px); } diff --git a/src/app/pages/item-detail/item-detail.component.ts b/src/app/pages/item-detail/item-detail.component.ts index 8009ce6..e5b96ba 100644 --- a/src/app/pages/item-detail/item-detail.component.ts +++ b/src/app/pages/item-detail/item-detail.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, signal, ChangeDetectionStrategy, inject } import { DecimalPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { ActivatedRoute, RouterLink } from '@angular/router'; -import { ApiService, CartService, TelegramService, SeoService } from '../../services'; +import { ApiService, CartService, TelegramService, SeoService, LanguageService } from '../../services'; import { Item } from '../../models'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import { DomSanitizer } from '@angular/platform-browser'; import { Subscription } from 'rxjs'; import { environment } from '../../../environments/environment'; import { SecurityContext } from '@angular/core'; @@ -42,6 +42,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy { private seoService = inject(SeoService); private i18n = inject(TranslateService); + private langService = inject(LanguageService); constructor( private route: ActivatedRoute, @@ -100,7 +101,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy { return getDiscountedPrice(currentItem); } - getSafeHtml(html: string): SafeHtml { + getSafeHtml(html: string): string { return this.sanitizer.sanitize(SecurityContext.HTML, html) || ''; } @@ -123,7 +124,9 @@ export class ItemDetailComponent implements OnInit, OnDestroy { if (diffDays < 7) return `${diffDays} ${this.i18n.t('itemDetail.daysAgo')}`; if (diffDays < 30) return `${Math.floor(diffDays / 7)} ${this.i18n.t('itemDetail.weeksAgo')}`; - return date.toLocaleDateString('ru-RU', { + const localeMap: Record = { ru: 'ru-RU', en: 'en-US', hy: 'hy-AM' }; + const locale = localeMap[this.langService.currentLanguage()] || 'ru-RU'; + return date.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts index 48eda11..5028d2f 100644 --- a/src/app/pages/search/search.component.ts +++ b/src/app/pages/search/search.component.ts @@ -63,7 +63,7 @@ export class SearchComponent implements OnDestroy { performSearch(query: string): void { if (!query.trim()) { this.items.set([]); - this.hasMore.set(true); + this.hasMore.set(false); this.totalResults.set(0); return; } diff --git a/src/app/pipes/lang-route.pipe.ts b/src/app/pipes/lang-route.pipe.ts index 38b4a99..e70b8ba 100644 --- a/src/app/pipes/lang-route.pipe.ts +++ b/src/app/pipes/lang-route.pipe.ts @@ -7,19 +7,30 @@ import { LanguageService } from '../services/language.service'; }) export class LangRoutePipe implements PipeTransform { private langService = inject(LanguageService); + private lastLang = ''; + private lastInput: unknown = null; + private lastResult: string | (string | number)[] = ''; transform(value: string | (string | number)[]): string | (string | number)[] { const lang = this.langService.currentLanguage(); + // Short-circuit if nothing changed + if (lang === this.lastLang && value === this.lastInput) { + return this.lastResult; + } + + this.lastLang = lang; + this.lastInput = value; + if (typeof value === 'string') { - return value === '/' ? `/${lang}` : `/${lang}${value}`; - } - - if (Array.isArray(value) && value.length > 0) { + this.lastResult = value === '/' ? `/${lang}` : `/${lang}${value}`; + } else if (Array.isArray(value) && value.length > 0) { const [first, ...rest] = value; - return [`/${lang}${first}`, ...rest]; + this.lastResult = [`/${lang}${first}`, ...rest]; + } else { + this.lastResult = value; } - return value; + return this.lastResult; } } diff --git a/src/app/services/cart.service.ts b/src/app/services/cart.service.ts index ce8de1f..c040016 100644 --- a/src/app/services/cart.service.ts +++ b/src/app/services/cart.service.ts @@ -13,6 +13,7 @@ export class CartService { private cartItems = signal([]); private isTelegram = typeof window !== 'undefined' && !!window.Telegram?.WebApp; private addingItems = new Set(); + private initialized = false; items = this.cartItems.asReadonly(); itemCount = computed(() => { @@ -31,10 +32,12 @@ export class CartService { constructor(private apiService: ApiService) { this.loadCart(); - // Auto-save whenever cart changes + // Auto-save whenever cart changes (skip the initial empty state) effect(() => { const items = this.cartItems(); - this.saveToStorage(items); + if (this.initialized) { + this.saveToStorage(items); + } }); } @@ -67,9 +70,11 @@ export class CartService { // No data in CloudStorage, try localStorage this.loadFromLocalStorage(); } + this.initialized = true; }); } else { this.loadFromLocalStorage(); + this.initialized = true; } } diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts index 46597d1..9c0b4df 100644 --- a/src/app/services/seo.service.ts +++ b/src/app/services/seo.service.ts @@ -1,4 +1,4 @@ -import { Injectable, inject } from '@angular/core'; +import { Injectable, inject, DOCUMENT } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { environment } from '../../environments/environment'; import { Item } from '../models'; @@ -10,6 +10,7 @@ import { getDiscountedPrice, getMainImage } from '../utils/item.utils'; export class SeoService { private meta = inject(Meta); private title = inject(Title); + private doc = inject(DOCUMENT); private readonly siteUrl = `https://${environment.domain}`; private readonly siteName = environment.brandFullName; @@ -25,6 +26,7 @@ export class SeoService { const titleText = `${item.name} — ${this.siteName}`; this.title.setTitle(titleText); + this.setCanonical(itemUrl); this.setOrUpdate([ // Open Graph @@ -81,6 +83,7 @@ export class SeoService { // Remove product-specific tags this.meta.removeTag("property='product:price:amount'"); this.meta.removeTag("property='product:price:currency'"); + this.removeCanonical(); } private setOrUpdate(tags: Array<{ property?: string; name?: string; content: string }>): void { @@ -114,4 +117,19 @@ export class SeoService { if (!text || text.length <= maxLength) return text || ''; return text.substring(0, maxLength - 1) + '…'; } + + private setCanonical(url: string): void { + this.removeCanonical(); + const link = this.doc.createElement('link'); + link.setAttribute('rel', 'canonical'); + link.setAttribute('href', url); + this.doc.head.appendChild(link); + } + + private removeCanonical(): void { + const existing = this.doc.head.querySelector('link[rel="canonical"]'); + if (existing) { + this.doc.head.removeChild(existing); + } + } }