diff --git a/src/app/core/configurations/injection-keys.ts b/src/app/core/configurations/injection-keys.ts index 604d97560c..9e1216f8b4 100644 --- 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('d factory: () => environment.defaultProductListingViewType, }); +export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE = new InjectionToken( + '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 index c25c14f428..1300cb9eb4 100644 --- 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 index 0c27a2ee9e..2060563cb1 100644 --- 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 index 175925891e..2e176a61f9 100644 --- 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 index f1c69c381b..ebbbea9047 100644 --- 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; @@ -145,6 +146,7 @@ export const ENVIRONMENT_DEFAULTS: Omit = { master: 6, }, defaultProductListingViewType: 'grid', + defaultProductListingViewTypeMobile: 'grid', defaultDeviceType: 'mobile', multiSiteLocaleMap: { en_US: '/en',