feat(product-detail): implement resolver for product details and update component logic for improved error handling

feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency style: refactor HTML structure for better readability and maintainability test(product-detail): add unit tests for product detail resolver and component behavior
feat(store-home): implement resolver for product data and enhance component logic for improved error handling and loading states
2026-07-08 16:12:35 -03:00 · 2026-07-08 16:04:11 -03:00
14 changed files with 670 additions and 333 deletions
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,20 +1,36 @@
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { HttpRequest, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  provideAppInitializer,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';

 import { routes } from './app.routes';
 import { authBootstrap } from './core/services/auth/auth-bootstrap';
 import { authInterceptor } from './core/services/auth/auth.interceptor';
 import { tenantBootstrap } from './core/services/tenant-bootstrap';

+function isStoreCatalogRequest(request: HttpRequest<unknown>): boolean {
+  return (
+    request.method === 'GET' &&
+    /\/api\/tenants\/[^/]+\/productos(?:\/\d+)?(?:\?|$)/.test(request.urlWithParams)
+  );
+}
+
 export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
-    provideClientHydration(),
+    provideClientHydration(
+      withHttpTransferCacheOptions({
+        includeRequestsWithAuthHeaders: true,
+        filter: isStoreCatalogRequest,
+      }),
+    ),
    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
    provideAppInitializer(authBootstrap),
-    provideAppInitializer(tenantBootstrap)
-  ]
+    provideAppInitializer(tenantBootstrap),
+  ],
 };
--- a/src/app/features/store/components/product-carousel/product-carousel.component.html
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.html
@@ -1,51 +1,70 @@
 <div class="product-carousel d-flex flex-column gap-4">
  <!-- Active/Main Image Area -->
-  <div class="product-carousel__main position-relative bg-light  overflow-hidden">
+  <div class="product-carousel__main position-relative bg-light overflow-hidden">
    <!-- Main Image -->
    @if (images().length > 0) {
-    <img [src]="images()[activeIndex()]" alt="Product active image"
-      class="product-carousel__main-image w-100 h-100 object-fit-cover" />
+      <img
+        [ngSrc]="images()[activeIndex()]"
+        alt="Product active image"
+        fill
+        priority
+        sizes="(min-width: 992px) 42vw, 100vw"
+        class="product-carousel__main-image w-100 h-100 object-fit-cover"
+      />
    } @else {
-    <!-- Placeholder -->
-    <div class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted">
-      <i class="fa-solid fa-image fa-3x"></i>
-    </div>
+      <!-- Placeholder -->
+      <div
+        class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted"
+      >
+        <i class="fa-solid fa-image fa-3x"></i>
+      </div>
    }

    <!-- Discount Badge -->
    @if (discount() && discount()! > 0) {
-    <span
-      class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold">
-      -{{ discount() }}%
-    </span>
+      <span
+        class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold"
+      >
+        -{{ discount() }}%
+      </span>
    }

    <!-- Navigation Arrows -->
    @if (images().length > 1) {
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="prevImage()" aria-label="Previous image">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
+      <button
+        type="button"
+        class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+        (click)="prevImage()"
+        aria-label="Previous image"
+      >
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>

-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="nextImage()" aria-label="Next image">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
+      <button
+        type="button"
+        class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+        (click)="nextImage()"
+        aria-label="Next image"
+      >
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
    }
  </div>

  <!-- Thumbnails Row -->
  @if (images().length > 1) {
-  <div class="product-carousel__thumbnails">
-    @for (image of images(); track image; let idx = $index) {
-    <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
-      [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
-      [attr.aria-label]="'Select image ' + (idx + 1)">
-      <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
-    </button>
-    }
-  </div>
+    <div class="product-carousel__thumbnails">
+      @for (image of images(); track image; let idx = $index) {
+        <button
+          type="button"
+          class="product-carousel__thumbnail border-0 p-0 overflow-hidden bg-light"
+          [class.product-carousel__thumbnail--active]="idx === activeIndex()"
+          (click)="selectImage(idx)"
+          [attr.aria-label]="'Select image ' + (idx + 1)"
+        >
+          <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
+        </button>
+      }
+    </div>
  }
 </div>
--- a/src/app/features/store/components/product-carousel/product-carousel.component.ts
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.ts
@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-product-carousel',
  standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
  templateUrl: './product-carousel.component.html',
  styleUrl: './product-carousel.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductCarouselComponent {
  readonly images = input<string[]>([]);
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
@@ -1,12 +1,8 @@
 import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { BehaviorSubject, of, throwError } from 'rxjs';
-import { convertToParamMap } from '@angular/router';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';

 import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
@@ -14,6 +10,10 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductDetailPageComponent } from './product-detail-page.component';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  ProductDetailResolvedData,
+} from './product-detail-page.resolver';

 describe('ProductDetailPageComponent', () => {
  const mockProduct: ProductDetail = {
@@ -29,10 +29,10 @@ describe('ProductDetailPageComponent', () => {
    images: ['https://example.com/image.png'],
    attributes: [],
    variants_map: [],
-    variant: null
+    variant: null,
  };

-  let paramMapSubject: BehaviorSubject<any>;
+  let routeDataSubject: BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>;
  let catalogServiceStub: any;
  let routerStub: any;
  let cartServiceStub: any;
@@ -40,10 +40,7 @@ describe('ProductDetailPageComponent', () => {

  beforeAll(() => {
    try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
    } catch {
      // Test environment may already be initialized by another setup entrypoint.
    }
@@ -51,20 +48,25 @@ describe('ProductDetailPageComponent', () => {

  beforeEach(() => {
    vi.restoreAllMocks();
-    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
+    routeDataSubject = new BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>({
+      productDetailData: {
+        product: mockProduct,
+        error: null,
+      },
+    });
    catalogServiceStub = {
-      getProducto: vi.fn().mockReturnValue(of(mockProduct))
+      getProducto: vi.fn(),
    };
    routerStub = {
-      navigate: vi.fn()
+      navigate: vi.fn(),
    };
    cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' })),
    };
    toastServiceStub = {
      success: vi.fn(),
      danger: vi.fn(),
-      info: vi.fn()
+      info: vi.fn(),
    };
  });

@@ -75,47 +77,69 @@ describe('ProductDetailPageComponent', () => {
        {
          provide: ActivatedRoute,
          useValue: {
-            paramMap: paramMapSubject.asObservable()
-          }
+            data: routeDataSubject.asObservable(),
+          },
        },
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
+          useValue: catalogServiceStub,
        },
        {
          provide: Router,
-          useValue: routerStub
+          useValue: routerStub,
        },
        {
          provide: CartService,
-          useValue: cartServiceStub
+          useValue: cartServiceStub,
        },
        {
          provide: ToastService,
-          useValue: toastServiceStub
-        }
-      ]
+          useValue: toastServiceStub,
+        },
+      ],
    }).compileComponents();
  }

-  it('loads the product on init and embeds the carousel', async () => {
+  function resolveProduct(product: ProductDetail): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product,
+        error: null,
+      },
+    });
+  }
+
+  function resolveProductError(error: string): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product: null,
+        error,
+      },
+    });
+  }
+
+  it('renders the resolved product and embeds the carousel', async () => {
    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;

-    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
+    expect(catalogServiceStub.getProducto).not.toHaveBeenCalled();

    expect(element.querySelector('app-product-carousel')).not.toBeNull();
-    expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth');
-    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999');
+    expect(element.querySelector('.product-detail__title')?.textContent).toContain(
+      'Auriculares Bluetooth',
+    );
+    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain(
+      '$24.999',
+    );
    expect(element.querySelector('.product-detail__price-previous')).toBeNull();
    expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
  });

