2 Commits

Author SHA1 Message Date
sdarbinyan
9386fbc2f8 currency for market 2026-06-20 14:00:28 +04:00
sdarbinyan
a06b654103 logo fix 2026-06-20 13:33:52 +04:00
4 changed files with 129 additions and 41 deletions

View File

@@ -3,7 +3,7 @@
<header class="novo-header"> <header class="novo-header">
<div class="novo-header-container"> <div class="novo-header-container">
<div class="novo-left"> <div class="novo-left">
<a [routerLink]="'/' | langRoute" class="novo-logo" (click)="closeMenu()"> <a [attr.href]="homeUrl" class="novo-logo" (click)="navigateHome($event)">
<app-logo /> <app-logo />
<!-- <span class="novo-brand">{{ brandName }}</span> --> <!-- <span class="novo-brand">{{ brandName }}</span> -->
</a> </a>
@@ -36,6 +36,7 @@
<app-language-selector /> <app-language-selector />
<a [routerLink]="'/cart' | langRoute" routerLinkActive="novo-cart-active" class="novo-cart" (click)="closeMenu()" [attr.aria-label]="'header.cart' | translate"> <a [routerLink]="'/cart' | langRoute" routerLinkActive="novo-cart-active" class="novo-cart" (click)="closeMenu()" [attr.aria-label]="'header.cart' | translate">
<span class="novo-cart-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="21" r="1"></circle> <circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle>
@@ -44,6 +45,10 @@
@if (cartItemCount() > 0) { @if (cartItemCount() > 0) {
<span class="novo-cart-badge">{{ cartItemCount() }}</span> <span class="novo-cart-badge">{{ cartItemCount() }}</span>
} }
</span>
@if (cartItemCount() > 0) {
<span class="novo-cart-total">{{ formatCartTotal(cartTotal()) }}</span>
}
</a> </a>
<button class="menu-toggle novo-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [class.novo-active]="menuOpen" [attr.aria-label]="menuOpen ? 'Close menu' : 'Open menu'" [attr.aria-expanded]="menuOpen"> <button class="menu-toggle novo-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [class.novo-active]="menuOpen" [attr.aria-label]="menuOpen ? 'Close menu' : 'Open menu'" [attr.aria-expanded]="menuOpen">
@@ -59,7 +64,7 @@
<header class="dexar-header"> <header class="dexar-header">
<div class="dexar-header-container"> <div class="dexar-header-container">
<!-- Logo --> <!-- Logo -->
<a [routerLink]="'/' | langRoute" class="dexar-logo" (click)="closeMenu()"> <a [attr.href]="homeUrl" class="dexar-logo" (click)="navigateHome($event)">
<app-logo /> <app-logo />
</a> </a>
@@ -102,6 +107,7 @@
<div class="dexar-actions"> <div class="dexar-actions">
<!-- Cart Button --> <!-- Cart Button -->
<a [routerLink]="'/cart' | langRoute" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()"> <a [routerLink]="'/cart' | langRoute" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
<span class="dexar-cart-icon">
<svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" /> <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" />
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" /> <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
@@ -110,6 +116,10 @@
@if (cartItemCount() > 0) { @if (cartItemCount() > 0) {
<span class="dexar-cart-badge">{{ cartItemCount() }}</span> <span class="dexar-cart-badge">{{ cartItemCount() }}</span>
} }
</span>
@if (cartItemCount() > 0) {
<span class="dexar-cart-total">{{ formatCartTotal(cartTotal()) }}</span>
}
</a> </a>
<!-- Region Selector (desktop only) --> <!-- Region Selector (desktop only) -->

View File

