feat: add default mobile listing view type environment configuration (#…

…1243) * use 'grid' as standard default setting
intershop · Sep 6, 2022 · e4ec8e7 · e4ec8e7
1 parent 208decc
commit e4ec8e7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git a/src/app/core/configurations/injection-keys.ts b/src/app/core/configurations/injection-keys.ts
@@ -45,6 +45,13 @@ export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE = new InjectionToken<ViewType>('d
   factory: () => environment.defaultProductListingViewType,
 });
 
+export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE = new InjectionToken<ViewType>(
+  'defaultProductListingViewTypeMobile',
+  {
+    factory: () => environment.defaultProductListingViewTypeMobile,
+  }
+);
+
 /**
  * the configured cookie consent options for the application
  */

diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts
@@ -21,7 +21,7 @@ describe('Product Listing Effects', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        CoreStoreModule.forTesting(['router'], [ProductListingEffects]),
+        CoreStoreModule.forTesting(['router', 'configuration'], [ProductListingEffects]),
         RouterTestingModule.withRoutes([{ path: 'some', children: [] }]),
         ShoppingStoreModule.forTesting('productListing'),
       ],

diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.ts
@@ -2,13 +2,15 @@ import { Inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store, select } from '@ngrx/store';
 import { isEqual } from 'lodash-es';
-import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, switchMap, take, withLatestFrom } from 'rxjs/operators';
 
 import {
   DEFAULT_PRODUCT_LISTING_VIEW_TYPE,
+  DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE,
   PRODUCT_LISTING_ITEMS_PER_PAGE,
 } from 'ish-core/configurations/injection-keys';
 import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
+import { getDeviceType } from 'ish-core/store/core/configuration';
 import { selectQueryParam, selectQueryParams } from 'ish-core/store/core/router';
 import {
   applyFilter,
@@ -35,6 +37,7 @@ export class ProductListingEffects {
   constructor(
     @Inject(PRODUCT_LISTING_ITEMS_PER_PAGE) private itemsPerPage: number,
     @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE) private defaultViewType: ViewType,
+    @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE) private defaultViewTypeMobile: ViewType,
     private actions$: Actions,
     private store: Store
   ) {}
@@ -48,9 +51,15 @@ export class ProductListingEffects {
 
   initializeDefaultViewType$ = createEffect(() =>
     this.store.pipe(
+      filter(() => !SSR),
       select(getProductListingViewType),
       whenFalsy(),
-      map(() => setViewType({ viewType: this.defaultViewType }))
+      withLatestFrom(this.store.pipe(select(getDeviceType))),
+      map(([, deviceType]) =>
+        setViewType(
+          deviceType === 'mobile' ? { viewType: this.defaultViewTypeMobile } : { viewType: this.defaultViewType }
+        )
+      )
     )
   );
 

diff --git a/src/app/core/store/shopping/search/search.effects.spec.ts b/src/app/core/store/shopping/search/search.effects.spec.ts
@@ -52,7 +52,7 @@ describe('Search Effects', () => {
 
     TestBed.configureTestingModule({
       imports: [
-        CoreStoreModule.forTesting(['router'], [SearchEffects, ProductListingEffects]),
+        CoreStoreModule.forTesting(['router', 'configuration'], [SearchEffects, ProductListingEffects]),
         RouterTestingModule.withRoutes([
           { path: 'error', children: [] },
           { path: 'search/:searchTerm', children: [] },

diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts
@@ -81,6 +81,7 @@ export interface Environment {
 
   // default viewType used for product listings
   defaultProductListingViewType: ViewType;
+  defaultProductListingViewTypeMobile: ViewType;
 
   // default device type used for initial page responses
   defaultDeviceType: DeviceType;
@@ -148,6 +149,7 @@ export const ENVIRONMENT_DEFAULTS: Omit<Environment, 'icmChannel'> = {
     master: 6,
   },
   defaultProductListingViewType: 'grid',
+  defaultProductListingViewTypeMobile: 'grid',
   defaultDeviceType: 'mobile',
   fallbackLocales: ['en_US', 'de_DE', 'fr_FR'],
   multiSiteLocaleMap: {