fix: do not merge product filter query params by default but only for…

… products of the product listing component (#1252)

BREAKING CHANGE: Changed default queryParamsHandling for product detail links via product image or product name component (see [Migrations / 3.0 to 3.1](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#30-to-31) for more details).

docs/guides/migrations.md

@@ -7,6 +7,11 @@ kb_sync_latest_only
 
 # Migrations
 
+## 3.0 to 3.1
+
+The default value of the input parameter ['queryParamsHandling'](https://angular.io/api/router/QueryParamsHandling) has been changed from 'merge' to '' for the components product-name.component and product-image.component.
+This has been done to prevent an unintentional application of filters for product variation master links if the product detail link does not originates from a product listing context (product list page, search result page).
+
 ## 2.4 to 3.0
 
 With the 2.4.1 Hotfix we introduced a more fixed Node.js version handling to the version used and tested by us.

src/app/shared/components/product/product-image/product-image.component.html

@@ -3,7 +3,7 @@
     *ngIf="link; else image"
     data-testing-id="product-image-link"
     [routerLink]="linkTarget || (productURL$ | async)"
-    [queryParamsHandling]="queryParamsHandling"
+    [queryParamsHandling]="computedQueryParamsHandling"
     ><ng-container *ngTemplateOutlet="image"></ng-container>
   </a>
 </div>

src/app/shared/components/product/product-image/product-image.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, Optional } from '@angular/core';
 import { QueryParamsHandling } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, combineLatest, of } from 'rxjs';
@@ -26,7 +26,7 @@ export class ProductImageComponent implements OnInit {
   @Input() link = false;
   @Input() linkTarget: string;
 
-  @Input() queryParamsHandling: QueryParamsHandling = 'merge';
+  @Input() queryParamsHandling: QueryParamsHandling = '';
   /**
    * The image type (size), i.e. 'S' for the small image.
    */
@@ -44,7 +44,13 @@ export class ProductImageComponent implements OnInit {
   productImage$: Observable<Image>;
   defaultAltText$: Observable<string>;
 
-  constructor(private translateService: TranslateService, private context: ProductContextFacade) {}
+  computedQueryParamsHandling: QueryParamsHandling;
+
+  constructor(
+    private translateService: TranslateService,
+    private context: ProductContextFacade,
+    @Optional() @Inject('PRODUCT_QUERY_PARAMS_HANDLING') private queryParamsHandlingInjector: QueryParamsHandling
+  ) {}
 
   ngOnInit() {
     this.productURL$ = this.context.select('productURL');
@@ -55,5 +61,7 @@ export class ProductImageComponent implements OnInit {
       this.translateService.get('product.image.text.alttext'),
       of(this.imageView && `${this.imageView} ${this.imageType}`),
     ]).pipe(map(parts => parts.filter(x => !!x).join(' ')));
+
+    this.computedQueryParamsHandling = this.queryParamsHandlingInjector ?? this.queryParamsHandling;
   }
 }

src/app/shared/components/product/product-listing/product-listing.component.ts

@@ -12,6 +12,8 @@ import { whenFalsy, whenTruthy } from 'ish-core/utils/operators';
   selector: 'ish-product-listing',
   templateUrl: './product-listing.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // merged query parameters for product detail links are needed to apply previously selected filter options for variation masters too
+  providers: [{ provide: 'PRODUCT_QUERY_PARAMS_HANDLING', useValue: 'merge' }],
 })
 export class ProductListingComponent implements OnInit, OnChanges, OnDestroy {
   @Input() categoryId: string;

src/app/shared/components/product/product-name/product-name.component.html

@@ -5,7 +5,7 @@
         class="product-title"
         data-testing-id="product-name-link"
         [routerLink]="productURL$ | async"
-        [queryParamsHandling]="queryParamsHandling"
+        [queryParamsHandling]="computedQueryParamsHandling"
         >{{ alternate || productName }}</a
       >
     </ng-container>

src/app/shared/components/product/product-name/product-name.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, Optional } from '@angular/core';
 import { QueryParamsHandling } from '@angular/router';
 import { Observable } from 'rxjs';
 
@@ -12,17 +12,24 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 export class ProductNameComponent implements OnInit {
   @Input() link = true;
   @Input() alternate: string;
-  @Input() queryParamsHandling: QueryParamsHandling = 'merge';
+  @Input() queryParamsHandling: QueryParamsHandling = '';
 
   productName$: Observable<string>;
   productURL$: Observable<string>;
   visible$: Observable<boolean>;
 
-  constructor(private context: ProductContextFacade) {}
+  computedQueryParamsHandling: QueryParamsHandling;
+
+  constructor(
+    private context: ProductContextFacade,
+    @Optional() @Inject('PRODUCT_QUERY_PARAMS_HANDLING') private queryParamsHandlingInjector: QueryParamsHandling
+  ) {}
 
   ngOnInit() {
     this.productName$ = this.context.select('product', 'name');
     this.productURL$ = this.context.select('productURL');
     this.visible$ = this.context.select('displayProperties', 'name');
+
+    this.computedQueryParamsHandling = this.queryParamsHandlingInjector ?? this.queryParamsHandling;
   }
 }