-
+
+
+ @if (cartItemCount() > 0) {
+ {{ cartItemCount() }}
+ }
+
@if (cartItemCount() > 0) {
- {{ cartItemCount() }}
+ {{ formatCartTotal(cartTotal()) }}
}
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 2338fe2..4e426eb 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -333,42 +333,60 @@
}
.novo-cart {
- position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.2rem;
color: var(--text-primary);
text-decoration: none;
padding: 0.5rem;
border-radius: var(--radius-md);
transition: all 0.3s;
- svg {
- display: block;
- }
-
&:hover,
&.novo-cart-active {
color: var(--primary-color);
background: var(--bg-secondary);
}
-
- .novo-cart-badge {
- position: absolute;
- top: -4px;
- right: -4px;
- background: var(--primary-color);
- color: white;
- font-size: 0.7rem;
- font-weight: 700;
- min-width: 18px;
- height: 18px;
- border-radius: 9px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 5px;
- box-shadow: var(--shadow-sm);
+}
+
+.novo-cart-icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 0;
+
+ svg {
+ display: block;
}
}
+.novo-cart-badge {
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ background: var(--primary-color);
+ color: white;
+ font-size: 0.7rem;
+ font-weight: 700;
+ min-width: 18px;
+ height: 18px;
+ border-radius: 9px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 5px;
+ box-shadow: var(--shadow-sm);
+}
+
+.novo-cart-total {
+ font-size: 0.68rem;
+ font-weight: 700;
+ line-height: 1;
+ white-space: nowrap;
+}
+
.novo-menu-toggle {
display: none;
flex-direction: column;
@@ -492,7 +510,7 @@
display: flex;
align-items: center;
gap: 32px;
- height: 48px;
+ min-height: 48px;
}
.dexar-logo {
@@ -615,15 +633,15 @@
}
.dexar-cart-btn {
- position: relative;
- width: 36px;
- height: 28px;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
+ min-width: 36px;
text-decoration: none;
cursor: pointer;
transition: opacity 0.3s ease;
+ gap: 2px;
svg {
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 {
position: absolute;
top: -8px;
@@ -658,6 +685,15 @@
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 {
display: flex;
align-items: center;
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 99fe04e..e909d3f 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -17,6 +17,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
})
export class HeaderComponent {
cartItemCount;
+ cartTotal;
menuOpen = false;
brandName = environment.brandFullName;
logo = environment.logo;
@@ -28,6 +29,7 @@ export class HeaderComponent {
constructor(private cartService: CartService, private router: Router) {
this.cartItemCount = this.cartService.itemCount;
+ this.cartTotal = this.cartService.totalPrice;
}
get homeUrl(): string {
@@ -79,4 +81,20 @@ export class HeaderComponent {
}, 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}`;
+ }
}