fix: respect selected category when switching variations on product d…

…etail page
intershop · Feb 24, 2020 · 9ae6302 · 9ae6302
1 parent ba687cc
commit 9ae6302
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/src/app/pages/product/product-page.component.spec.ts b/src/app/pages/product/product-page.component.spec.ts
@@ -9,6 +9,7 @@ import { MockComponent } from 'ng-mocks';
 import { noop } from 'rxjs';
 
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
+import { Category } from 'ish-core/models/category/category.model';
 import { VariationSelection } from 'ish-core/models/product-variation/variation-selection.model';
 import { VariationProductView } from 'ish-core/models/product-view/product-view.model';
 import { ProductRetailSet } from 'ish-core/models/product/product-retail-set.model';
@@ -18,10 +19,12 @@ import { Product, ProductCompletenessLevel } from 'ish-core/models/product/produ
 import { ProductRoutePipe } from 'ish-core/routing/product/product-route.pipe';
 import { ApplyConfiguration } from 'ish-core/store/configuration';
 import { coreReducers } from 'ish-core/store/core-store.module';
+import { LoadCategorySuccess, SelectCategory } from 'ish-core/store/shopping/categories';
 import { LoadProductSuccess, LoadProductVariationsSuccess, SelectProduct } from 'ish-core/store/shopping/products';
 import { shoppingReducers } from 'ish-core/store/shopping/shopping-store.module';
 import { findAllIshElements } from 'ish-core/utils/dev/html-query-utils';
 import { TestStore, ngrxTesting } from 'ish-core/utils/dev/ngrx-testing';
+import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
 import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 import { RecentlyViewedComponent } from 'ish-shared/components/recently/recently-viewed/recently-viewed.component';
@@ -81,6 +84,11 @@ describe('Product Page Component', () => {
     router = TestBed.get(Router);
     store$ = TestBed.get(TestStore);
     store$.dispatch(new ApplyConfiguration({ features: ['recently'] }));
+
+    store$.dispatch(
+      new LoadCategorySuccess({ categories: categoryTree([{ uniqueId: 'A', categoryPath: ['A'] } as Category]) })
+    );
+    store$.dispatch(new SelectCategory({ categoryId: 'A' }));
   });
 
   it('should be created', () => {
@@ -155,10 +163,12 @@ describe('Product Page Component', () => {
       a2: 'D',
     };
 
+    fixture.detectChanges();
+
     component.variationSelected(selection, product);
     tick(500);
 
-    expect(location.path()).toMatchInlineSnapshot(`"/sku333"`);
+    expect(location.path()).toMatchInlineSnapshot(`"/sku333-catA"`);
   }));
 
   describe('redirecting to default variation', () => {
@@ -192,7 +202,7 @@ describe('Product Page Component', () => {
       fixture.detectChanges();
       tick(500);
 
-      expect(location.path()).toMatchInlineSnapshot(`"/sku222"`);
+      expect(location.path()).toMatchInlineSnapshot(`"/sku222-catA"`);
     }));
 
     it('should not redirect to default variation for master product if advanced variation handling is activated', fakeAsync(() => {

diff --git a/src/app/pages/product/product-page.component.ts b/src/app/pages/product/product-page.component.ts
@@ -1,7 +1,7 @@
 import { ApplicationRef, ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable, ReplaySubject, Subject, of } from 'rxjs';
-import { filter, first, map, switchMap, take, takeUntil } from 'rxjs/operators';
+import { filter, map, switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
 
 import { AppFacade } from 'ish-core/facades/app.facade';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
@@ -137,19 +137,19 @@ export class ProductPageComponent implements OnInit, OnDestroy {
   }
 
   redirectToVariation(variation: VariationProductView, replaceUrl = false) {
-    const route = variation && generateProductUrl(variation);
-    if (route) {
-      this.appRef.isStable
-        .pipe(
-          whenTruthy(),
-          first()
-        )
-        .subscribe(() => {
-          this.ngZone.run(() => {
-            this.router.navigateByUrl(route, { replaceUrl });
-          });
+    this.appRef.isStable
+      .pipe(
+        filter(() => !!variation),
+        whenTruthy(),
+        take(1),
+        map(() => variation),
+        withLatestFrom(this.category$)
+      )
+      .subscribe(([product, category]) => {
+        this.ngZone.run(() => {
+          this.router.navigateByUrl(generateProductUrl(product, category), { replaceUrl });
         });
-    }
+      });
   }
 
   ngOnDestroy() {