-  it('shows error message if load fails', async () => {
-    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed')));
+  it('shows error message if the resolver cannot load the product', async () => {
+    resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE);
    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
    fixture.detectChanges();
@@ -125,7 +149,6 @@ describe('ProductDetailPageComponent', () => {
    expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
  });

-
  it('should use default variant images if present', async () => {
    const detailProduct: ProductDetail = {
      ...mockProduct,
@@ -134,26 +157,29 @@ describe('ProductDetailPageComponent', () => {
        id: 123,
        cantidad_maxima: 10,
        images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
+        definitions: {},
+      },
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);

    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
    fixture.detectChanges();

    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']);
+    expect(carousel.images()).toEqual([
+      'https://example.com/variant1.png',
+      'https://example.com/variant2.png',
+    ]);
  });

  it('should fallback to product images if default variant images are not present', async () => {
    const detailProduct: ProductDetail = {
      ...mockProduct,
      images: ['https://example.com/product.png'],
-      variant: null
+      variant: null,
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);

    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -167,9 +193,9 @@ describe('ProductDetailPageComponent', () => {
    const detailProduct: ProductDetail = {
      ...mockProduct,
      images: [],
-      variant: null
+      variant: null,
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);

    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -196,16 +222,16 @@ describe('ProductDetailPageComponent', () => {
              value: 'beige',
              label: 'Beige',
              sort_order: 1,
-              metadata: { hex: '#D8D1C7' }
+              metadata: { hex: '#D8D1C7' },
            },
            {
              id: 11,
              value: 'brown',
              label: 'Marrón',
              sort_order: 2,
-              metadata: { palette: { primary: '#7E6460' } }
-            }
-          ]
+              metadata: { palette: { primary: '#7E6460' } },
+            },
+          ],
        },
        {
          id: 2,
@@ -220,17 +246,17 @@ describe('ProductDetailPageComponent', () => {
              value: 'mesh',
              label: 'Mesh',
              sort_order: 1,
-              metadata: null
+              metadata: null,
            },
            {
              id: 21,
              value: 'cuero',
              label: 'Cuero',
              sort_order: 2,
-              metadata: null
-            }
-          ]
-        }
+              metadata: null,
+            },
+          ],
+        },
      ],
      variant: {
        id: 123,
@@ -238,11 +264,11 @@ describe('ProductDetailPageComponent', () => {
        images: ['https://example.com/variant1.png'],
        definitions: {
          color: 'beige',
-          material: 'Cuero'
-        }
-      }
+          material: 'Cuero',
+        },
+      },
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);

    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -252,14 +278,16 @@ describe('ProductDetailPageComponent', () => {
    const swatches = element.querySelectorAll('.attribute-selector__swatch');
    const textOptions = element.querySelectorAll('.attribute-selector__text-option');
    const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) =>
-      label.textContent?.trim()
+      label.textContent?.trim(),
    );

    expect(labels).toEqual(['Color:', 'Material:']);
    expect(swatches).toHaveLength(2);
    expect(textOptions).toHaveLength(2);
    expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true);
