+
+
+ @if (hasItems()) {
+
+ @for (entry of favorites(); track entry.product.itemID) {
+
+ }
+
+ } @else {
+
+ }
+
diff --git a/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.scss b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.scss
new file mode 100644
index 0000000..3d0371e
--- /dev/null
+++ b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.scss
@@ -0,0 +1,47 @@
+.wishlist-page {
+ display: grid;
+ gap: 18px;
+}
+
+.wishlist-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.wishlist-head h1,
+.wishlist-head p {
+ margin: 0;
+}
+
+.wishlist-head p {
+ color: var(--text-secondary);
+}
+
+.wishlist-grid {
+ align-items: stretch;
+}
+
+.wishlist-item {
+ min-width: 0;
+}
+
+.wishlist-empty {
+ min-height: 220px;
+ display: grid;
+ place-content: center;
+ gap: 8px;
+ text-align: center;
+ padding: 24px;
+}
+
+.wishlist-empty h2,
+.wishlist-empty p {
+ margin: 0;
+}
+
+.wishlist-empty p {
+ color: var(--text-secondary);
+}
diff --git a/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts
new file mode 100644
index 0000000..8b09c36
--- /dev/null
+++ b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts
@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
+import { UserExperienceFacade } from '../../../../../facades/platform/user-experience.facade';
+import { TranslatePipe } from '../../../../../i18n/translate.pipe';
+import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
+import { CartService } from '../../../../../services';
+import { UserNotificationService } from '../../services/user-notification.service';
+
+@Component({
+ selector: 'app-wishlist-page',
+ standalone: true,
+ imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe],
+ templateUrl: './wishlist-page.component.html',
+ styleUrls: ['./wishlist-page.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WishlistPageComponent {
+ private readonly cartService = inject(CartService);
+ private readonly uxFacade = inject(UserExperienceFacade);
+ private readonly notifications = inject(UserNotificationService);
+
+ readonly favorites = this.uxFacade.wishlist;
+ readonly hasItems = computed(() => this.favorites().length > 0);
+
+ addToCart(itemId: number, event: Event): void {
+ event.preventDefault();
+ event.stopPropagation();
+ this.cartService.addItem(itemId);
+ this.notifications.show('Added to cart', 'success');
+ }
+
+ removeFromWishlist(itemId: number): void {
+ const target = this.favorites().find(entry => entry.product.itemID === itemId);
+ if (!target) {
+ return;
+ }
+
+ this.uxFacade.toggleWishlist(target.product);
+ this.notifications.show('Removed from wishlist', 'info');
+ }
+
+ clearWishlist(): void {
+ this.uxFacade.clearWishlist();
+ this.notifications.show('Wishlist cleared', 'info');
+ }
+}
diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts
index ab024bc..18ad85d 100644
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -8,6 +8,8 @@ export const en: Translations = {
contacts: 'Contacts',
searchPlaceholder: 'Search...',
catalog: 'Catalog',
+ wishlist: 'Wishlist',
+ compare: 'Compare',
},
footer: {
description: 'A modern marketplace for comfortable shopping',
@@ -243,4 +245,21 @@ export const en: Translations = {
qrExpired: 'QR code expired. Click to refresh',
qrError: 'Could not create login session. Click to retry',
},
+ ux: {
+ items: 'items',
+ wishlistTitle: 'Wishlist',
+ wishlistEmptyTitle: 'Your wishlist is empty',
+ wishlistEmptyDescription: 'Save products to revisit them anytime.',
+ clearWishlist: 'Clear wishlist',
+ compareTitle: 'Compare Products',
+ compareEmptyTitle: 'No products to compare',
+ compareEmptyDescription: 'Add products from catalog cards to compare specs and prices.',
+ clearCompare: 'Clear compare',
+ hideIdentical: 'Hide identical values',
+ highlightDifferences: 'Highlight differences',
+ clearRecentlyViewed: 'Clear recently viewed',
+ recentlyViewedEmpty: 'No recently viewed products yet.',
+ saveSearch: 'Save search',
+ goToCatalog: 'Go to catalog',
+ },
};
diff --git a/src/app/i18n/hy.ts b/src/app/i18n/hy.ts
index 2912350..05996e1 100644
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -8,6 +8,8 @@ export const hy: Translations = {
contacts: 'Կապ',
searchPlaceholder: 'Փնտրել...',
catalog: 'Կատալոգ',
+ wishlist: 'Ընտրյալ',
+ compare: 'Համեմատում',
},
footer: {
description: 'Ժամանակակից մարքեթփլեյս հարմար գնումների համար',
@@ -243,4 +245,21 @@ export const hy: Translations = {
qrExpired: 'QR կոդը հնացել է։ Սեղմեք՝ թարմացնելու համար',
qrError: 'Չհաջողվեց ստեղծել մուտքի սեսիա։ Սեղմեք՝ կրկնելու համար',
},
+ ux: {
+ items: 'ապրանք',
+ wishlistTitle: 'Ընտրյալներ',
+ wishlistEmptyTitle: 'Ընտրյալները դատարկ են',
+ wishlistEmptyDescription: 'Պահպանեք ապրանքները, որպեսզի արագ վերադառնաք դրանց։',
+ clearWishlist: 'Մաքրել ընտրյալները',
+ compareTitle: 'Ապրանքների համեմատում',
+ compareEmptyTitle: 'Համեմատելու ապրանքներ չկան',
+ compareEmptyDescription: 'Ավելացրեք ապրանքներ կատալոգից՝ բնութագրերը և գները համեմատելու համար։',
+ clearCompare: 'Մաքրել համեմատումը',
+ hideIdentical: 'Թաքցնել նույն արժեքները',
+ highlightDifferences: 'Ընդգծել տարբերությունները',
+ clearRecentlyViewed: 'Մաքրել դիտվածները',
+ recentlyViewedEmpty: 'Դուք դեռ ապրանքներ չեք դիտել։',
+ saveSearch: 'Պահպանել որոնումը',
+ goToCatalog: 'Գնալ կատալոգ',
+ },
};
diff --git a/src/app/i18n/ru.ts b/src/app/i18n/ru.ts
index 9fea86f..43b767e 100644
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -8,6 +8,8 @@ export const ru: Translations = {
contacts: 'Контакты',
searchPlaceholder: 'Искать...',
catalog: 'Каталог',
+ wishlist: 'Избранное',
+ compare: 'Сравнение',
},
footer: {
description: 'Современный маркетплейс для комфортных покупок',
@@ -243,4 +245,21 @@ export const ru: Translations = {
qrExpired: 'QR-код устарел. Нажмите, чтобы обновить',
qrError: 'Не удалось создать сессию входа. Нажмите, чтобы повторить',
},
+ ux: {
+ items: 'товаров',
+ wishlistTitle: 'Избранное',
+ wishlistEmptyTitle: 'Избранное пока пусто',
+ wishlistEmptyDescription: 'Сохраняйте товары, чтобы быстро вернуться к ним позже.',
+ clearWishlist: 'Очистить избранное',
+ compareTitle: 'Сравнение товаров',
+ compareEmptyTitle: 'Нет товаров для сравнения',
+ compareEmptyDescription: 'Добавьте товары из каталога, чтобы сравнить характеристики и цену.',
+ clearCompare: 'Очистить сравнение',
+ hideIdentical: 'Скрыть одинаковые значения',
+ highlightDifferences: 'Подсвечивать различия',
+ clearRecentlyViewed: 'Очистить просмотренные',
+ recentlyViewedEmpty: 'Вы пока не просматривали товары.',
+ saveSearch: 'Сохранить поиск',
+ goToCatalog: 'Перейти в каталог',
+ },
};
diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts
index 77dfe34..9a62053 100644
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -6,6 +6,8 @@ export interface Translations {
contacts: string;
searchPlaceholder: string;
catalog: string;
+ wishlist: string;
+ compare: string;
};
footer: {
description: string;
@@ -241,4 +243,21 @@ export interface Translations {
qrExpired: string;
qrError: string;
};
+ ux: {
+ items: string;
+ wishlistTitle: string;
+ wishlistEmptyTitle: string;
+ wishlistEmptyDescription: string;
+ clearWishlist: string;
+ compareTitle: string;
+ compareEmptyTitle: string;
+ compareEmptyDescription: string;
+ clearCompare: string;
+ hideIdentical: string;
+ highlightDifferences: string;
+ clearRecentlyViewed: string;
+ recentlyViewedEmpty: string;
+ saveSearch: string;
+ goToCatalog: string;
+ };
}
diff --git a/src/app/layouts/containers/dynamic-page-layout.component.ts b/src/app/layouts/containers/dynamic-page-layout.component.ts
index 2a0587e..1aeef10 100644
--- a/src/app/layouts/containers/dynamic-page-layout.component.ts
+++ b/src/app/layouts/containers/dynamic-page-layout.component.ts
@@ -43,7 +43,7 @@ import { Category } from '../../core/categories/models/category-domain.model';
[class.dynamic-widget--mobile-hidden]="widget.visibility?.mobile === false"
>
@if (resolveWidget(widget, section, model.id) | async; as resolved) {
-