ng-easycommerce-v18 0.3.4 → 0.3.6

package/fesm2022/ng-easycommerce-v18.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, RendererFactory2, afterNextRender, signal, EnvironmentInjector, runInInjectionContext, Component, ChangeDetectorRef, HostListener, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, Injector, EventEmitter, Output, forwardRef, afterRender, ViewChild, computed, Renderer2, ChangeDetectionStrategy, Directive, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, AsyncPipe, CommonModule, TitleCasePipe, JsonPipe, UpperCasePipe, Location } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, AsyncPipe, CommonModule, TitleCasePipe, JsonPipe, UpperCasePipe, Location } from '@angular/common';
 import { take, BehaviorSubject, shareReplay, map, catchError, of, filter, ReplaySubject, firstValueFrom, concatMap, throwError, switchMap, combineLatest } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
@@ -225,6 +225,10 @@ class CoreConstantsService {
      * Provee el ID de la plataforma en donde se esta ejecutando el codigo, esto sirve para poder diferenciar si es de un servidor o un navegador web.
      */
     platformId = inject(PLATFORM_ID);
+    /**
+     * Document token para acceso SSR-compatible al documento
+     */
+    document = inject(DOCUMENT);
     /**
      * Guarda la variable window del web browser.
      */
@@ -264,6 +268,77 @@ class CoreConstantsService {
      * @returns
      */
     url = () => this.apiConstants.API_URL.replace(/\/$/, ''); // remove last slash	
+    /**
+     * URL del sitio frontend - Compatible con Angular SSR
+     */
+    get FRONTEND_URL() {
+        // Verificar si estamos en el navegador
+        if (isPlatformBrowser(this.platformId)) {
+            // Primero intenta leer de window.__env (configurado por Docker)
+            const windowEnv = this.window?.__env;
+            if (windowEnv?.frontendUrl) {
+                return windowEnv.frontendUrl;
+            }
+            // Si no hay configuración específica, construir desde window.location
+            if (this.window?.location) {
+                return `${this.window.location.protocol}//${this.window.location.host}`;
+            }
+        }
+        // Para SSR, intentar construir desde el document si está disponible
+        if (this.document?.location) {
+            return `${this.document.location.protocol}//${this.document.location.host}`;
+        }
+        // Fallback - retornar URL vacía
+        return '';
+    }
+    /**
+     * Retorna la URL completa del frontend con una ruta opcional
+     * @param path - Ruta opcional para agregar a la URL base
+     * @returns {string} URL completa del frontend
+     */
+    getFrontendUrl = (path) => {
+        const baseUrl = this.FRONTEND_URL;
+        if (!path) {
+            return baseUrl;
+        }
+        // Asegurar que la ruta comience con '/' y no tenga doble slash
+        const cleanPath = path.startsWith('/') ? path : `/${path}`;
+        const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+        return `${cleanBaseUrl}${cleanPath}`;
+    };
+    /**
+     * Retorna la URL absoluta de una imagen para meta tags (compatible con SSR)
+     * @param postMedia - Ruta de la imagen
+     * @returns {string} URL absoluta de la imagen
+     */
+    getAbsoluteImageUrl = (postMedia) => {
+        // Si la URL ya es absoluta, devolverla tal como está
+        if (postMedia && (postMedia.startsWith('http://') || postMedia.startsWith('https://'))) {
+            return postMedia;
+        }
+        // Construir la URL de la imagen usando la URL del API
+        const imageUrl = this.mediaImageUrl(postMedia);
+        // Si la URL de la imagen ya es absoluta, devolverla
+        if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
+            return imageUrl;
+        }
+        // Si es una URL relativa, convertirla a absoluta usando la URL base del API
+        const apiBaseUrl = this.apiConstants.API_URL;
+        if (apiBaseUrl.startsWith('http://') || apiBaseUrl.startsWith('https://')) {
+            // API_URL ya es absoluta
+            return imageUrl;
+        }
+        // Si API_URL es relativa, usar la URL del frontend como base
+        const frontendUrl = this.FRONTEND_URL;
+        if (!frontendUrl) {
+            return imageUrl; // Fallback si no podemos determinar la URL del frontend
+        }
+        // Construir URL absoluta
+        const cleanApiUrl = apiBaseUrl.startsWith('/') ? apiBaseUrl.substring(1) : apiBaseUrl;
+        const cleanFrontendUrl = frontendUrl.endsWith('/') ? frontendUrl.slice(0, -1) : frontendUrl;
+        const cleanImageUrl = imageUrl.startsWith('/') ? imageUrl.substring(1) : imageUrl;
+        return `${cleanFrontendUrl}/${cleanApiUrl}${cleanImageUrl}`;
+    };
     /**
      * Retorna la url de las imagenes de los banners
      * @returns
@@ -8429,15 +8504,13 @@ class ProductDetailEcComponent {
     _meta = inject(Meta);
     _title = inject(Title);
     _location = inject(Location);
-    _router = inject(Router);
-    _document = inject(DOCUMENT);
-    _platformId = inject(PLATFORM_ID);
     product$ = this._productDetailService.product$;
     options$ = this._productDetailService.options$;
     data$ = this._productDetailService.associatedData$;
     routeSubscription;
     route = inject(ActivatedRoute);
     currentProductId;
+    _router = inject(Router);
     ngOnDestroy() {
         this.routeSubscription?.unsubscribe();
     }
@@ -8457,7 +8530,6 @@ class ProductDetailEcComponent {
     creditAccountShowPrices = null;
     // Agregar esta propiedad al inicio de la clase
     productSignal = signal(null);
-    lastMetaTagsProductId = null;
     constructor() {
         this._activedRoute.params.subscribe(queryParams => {
             this.code = queryParams["id"];
@@ -8500,86 +8572,13 @@ class ProductDetailEcComponent {
     }
     updateMetaTags(product) {
         const descripcionLimpia = he.decode(product.description || '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
-        // Obtener la URL completa de manera compatible con SSR
-        let currentUrl = '';
-        if (isPlatformBrowser(this._platformId)) {
-            // En el navegador, usar window.location
-            currentUrl = window.location.href;
-        }
-        else {
-            // En SSR, construir la URL completa manualmente
-            const routerUrl = this._router.url;
-            // Obtener el origin del documento o usar uno por defecto
-            let origin = '';
-            try {
-                // Intentar obtener el origin del documento
-                if (this._document.defaultView && this._document.defaultView.location) {
-                    origin = this._document.defaultView.location.origin;
-                }
-                else {
-                    // Fallback: construir el origin desde los headers de la request
-                    // Detectar el protocolo correcto del documento actual
-                    const protocol = this._document.location?.protocol ||
-                        (typeof window !== 'undefined' ? window.location.protocol : 'http:');
-                    const host = this._document.location?.host || 'localhost';
-                    origin = `${protocol}//${host}`;
-                }
-            }
-            catch (error) {
-                // Si falla, usar la URL base de las constantes como fallback
-                const fallbackUrl = this._consts.url ? this._consts.url() :
-                    (typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : 'http://localhost');
-                origin = fallbackUrl.replace(/\/$/, ''); // Remover trailing slash
-            }
-            currentUrl = origin + routerUrl;
-        }
-        // Verificar que el producto tenga datos válidos
-        if (!product || !product.name) {
-            console.warn('Product is null, undefined, or missing name for meta tags');
-            return;
-        }
-        // Evitar actualizaciones duplicadas para el mismo producto
-        const productId = String(product.id || product.name);
-        if (this.lastMetaTagsProductId === productId) {
-            return;
-        }
-        this.lastMetaTagsProductId = productId;
-        // Log para debug (comentado para producción)
-        // console.log('Updating meta tags for product:', {
-        //   name: product.name,
-        //   description: product.description,
-        //   pictures: product.picturesdefault
-        // });
-        // Preparar los valores con fallbacks más robustos
-        const title = product.name || 'Producto sin nombre';
-        const description = descripcionLimpia || 'Producto disponible';
-        // Manejar la imagen de manera más robusta
-        let imageUrl = '';
-        if (product.picturesdefault) {
-            const firstImage = Array.isArray(product.picturesdefault) ? product.picturesdefault[0] : product.picturesdefault;
-            if (firstImage) {
-                imageUrl = this._consts.mediaImageUrl(firstImage) || '';
-            }
-        }
-        // Si no hay imagen, usar una imagen por defecto o vacía
-        if (!imageUrl) {
-            imageUrl = ''; // O puedes poner una imagen por defecto
-        }
-        // Actualizar las meta tags
-        this._meta.updateTag({ property: 'og:title', content: title });
-        this._meta.updateTag({ property: 'og:description', content: description });
-        this._meta.updateTag({ property: 'og:image', content: imageUrl });
+        const currentUrl = this._consts.getFrontendUrl() + this._router.url; // URL absoluta del producto
+        const imageUrl = this._consts.getAbsoluteImageUrl(Array.isArray(product.picturesdefault) ? product.picturesdefault[0] : product.picturesdefault);
+        this._meta.updateTag({ property: 'og:title', content: product.name || '' });
+        this._meta.updateTag({ property: 'og:description', content: descripcionLimpia || '' });
+        this._meta.updateTag({ property: 'og:image', content: imageUrl || '' });
         this._meta.updateTag({ property: 'og:url', content: currentUrl });
         this._meta.updateTag({ property: 'og:type', content: 'product' });
-        // También actualizar el título de la página
-        this._title.setTitle(title);
-        // Log para verificar los valores finales (comentado para producción)
-        // console.log('Meta tags updated:', {
-        //   title,
-        //   description,
-        //   imageUrl,
-        //   currentUrl
-        // });
     }
     decodeHtml(html) {
         const txt = document.createElement('textarea');