-    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true);
+    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(
+      true,
+    );
    expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
  });

@@ -282,16 +310,16 @@ describe('ProductDetailPageComponent', () => {
    fixture.componentInstance['selectedVariant'].set({
      variant_id: 1,
      cantidad_maxima: 10,
-      attributes: {}
+      attributes: {},
    });
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    const decreaseButton = element.querySelector(
-      '[aria-label="Disminuir cantidad"]'
+      '[aria-label="Disminuir cantidad"]',
    ) as HTMLButtonElement;
    const increaseButton = element.querySelector(
-      '[aria-label="Aumentar cantidad"]'
+      '[aria-label="Aumentar cantidad"]',
    ) as HTMLButtonElement;

    decreaseButton.click();
@@ -316,7 +344,7 @@ describe('ProductDetailPageComponent', () => {

    const element = fixture.nativeElement as HTMLElement;
    const toggleButton = element.querySelector(
-      '.product-detail__description-toggle'
+      '.product-detail__description-toggle',
    ) as HTMLButtonElement;

    expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
@@ -327,7 +355,7 @@ describe('ProductDetailPageComponent', () => {
    expect(
      element
        .querySelector('.product-detail__description-body')
-        ?.classList.contains('product-detail__description-body--expanded')
+        ?.classList.contains('product-detail__description-body--expanded'),
    ).toBe(true);
    expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
  });
@@ -338,12 +366,12 @@ describe('ProductDetailPageComponent', () => {
    fixture.detectChanges();

    const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('app-button button')
+      fixture.nativeElement.querySelectorAll('app-button button'),
    ) as HTMLButtonElement[];

    expect(buttons.map((button) => button.textContent?.trim())).toEqual([
      'Agregar al carrito',
-      'Comprar'
+      'Comprar',
    ]);

    buttons[0].click();
@@ -359,17 +387,17 @@ describe('ProductDetailPageComponent', () => {
        id: 123,
        cantidad_maxima: 5,
        images: [],
-        definitions: {}
+        definitions: {},
      },
      variants_map: [
        {
          variant_id: 123,
          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          attributes: {},
+        },
+      ],
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);

    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -382,7 +410,7 @@ describe('ProductDetailPageComponent', () => {

    const element = fixture.nativeElement as HTMLElement;
    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
    ) as HTMLButtonElement;

    expect(addToCartButton).toBeDefined();
@@ -400,17 +428,17 @@ describe('ProductDetailPageComponent', () => {
        id: 123,
        cantidad_maxima: 5,
        images: [],
-        definitions: {}
+        definitions: {},
      },
      variants_map: [
        {
          variant_id: 123,
          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          attributes: {},
+        },
+      ],
    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
    cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));

    await configureTestingModule();
@@ -422,13 +450,15 @@ describe('ProductDetailPageComponent', () => {

    const element = fixture.nativeElement as HTMLElement;
    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
    ) as HTMLButtonElement;

    addToCartButton.click();
    fixture.detectChanges();

    expect(cartServiceStub.addItem).toHaveBeenCalled();
-    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.');
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'No se pudo agregar el producto al carrito.',
+    );
  });
 });
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
@@ -9,7 +9,7 @@ import {
  inject,
  signal,
  viewChild,
-  PLATFORM_ID
+  PLATFORM_ID,
 } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -20,16 +20,14 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 import { ToastService } from '../../../../core/services/toast.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import {
-  ProductAttribute,
-  ProductAttributeOption,
  ProductDetail,
-  ProductVariant,
-  ProductVariantMap
+  ProductVariantMap,
 } from '../../../../core/services/catalog/catalog.interface';
 import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
 import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component';
+import { ProductDetailResolvedData } from './product-detail-page.resolver';

