diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts index b1a504b..e7a979b 100644 --- a/src/app/app.spec.ts +++ b/src/app/app.spec.ts @@ -17,6 +17,8 @@ const tenant: Tenant = { codigo: 'test', nombre: 'Test Tenant', dominio: 'localhost', + site_title: 'Test Store', + favicon: 'https://example.com/favicon.png', primary_color: '#6376F3', secondary_color: '#A0A0A0', danger_color: '#FF8888', @@ -90,6 +92,9 @@ describe('App', () => { expect(fixture.nativeElement.style.getPropertyValue('--tenant-danger-rgb')).toBe( '255, 136, 136' ); + expect(document.title).toBe(tenant.site_title); + expect(document.head.querySelector('link[rel~="icon"]')?.getAttribute('href')) + .toBe(tenant.favicon); }); it('renders the tenant not found screen when the tenant is missing', async () => { @@ -108,5 +113,8 @@ describe('App', () => { fixture.detectChanges(); expect(fixture.nativeElement.textContent).toContain('No encontramos una tienda para este dominio'); + expect(document.title).toBe('ShopitFront'); + expect(document.head.querySelector('link[rel~="icon"]')?.getAttribute('href')) + .toBe('favicon.ico'); }); }); diff --git a/src/app/app.ts b/src/app/app.ts index b03a2f8..c5631f8 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,6 @@ -import { Component, computed, inject } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { Component, computed, effect, inject } from '@angular/core'; +import { Title } from '@angular/platform-browser'; import { RouterOutlet } from '@angular/router'; import { TenantService } from './core/services/tenant.service'; @@ -57,6 +59,28 @@ function hexToRgb(hex: string): string { }) export class App { private readonly tenantService = inject(TenantService); + private readonly document = inject(DOCUMENT); + private readonly title = inject(Title); + + constructor() { + effect(() => { + const tenant = this.tenantService.tenant(); + const siteTitle = tenant?.site_title?.trim() || 'ShopitFront'; + const faviconHref = tenant?.favicon || 'favicon.ico'; + + this.title.setTitle(siteTitle); + + let favicon = this.document.head.querySelector('link[rel~="icon"]'); + + if (!favicon) { + favicon = this.document.createElement('link'); + favicon.setAttribute('rel', 'icon'); + this.document.head.appendChild(favicon); + } + + favicon.setAttribute('href', faviconHref); + }); + } protected readonly status = this.tenantService.status; diff --git a/src/app/core/services/tenant.interface.ts b/src/app/core/services/tenant.interface.ts index 52c93a6..f1a8588 100644 --- a/src/app/core/services/tenant.interface.ts +++ b/src/app/core/services/tenant.interface.ts @@ -96,6 +96,8 @@ export interface Tenant { codigo: string; nombre: string; dominio: string; + site_title?: string | null; + favicon?: string | null; primary_color: string; secondary_color: string; danger_color: string;