diff --git a/src/shop/src/app/shared/layout/layout.components.ts b/src/shop/src/app/shared/layout/layout.components.ts
index c6d6a36..8efbded 100644
--- a/src/shop/src/app/shared/layout/layout.components.ts
+++ b/src/shop/src/app/shared/layout/layout.components.ts
@@ -1,6 +1,7 @@
import {
ChangeDetectionStrategy,
Component,
+ computed,
DestroyRef,
effect,
HostListener,
@@ -36,29 +37,35 @@ import {
import { ProductListItem, PromoBanner } from '../../core/models';
import { CartAddedModalComponent } from '../cart-added-modal.component';
+const PROMO_DISMISSED_KEY = 'iled_promo_dismissed';
+const PROMO_EXPECT_KEY = 'iled_promo_expect';
+
@Component({
selector: 'app-promo-banner',
standalone: true,
imports: [TranslatePipe],
template: `
- @if (banner() && !dismissed()) {
+ @if (showSlot()) {
- {{ banner()!.text }}
- @if (banner()!.highlightedCode) {
- {{ banner()!.highlightedCode }}
+ @if (banner(); as b) {
+ {{ b.text }}
+ @if (b.highlightedCode) {
+ {{ b.highlightedCode }}
+ }
+
}
-
}
`,
@@ -68,21 +75,46 @@ export class PromoBannerComponent {
readonly #catalog = inject(CatalogService);
readonly #i18n = inject(I18nService);
readonly banner = signal
(null);
+ readonly loaded = signal(false);
readonly dismissed = signal(
- sessionStorage.getItem('iled_promo_dismissed') === '1',
+ sessionStorage.getItem(PROMO_DISMISSED_KEY) === '1',
);
+ /**
+ * Reserve banner height until the API responds (or forever while visible)
+ * so sticky header / page content do not jump.
+ */
+ readonly showSlot = computed(() => {
+ if (this.dismissed()) {
+ return false;
+ }
+ if (!this.loaded()) {
+ return sessionStorage.getItem(PROMO_EXPECT_KEY) !== '0';
+ }
+ return this.banner() !== null;
+ });
+
constructor() {
effect(() => {
this.#i18n.locale();
+ this.loaded.set(false);
this.#catalog.getBanner().subscribe({
- next: (b) => this.banner.set(b),
+ next: (b) => {
+ this.banner.set(b);
+ this.loaded.set(true);
+ sessionStorage.setItem(PROMO_EXPECT_KEY, b ? '1' : '0');
+ },
+ error: () => {
+ this.banner.set(null);
+ this.loaded.set(true);
+ sessionStorage.setItem(PROMO_EXPECT_KEY, '0');
+ },
});
});
}
dismiss(): void {
- sessionStorage.setItem('iled_promo_dismissed', '1');
+ sessionStorage.setItem(PROMO_DISMISSED_KEY, '1');
this.dismissed.set(true);
}
}
@@ -230,6 +262,8 @@ export class StarRatingComponent {
})
export class ProductCardComponent implements OnInit {
readonly product = input.required();
+ /** Eager-load + high fetch priority for above-the-fold LCP cards. */
+ readonly priority = input(false);
readonly #cart = inject(CartService);
readonly #catalog = inject(CatalogService);
readonly #favorites = inject(FavoritesService);
@@ -328,8 +362,10 @@ export class ProductCardComponent implements OnInit {
{{ 'a11y.skipToContent' | translate }}
-
+
{{ product().name }}
-
+
{{ product().shortDescription }}
diff --git a/src/shop/src/styles.css b/src/shop/src/styles.css
index ea4a5c1..54023b8 100644
--- a/src/shop/src/styles.css
+++ b/src/shop/src/styles.css
@@ -10,7 +10,8 @@
--color-iled-grey-light: #d9d9d9;
--color-iled-bg: #fafaf8;
--color-iled-surface: #ffffff;
- --color-iled-success: #16a34a;
+ /* Darker green for AA contrast on white at small sizes */
+ --color-iled-success: #15803d;
--color-iled-danger: #dc2626;
--color-iled-focus: #ffbc39;
--font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;