@Component({
  selector: 'app-product-detail-page',
@@ -40,11 +38,11 @@ import { QuantitySelectorComponent } from '../../../../shared/components/quantit
    ProductCarouselComponent,
    ButtonComponent,
    ProductAttributeSelectorComponent,
-    QuantitySelectorComponent
+    QuantitySelectorComponent,
  ],
  templateUrl: './product-detail-page.component.html',
  styleUrl: './product-detail-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductDetailPageComponent implements OnInit, OnDestroy {
  private readonly route = inject(ActivatedRoute);
@@ -86,14 +84,14 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  protected readonly descriptionMaxHeight = signal(0);
  protected readonly descriptionHasOverflow = signal(false);
  protected readonly renderableAttributes = computed(() =>
-    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0)
+    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0),
  );
  protected readonly hasRenderableAttributes = computed(
-    () => this.renderableAttributes().length > 0
+    () => this.renderableAttributes().length > 0,
  );
  protected readonly oldPrice = computed<string | null>(() => null);
  protected readonly showDescriptionToggle = computed(
-    () => this.descriptionExpanded() || this.descriptionHasOverflow()
+    () => this.descriptionExpanded() || this.descriptionHasOverflow(),
  );

  constructor() {
@@ -113,14 +111,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  }

  ngOnInit(): void {
-    this.routeSub = this.route.paramMap.subscribe((params) => {
-      const id = this.parseIntegerParam(params.get('id'));
-      if (id === null) {
-        this.error.set('ID de producto inválido');
-        return;
-      }
+    this.routeSub = this.route.data.subscribe((data) => {
+      const resolvedData = data['productDetailData'] as ProductDetailResolvedData | undefined;

-      this.loadProduct(id);
+      if (resolvedData) {
+        this.applyResolvedData(resolvedData);
+      }
    });
  }

@@ -131,38 +127,13 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    this.clearMeasurementTimer();
  }

-  private loadProduct(id: number): void {
-    this.loading.set(true);
-    this.error.set(null);
-    this.product.set(null);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(id).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
-        this.quantity.set(1);
-        this.descriptionExpanded.set(false);
-        this.descriptionHasOverflow.set(false);
-        this.loading.set(false);
-      },
-      error: () => {
-        this.error.set('No pudimos cargar los detalles del producto.');
-        this.loading.set(false);
-      }
-    });
-  }
-
  private loadProductVariant(productId: number, variantId: number): void {
    this.variantLoading.set(true);

    this.productSub?.unsubscribe();
    this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({
      next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
+        this.applyProduct(prod, false);
        this.variantLoading.set(false);
      },
      error: (err: HttpErrorResponse) => {
@@ -180,15 +151,44 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
          });
          return {
            ...currentProduct,
-            variants_map: updatedVariantsMap
+            variants_map: updatedVariantsMap,
          };
        });

        this.attributeSelector()?.reset();
-      }
+      },
    });
  }

+  private applyResolvedData(resolvedData: ProductDetailResolvedData): void {
+    this.productSub?.unsubscribe();
+    this.loading.set(false);
+    this.variantLoading.set(false);
+
+    if (resolvedData.error) {
+      this.product.set(null);
+      this.error.set(resolvedData.error);
+      return;
+    }
+
+    if (resolvedData.product) {
+      this.applyProduct(resolvedData.product, true);
+    }
+  }
+
+  private applyProduct(prod: ProductDetail, resetQuantity: boolean): void {
+    this.product.set(prod);
+    const matchingVariant =
+      prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
+    this.selectedVariant.set(matchingVariant);
+    if (resetQuantity) {
+      this.quantity.set(1);
+    }
+    this.descriptionExpanded.set(false);
+    this.descriptionHasOverflow.set(false);
+    this.error.set(null);
+  }
+
  protected goBack(): void {
    this.router.navigate(['/']);
  }
@@ -219,8 +219,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    }
  }

-
-
  protected addToCart(): void {
    const variant = this.selectedVariant();
    if (!variant) {
@@ -239,7 +237,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
        const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
        this.toastService.danger(errorMessage);
        this.addingToCart.set(false);
-      }
+      },
    });
  }

@@ -247,15 +245,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    this.descriptionExpanded.update((current) => !current);
  }

-  private parseIntegerParam(value: string | null): number | null {
-    if (!value) {
-      return null;
-    }
-
-    const parsed = Number(value);
-    return Number.isInteger(parsed) ? parsed : null;
-  }
-
  private bindCarouselResizeObserver(): void {
    const previewElement = this.getCarouselPreviewElement();

@@ -315,7 +304,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    }

    this.descriptionHasOverflow.set(
-      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
+      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1,
    );
  }