@@ -333,24 +333,36 @@
} }
.novo-cart { .novo-cart {
position: relative; display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
color: var(--text-primary); color: var(--text-primary);
text-decoration: none; text-decoration: none;
padding: 0.5rem; padding: 0.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
transition: all 0.3s; transition: all 0.3s;
svg {
display: block;
}
&:hover, &:hover,
&.novo-cart-active { &.novo-cart-active {
color: var(--primary-color); color: var(--primary-color);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
}
.novo-cart-badge { .novo-cart-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
svg {
display: block;
}
}
.novo-cart-badge {
position: absolute; position: absolute;
top: -4px; top: -4px;
right: -4px; right: -4px;
@@ -366,7 +378,13 @@
justify-content: center; justify-content: center;
padding: 0 5px; padding: 0 5px;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.novo-cart-total {
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
} }
.novo-menu-toggle { .novo-menu-toggle {
@@ -492,7 +510,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 32px; gap: 32px;
height: 48px; min-height: 48px;
} }
.dexar-logo { .dexar-logo {
@@ -615,15 +633,15 @@
} }
.dexar-cart-btn { .dexar-cart-btn {
position: relative;
width: 36px;
height: 28px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 36px;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
gap: 2px;
svg { svg {
width: 36px; width: 36px;
@@ -639,6 +657,15 @@
} }
} }
.dexar-cart-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 28px;
}
.dexar-cart-badge { .dexar-cart-badge {
position: absolute; position: absolute;
top: -8px; top: -8px;
@@ -658,6 +685,15 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.dexar-cart-total {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: 10px;
line-height: 1;
color: #1e3c38;
white-space: nowrap;
}
.dexar-lang-selector { .dexar-lang-selector {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -17,6 +17,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
}) })
export class HeaderComponent { export class HeaderComponent {
cartItemCount; cartItemCount;
cartTotal;
menuOpen = false; menuOpen = false;
brandName = environment.brandFullName; brandName = environment.brandFullName;
logo = environment.logo; logo = environment.logo;
@@ -28,6 +29,11 @@ export class HeaderComponent {
constructor(private cartService: CartService, private router: Router) { constructor(private cartService: CartService, private router: Router) {
this.cartItemCount = this.cartService.itemCount; this.cartItemCount = this.cartService.itemCount;
this.cartTotal = this.cartService.totalPrice;
}
get homeUrl(): string {
return `/${this.langService.currentLanguage()}`;
} }
toggleMenu(): void { toggleMenu(): void {
@@ -44,6 +50,23 @@ export class HeaderComponent {
this.renderer.removeClass(this.document.body, 'dexar-menu-open'); this.renderer.removeClass(this.document.body, 'dexar-menu-open');
} }
navigateHome(event?: Event): void {
event?.preventDefault();
this.closeMenu();
const homeUrl = this.homeUrl;
const currentUrl = this.router.url.split('?')[0].split('#')[0];
if (currentUrl === homeUrl || currentUrl === `${homeUrl}/`) {
this.document.defaultView?.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
this.router.navigateByUrl(homeUrl).then(() => {
this.document.defaultView?.scrollTo({ top: 0, behavior: 'auto' });
});
}
navigateToSearch(): void { navigateToSearch(): void {
const lang = this.langService.currentLanguage(); const lang = this.langService.currentLanguage();
this.router.navigate([`/${lang}/search`]); this.router.navigate([`/${lang}/search`]);
@@ -58,4 +81,20 @@ export class HeaderComponent {
}, 100); }, 100);
}); });
} }
formatCartTotal(total: number): string {
const locale = this.langService.currentLanguage() === 'en'
? 'en-US'
: this.langService.currentLanguage() === 'hy'
? 'hy-AM'
: 'ru-RU';
const fractionDigits = Number.isInteger(total) ? 0 : 2;
const amount = new Intl.NumberFormat(locale, {
minimumFractionDigits: fractionDigits,
maximumFractionDigits: 2,
}).format(total);
const currencySymbol = this.langService.getCurrentCurrency()?.symbol ?? this.langService.currentCurrency();
return `${amount} ${currencySymbol}`;
}
} }

View File

@@ -3,12 +3,15 @@ import { environment } from '../../../environments/environment';
@Component({ @Component({
selector: 'app-logo', selector: 'app-logo',
template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" fetchpriority="high" />`, template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" fetchpriority="high" draggable="false" />`,
styles: [` styles: [`
.logo-img { .logo-img {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
pointer-events: none;
user-select: none;
} }
`], `],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush