From 96737be6edc32c9f6fa8b0cae2093a7e9d7918f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Silke=20Gr=C3=BCber?= Date: Fri, 11 Aug 2023 14:18:08 +0200 Subject: [PATCH] fix: display first product image after switching products on product detail page (#1474) --- .../product-images/product-images.component.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/pages/product/product-images/product-images.component.ts b/src/app/pages/product/product-images/product-images.component.ts index 5ec47b995c..e82be04757 100644 --- a/src/app/pages/product/product-images/product-images.component.ts +++ b/src/app/pages/product/product-images/product-images.component.ts @@ -1,12 +1,13 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core'; import { Observable } from 'rxjs'; -import { map, shareReplay } from 'rxjs/operators'; +import { distinctUntilKeyChanged, map, shareReplay, tap } from 'rxjs/operators'; import SwiperCore, { Navigation } from 'swiper'; import { SwiperComponent } from 'swiper/angular'; import { ProductContextFacade } from 'ish-core/facades/product-context.facade'; import { ProductView } from 'ish-core/models/product-view/product-view.model'; import { ProductHelper } from 'ish-core/models/product/product.model'; +import { whenTruthy } from 'ish-core/utils/operators'; import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component'; SwiperCore.use([Navigation]); @@ -36,7 +37,16 @@ export class ProductImagesComponent implements OnInit { constructor(private context: ProductContextFacade) {} ngOnInit() { - this.product$ = this.context.select('product'); + this.product$ = this.context.select('product').pipe( + whenTruthy(), + distinctUntilKeyChanged('sku'), + tap(() => { + if (this.carousel?.swiperRef?.activeIndex) { + this.setActiveSlide(0); + } + }), + shareReplay(1) + ); this.zoomImageIds$ = this.getImageViewIDs$('ZOOM').pipe(shareReplay(1)); }