--- a/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts
@@ -0,0 +1,91 @@
+import { TestBed } from '@angular/core/testing';
+import { convertToParamMap } from '@angular/router';
+import { firstValueFrom, Observable, of, throwError } from 'rxjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+  ProductDetailResolvedData,
+  productDetailResolver,
+} from './product-detail-page.resolver';
+
+describe('productDetailResolver', () => {
+  const product: ProductDetail = {
+    id: 1,
+    category_id: 10,
+    brand_id: null,
+    slug: 'auriculares-bluetooth',
+    nombre: 'Auriculares Bluetooth',
+    descripcion: 'Auriculares bluetooth de prueba',
+    precio: '24999',
+    category: 'Tecnologia',
+    brand: null,
+    images: [],
+    attributes: [],
+    variants_map: [],
+    variant: null,
+  };
+
+  let catalogServiceStub: { getProducto: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    catalogServiceStub = {
+      getProducto: vi.fn().mockReturnValue(of(product)),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub,
+        },
+      ],
+    });
+  });
+
+  it('resolves the product detail for the route id', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product,
+      error: null,
+    });
+    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
+  });
+
+  it('returns an error state for invalid ids', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('abc'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+    expect(catalogServiceStub.getProducto).not.toHaveBeenCalled();
+  });
+
+  it('returns an error state when the request fails', async () => {
+    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('boom')));
+
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_ERROR_MESSAGE,
+    });
+  });
+});
+
+function createRouteSnapshot(id: string) {
+  return {
+    paramMap: convertToParamMap({ id }),
+  } as never;
+}
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts
@@ -0,0 +1,53 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const PRODUCT_DETAIL_ERROR_MESSAGE = 'No pudimos cargar los detalles del producto.';
+export const PRODUCT_DETAIL_INVALID_ID_MESSAGE = 'ID de producto invalido';
+
+export interface ProductDetailResolvedData {
+  product: ProductDetail | null;
+  error: string | null;
+}
+
+export const productDetailResolver: ResolveFn<ProductDetailResolvedData> = (
+  route: ActivatedRouteSnapshot,
+) => {
+  const productId = parseIntegerParam(route.paramMap.get('id'));
+
+  if (productId === null) {
+    return of({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+  }
+
+  return inject(CatalogService)
+    .getProducto(productId)
+    .pipe(
+      map(
+        (product): ProductDetailResolvedData => ({
+          product,
+          error: null,
+        }),
+      ),
+      catchError(() =>
+        of({
+          product: null,
+          error: PRODUCT_DETAIL_ERROR_MESSAGE,
+        }),
+      ),
+    );
+};
+
+function parseIntegerParam(value: string | null): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isInteger(parsed) ? parsed : null;
+}
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.html
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.html
@@ -1,42 +1,44 @@
-
-    <app-store-section title="Productos">
-      <div class="d-grid gap-4">
-        @if (error()) {
-          <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
-        } @else if (loading() && !productCards().length) {
-          <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
-        } @else if (!productCards().length) {
-          <p class="alert alert-light border text-center mb-0">No hay productos disponibles en este momento.</p>
-        } @else {
-          <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
-            @for (product of productCards(); track product.id) {
-              <div class="col">
-                <app-product-card
-                  [title]="product.title"
-                  [originalPrice]="product.originalPrice"
-                  [discount]="product.discount"
-                  [transferPrice]="product.transferPrice"
-                  [imageUrl]="product.imageUrl"
-                  (buy)="onBuyProduct(product.id)"
-                />
-              </div>
-            }
-          </div>
-        }
-
-        @if (loading() && productCards().length) {
-          <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
-        }
-
-        @if (totalPages() > 1) {
-          <div class="d-flex justify-content-center">
-            <app-paginator
-              [page]="currentPage()"
-              [totalPages]="totalPages()"
-              [disabled]="loading()"
-              (pageChange)="onPageChange($event)"
+<app-store-section title="Productos">
+  <div class="d-grid gap-4">
+    @if (error()) {
+      <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
+    } @else if (loading() && !productCards().length) {
+      <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
+    } @else if (!productCards().length) {
+      <p class="alert alert-light border text-center mb-0">
+        No hay productos disponibles en este momento.
+      </p>
+    } @else {
+      <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
+        @for (product of productCards(); track product.id; let index = $index) {
+          <div class="col">
+            <app-product-card
+              [title]="product.title"
+              [originalPrice]="product.originalPrice"
+              [discount]="product.discount"
+              [transferPrice]="product.transferPrice"
+              [imageUrl]="product.imageUrl"
+              [imagePriority]="index < priorityImageCount"
+              (buy)="onBuyProduct(product.id)"
            />
          </div>
        }
      </div>
-    </app-store-section>
+    }
+
+    @if (loading() && productCards().length) {
+      <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
+    }
+
+    @if (totalPages() > 1) {
+      <div class="d-flex justify-content-center">
+        <app-paginator
+          [page]="currentPage()"
+          [totalPages]="totalPages()"
+          [disabled]="loading()"
+          (pageChange)="onPageChange($event)"
+        />
+      </div>
+    }
+  </div>
+</app-store-section>
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
@@ -1,16 +1,21 @@
 import { TestBed } from '@angular/core/testing';
-import { Subject, of, throwError } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { Subject, of } from 'rxjs';
 import { beforeEach, describe, expect, it, vi } from 'vitest';

 import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
 import { Product } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { StoreHomePageComponent } from './store-home-page.component';
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeProductsResolvedData,
+} from './store-home-page.resolver';

 function createPaginatedResponse(
  products: Product[],
  currentPage: number,
-  lastPage: number
+  lastPage: number,
 ): ApiPaginatedResponse<Product[]> {
  return {
    data: products,
@@ -22,14 +27,34 @@ function createPaginatedResponse(
      path: '/productos',
      per_page: 12,
      to: products.length || null,
-      total: products.length
+      total: products.length,
    },
    links: {
      first: '/productos?page=1',
      last: `/productos?page=${lastPage}`,
      prev: currentPage > 1 ? `/productos?page=${currentPage - 1}` : null,
-      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null
-    }
+      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null,
+    },
+  };
+}
+
+function createResolvedData(
+  response: ApiPaginatedResponse<Product[]>,
+): StoreHomeProductsResolvedData {
+  return {
+    response,
+    error: null,
+  };
+}
+
+function provideActivatedRoute(productsData: StoreHomeProductsResolvedData) {
+  return {
+    provide: ActivatedRoute,
+    useValue: {
+      snapshot: {
+        data: { productsData },
+      },
+    },
  };
 }

@@ -43,9 +68,9 @@ describe('StoreHomePageComponent', () => {
      nombre: 'Auriculares Bluetooth',
      descripcion: 'Auriculares bluetooth de prueba',
      precio: '24999',
-      category: 'Tecnología',
+      category: 'Tecnologia',
      brand: null,
-      images: []
+      images: ['/catalog/auriculares.jpg'],
    },
    {
      id: 2,
@@ -53,31 +78,32 @@ describe('StoreHomePageComponent', () => {
      brand_id: null,
      slug: 'teclado-mecanico',
      nombre: 'Teclado Mecanico',
-      descripcion: 'Teclado mecánico de prueba',
+      descripcion: 'Teclado mecanico de prueba',
      precio: '18999',
-      category: 'Tecnología',
+      category: 'Tecnologia',
      brand: null,
-      images: []
-    }
+      images: [],
+    },
  ];

  beforeEach(() => {
    vi.restoreAllMocks();
  });

-  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
+  it('renders the products resolved by the route before component init', async () => {
    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+      getProductos: vi.fn(),
    };

    await TestBed.configureTestingModule({
      imports: [StoreHomePageComponent],
      providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -85,51 +111,52 @@ describe('StoreHomePageComponent', () => {

    const element = fixture.nativeElement as HTMLElement;

-    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 1 });
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
    expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
    expect(element.textContent).toContain('Auriculares Bluetooth');
    expect(element.textContent).toContain('Teclado Mecanico');
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/3');
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '1/3',
+    );
+    expect(element.querySelector('img')?.getAttribute('fetchpriority')).toBe('high');
  });

  it('requests the next page when the paginator emits a page change', async () => {
    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(
-          of(
-            createPaginatedResponse(
-              [
-                {
-                  id: 3,
-                  category_id: 12,
-                  brand_id: null,
-                  slug: 'mouse-gamer',
-                  nombre: 'Mouse Gamer',
-                  descripcion: 'Mouse gamer de prueba',
-                  precio: '15999',
-                  category: 'Tecnología',
-                  brand: null,
-                  images: []
-                }
-              ],
-              2,
-              3
-            )
-          )
-        )
+      getProductos: vi.fn().mockReturnValueOnce(
+        of(
+          createPaginatedResponse(
+            [
+              {
+                id: 3,
+                category_id: 12,
+                brand_id: null,
+                slug: 'mouse-gamer',
+                nombre: 'Mouse Gamer',
+                descripcion: 'Mouse gamer de prueba',
+                precio: '15999',
+                category: 'Tecnologia',
+                brand: null,
+                images: [],
+              },
+            ],
+            2,
+            3,
+          ),
+        ),
+      ),
    };

    await TestBed.configureTestingModule({
      imports: [StoreHomePageComponent],
      providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -139,29 +166,29 @@ describe('StoreHomePageComponent', () => {
    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
    fixture.detectChanges();

-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(1, { page: 1 });
-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(2, { page: 2 });
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('2/3');
+    expect(catalogServiceStub.getProductos).toHaveBeenCalledTimes(1);
+    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 2 });
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '2/3',
+    );
    expect(element.textContent).toContain('Mouse Gamer');
  });

  it('disables the paginator while a new page request is in flight', async () => {
    const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(nextPageSubject.asObservable())
+      getProductos: vi.fn().mockReturnValueOnce(nextPageSubject.asObservable()),
    };

    await TestBed.configureTestingModule({
      imports: [StoreHomePageComponent],
      providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -173,8 +200,8 @@ describe('StoreHomePageComponent', () => {

    expect(
      Array.from(element.querySelectorAll('app-paginator button')).every(
-        (button) => (button as HTMLButtonElement).disabled
-      )
+        (button) => (button as HTMLButtonElement).disabled,
+      ),
    ).toBe(true);
    expect(element.textContent).toContain('Actualizando productos...');

@@ -184,24 +211,25 @@ describe('StoreHomePageComponent', () => {

    expect(
      Array.from(element.querySelectorAll('app-paginator button')).some(
-        (button) => !(button as HTMLButtonElement).disabled
-      )
+        (button) => !(button as HTMLButtonElement).disabled,
+      ),
    ).toBe(true);
  });

  it('shows an empty-state message and hides the paginator when there are no products', async () => {
    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse([], 1, 1)))
+      getProductos: vi.fn(),
    };

    await TestBed.configureTestingModule({
      imports: [StoreHomePageComponent],
      providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse([], 1, 1))),
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -211,21 +239,26 @@ describe('StoreHomePageComponent', () => {

    expect(element.textContent).toContain('No hay productos disponibles en este momento.');
    expect(element.querySelector('app-paginator')).toBeNull();
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
  });

-  it('shows an error message when the catalog request fails', async () => {
+  it('shows an error message when the route resolver cannot load the catalog', async () => {
    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
+      getProductos: vi.fn(),
    };

    await TestBed.configureTestingModule({
      imports: [StoreHomePageComponent],
      providers: [
+        provideActivatedRoute({
+          response: null,
+          error: STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+        }),
        {
          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -235,5 +268,6 @@ describe('StoreHomePageComponent', () => {

    expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
    expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
  });
 });
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts
@@ -1,12 +1,25 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';

+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { Product } from '../../../../core/services/catalog/catalog.interface';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeProductsResolvedData,
+} from './store-home-page.resolver';

 interface StoreHomeProductCardViewModel {
  id: number;
@@ -22,14 +35,16 @@ interface StoreHomeProductCardViewModel {
  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
  templateUrl: './store-home-page.component.html',
  styleUrl: './store-home-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StoreHomePageComponent implements OnInit, OnDestroy {
  private readonly catalogService = inject(CatalogService);
+  private readonly route = inject(ActivatedRoute);
  private readonly router = inject(Router);

  private activeRequestId = 0;
  private productsRequestSubscription: Subscription | null = null;
+  protected readonly priorityImageCount = 4;

  protected readonly currentPage = signal(1);
  protected readonly products = signal<Product[]>([]);
@@ -44,11 +59,21 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
      originalPrice: this.parseProductPrice(product.precio),
      discount: null,
      transferPrice: null,
-      imageUrl: product.images?.[0] ?? null
-    }))
+      imageUrl: product.images?.[0] ?? null,
+    })),
  );

  ngOnInit(): void {
+    const resolvedData = this.route.snapshot.data['productsData'] as
+      | StoreHomeProductsResolvedData
+      | undefined;
+
+    if (resolvedData) {
+      this.applyResolvedData(resolvedData);
+
+      return;
+    }
+
    this.loadProducts(1);
  }

@@ -82,9 +107,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
          return;
        }

-        this.products.set(response.data ?? []);
-        this.currentPage.set(response.meta.current_page);
-        this.totalPages.set(response.meta.last_page);
+        this.applyProductsResponse(response);
      },
      error: () => {
        if (requestId !== this.activeRequestId) {
@@ -94,7 +117,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
        this.products.set([]);
        this.totalPages.set(0);
        this.loading.set(false);
-        this.error.set('No pudimos cargar los productos en este momento.');
+        this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
      },
      complete: () => {
        if (requestId !== this.activeRequestId) {
@@ -102,10 +125,33 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
        }

        this.loading.set(false);
-      }
+      },
    });
  }

+  private applyResolvedData(resolvedData: StoreHomeProductsResolvedData): void {
+    if (resolvedData.error) {
+      this.products.set([]);
+      this.totalPages.set(0);
+      this.loading.set(false);
+      this.error.set(resolvedData.error);
+
+      return;
+    }
+
+    if (resolvedData.response) {
+      this.applyProductsResponse(resolvedData.response);
+      this.loading.set(false);
+      this.error.set(null);
+    }
+  }
+
+  private applyProductsResponse(response: ApiPaginatedResponse<Product[]>): void {
+    this.products.set(response.data ?? []);
+    this.currentPage.set(response.meta.current_page);
+    this.totalPages.set(response.meta.last_page);
+  }
+
  private parseProductPrice(price: string): number {
    const parsedPrice = Number(price);

--- a/src/app/features/store/pages/store-home-page/store-home-page.resolver.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.resolver.ts
@@ -0,0 +1,33 @@
+import { inject } from '@angular/core';
+import { ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
+import { Product } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const STORE_HOME_PRODUCTS_ERROR_MESSAGE = 'No pudimos cargar los productos en este momento.';
+
+export interface StoreHomeProductsResolvedData {
+  response: ApiPaginatedResponse<Product[]> | null;
+  error: string | null;
+}
+
+export const storeHomeProductsResolver: ResolveFn<StoreHomeProductsResolvedData> = () => {
+  return inject(CatalogService)
+    .getProductos({ page: 1 })
+    .pipe(
+      map(
+        (response): StoreHomeProductsResolvedData => ({
+          response,
+          error: null,
+        }),
+      ),
+      catchError(() =>
+        of({
+          response: null,
+          error: STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+        }),
+      ),
+    );
+};
--- a/src/app/features/store/store.routes.ts
+++ b/src/app/features/store/store.routes.ts
@@ -4,8 +4,10 @@ import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-la
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { productDetailResolver } from './pages/product-detail-page/product-detail-page.resolver';
 import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
+import { storeHomeProductsResolver } from './pages/store-home-page/store-home-page.resolver';

 export const routes: Routes = [
  {
@@ -14,7 +16,10 @@ export const routes: Routes = [
    children: [
      {
        path: '',
-        component: StoreHomePageComponent
+        component: StoreHomePageComponent,
+        resolve: {
+          productsData: storeHomeProductsResolver,
+        },
      },
      {
        path: 'login',
@@ -23,9 +28,9 @@ export const routes: Routes = [
        children: [
          {
            path: '',
-            component: LoginPageComponent
-          }
-        ]
+            component: LoginPageComponent,
+          },
+        ],
      },
      {
        path: 'register',
@@ -34,24 +39,27 @@ export const routes: Routes = [
        children: [
          {
            path: '',
-            component: RegisterPageComponent
-          }
-        ]
+            component: RegisterPageComponent,
+          },
+        ],
      },
      {
        path: 'producto/:id',
+        resolve: {
+          productDetailData: productDetailResolver,
+        },
        loadComponent: () =>
          import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
+            (m) => m.ProductDetailPageComponent,
+          ),
      },
      {
        path: 'checkout',
        canActivate: [authGuard],
        loadComponent: () =>
          import('./pages/checkout-page/checkout-page.component').then(
-            (m) => m.CheckoutPageComponent
-          )
+            (m) => m.CheckoutPageComponent,
+          ),
      },
      {
        path: 'checkout/status',
@@ -61,47 +69,45 @@ export const routes: Routes = [
            path: ':id',
            loadComponent: () =>
              import('./pages/purchase-status-page/purchase-status-page.component').then(
-                (m) => m.PurchaseStatusPageComponent
-              )
-          }
-        ]
+                (m) => m.PurchaseStatusPageComponent,
+              ),
+          },
+        ],
      },
      {
        path: 'mi-cuenta',
        canActivate: [authGuard],
        loadComponent: () =>
-          import('./pages/account-page/account-layout/account-layout').then(
-            (m) => m.AccountLayout
-          ),
+          import('./pages/account-page/account-layout/account-layout').then((m) => m.AccountLayout),
        children: [
          {
            path: 'datos-personales',
            loadComponent: () =>
              import('./pages/account-page/pages/profile-page/profile-page').then(
-                (m) => m.ProfilePage
-              )
+                (m) => m.ProfilePage,
+              ),
          },
          {
            path: 'compras',
            loadComponent: () =>
              import('./pages/account-page/pages/purchases-page/purchases-page').then(
-                (m) => m.PurchasesPage
-              )
+                (m) => m.PurchasesPage,
+              ),
          },
          {
            path: 'compras/:id',
            loadComponent: () =>
              import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
-                (m) => m.PurchaseDetailPage
-              )
+                (m) => m.PurchaseDetailPage,
+              ),
          },
          {
            path: '',
            redirectTo: 'datos-personales',
-            pathMatch: 'full'
-          }
-        ]
-      }
-    ]
-  }
+            pathMatch: 'full',
+          },
+        ],
+      },
+    ],
+  },
 ];
--- a/src/app/shared/components/product-card/product-card.component.html
+++ b/src/app/shared/components/product-card/product-card.component.html
@@ -1,20 +1,32 @@
-<div class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100">
+<div
+  class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100"
+>
  <!-- Image section -->
  <div class="product-card__image-container position-relative bg-light">
-    @if (imageUrl()) {
-    <img [src]="imageUrl()" [alt]="title()" class="product-card__image w-100 h-100 object-fit-cover" />
+    @if (imageUrl(); as imageSrc) {
+      <img
+        [ngSrc]="imageSrc"
+        [alt]="title()"
+        [priority]="imagePriority()"
+        fill
+        sizes="(min-width: 1200px) 25vw, (min-width: 768px) 50vw, 100vw"
+        class="product-card__image w-100 h-100 object-fit-cover"
+      />
    } @else {
-    <div
-      class="product-card__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted">
-      <i class="fa-solid fa-image fa-2x"></i>
-    </div>
+      <div
+        class="product-card__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted"
+      >
+        <i class="fa-solid fa-image fa-2x"></i>
+      </div>
    }

    <!-- Discount badge in top right -->
    @if (discount() && discount()! > 0) {
-    <span class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1">
-      -{{ discount() }}%
-    </span>
+      <span
+        class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1"
+      >
+        -{{ discount() }}%
+      </span>
    }
  </div>

@@ -26,11 +38,15 @@
    <!-- Prices Area -->
    <div class="product-card__prices d-flex align-items-center justify-content-center gap-2">
      <!-- Discounted (computado) Price -->
-      <span class="product-card__price-discounted text-primary">{{ formattedDiscountedPrice() }}</span>
+      <span class="product-card__price-discounted text-primary">{{
+        formattedDiscountedPrice()
+      }}</span>

      <!-- Original strikethrough Price (only if discount exists) -->
      @if (discount() && discount()! > 0) {
-      <span class="product-card__price-original text-decoration-line-through">{{ formattedOriginalPrice() }}</span>
+        <span class="product-card__price-original text-decoration-line-through">{{
+          formattedOriginalPrice()
+        }}</span>
      }
    </div>

@@ -47,4 +63,4 @@
      </app-button>
    </div>
  </div>
-</div>
+</div>
--- a/src/app/shared/components/product-card/product-card.component.ts
+++ b/src/app/shared/components/product-card/product-card.component.ts
@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
 import { ButtonComponent } from '../button/button.component';

@Component({
  selector: 'app-product-card',
  standalone: true,
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, NgOptimizedImage],
  templateUrl: './product-card.component.html',
  styleUrl: './product-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductCardComponent {
  // Configurable inputs
@@ -17,6 +18,7 @@ export class ProductCardComponent {
  readonly discount = input<number | null>(null);
  readonly transferPrice = input<number | null>(null);
  readonly buttonText = input<string>('Comprar');
+  readonly imagePriority = input<boolean>(false);

  // Interactive events
  readonly buy = output<void>();
Author	SHA1	Message	Date
ncoronel	993aa5823a	feat(product-detail): implement resolver for product details and update component logic for improved error handling feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency style: refactor HTML structure for better readability and maintainability test(product-detail): add unit tests for product detail resolver and component behavior	2026-07-08 16:12:35 -03:00
ncoronel	6c00a3e2bb	feat(store-home): implement resolver for product data and enhance component logic for improved error handling and loading states	2026-07-08 16:04:11 -03:00