File
Implements
Metadata
| selector |
cx-product-list |
| templateUrl |
./product-list.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
sortList
|
sortList(sortCode: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| sortCode |
string
|
No
|
|
|
model$
|
Type : Observable<ProductSearchPage>
|
Default value : this.productListComponentService.model$
|
|
|
|
Private
subscription
|
Default value : new Subscription()
|
|
|
|
viewMode$
|
Default value : new BehaviorSubject<ViewModes>(ViewModes.Grid)
|
|
|
|
ViewModes
|
Default value : ViewModes
|
|
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ProductSearchPage } from '@spartacus/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { PageLayoutService } from '../../../../cms-structure/page/index';
import { ViewConfig } from '../../../../shared/config/view-config';
import { ViewModes } from '../product-view/product-view.component';
import { ProductListComponentService } from './product-list-component.service';
@Component({
selector: 'cx-product-list',
templateUrl: './product-list.component.html',
})
export class ProductListComponent implements OnInit, OnDestroy {
private subscription = new Subscription();
isInfiniteScroll: boolean;
model$: Observable<ProductSearchPage> =
this.productListComponentService.model$;
viewMode$ = new BehaviorSubject<ViewModes>(ViewModes.Grid);
ViewModes = ViewModes;
constructor(
private pageLayoutService: PageLayoutService,
private productListComponentService: ProductListComponentService,
public scrollConfig: ViewConfig
) {}
ngOnInit(): void {
this.isInfiniteScroll = this.scrollConfig.view?.infiniteScroll?.active;
this.subscription.add(
this.pageLayoutService.templateName$
.pipe(take(1))
.subscribe((template) => {
this.viewMode$.next(
template === 'ProductGridPageTemplate'
? ViewModes.Grid
: ViewModes.List
);
})
);
}
sortList(sortCode: string): void {
this.productListComponentService.sort(sortCode);
}
setViewMode(mode: ViewModes): void {
this.viewMode$.next(mode);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
<div class="cx-page" *ngIf="model$ | async as model">
<section class="cx-page-section">
<div class="container">
<div class="row">
<div class="col-12 col-lg-12" *ngIf="viewMode$ | async as viewMode">
<div class="cx-sorting top">
<div class="row">
<label
class="form-group cx-sort-dropdown col-12 col-lg-4 mr-auto"
>
<span>{{ 'productList.sortBy' | cxTranslate }}</span>
<cx-sorting
[sortOptions]="model.sorts"
(sortListEvent)="sortList($event)"
[selectedOption]="model.pagination.sort"
placeholder="{{ 'productList.sortBy' | cxTranslate }}"
></cx-sorting>
</label>
<div *ngIf="!isInfiniteScroll" class="col-auto">
<div
class="cx-pagination"
[attr.aria-label]="
'productList.productSearchPagination' | cxTranslate
"
>
<cx-pagination
[pagination]="model.pagination"
queryParam="currentPage"
[defaultPage]="0"
></cx-pagination>
</div>
</div>
<div class="col-auto ml-auto ml-lg-0">
<cx-product-view
(modeChange)="setViewMode($event)"
[mode]="viewMode"
></cx-product-view>
</div>
</div>
</div>
<div class="cx-product-container">
<!-- Product list when using pagination -->
<ng-container *ngIf="!isInfiniteScroll; else infiniteScroll">
<ng-container *ngIf="viewMode === ViewModes.Grid">
<div class="row">
<cx-product-grid-item
*ngFor="let product of model?.products"
[product]="product"
class="col-12 col-sm-6 col-md-4"
></cx-product-grid-item>
</div>
</ng-container>
<ng-container *ngIf="viewMode === ViewModes.List">
<cx-product-list-item
*ngFor="let product of model?.products"
[product]="product"
class="cx-product-search-list"
></cx-product-list-item>
</ng-container>
</ng-container>
<!-- Product list when using infinite scroll -->
<ng-template #infiniteScroll>
<cx-product-scroll
[scrollConfig]="scrollConfig"
[model]="model"
[inputViewMode]="viewMode"
></cx-product-scroll>
</ng-template>
</div>
<div class="cx-sorting bottom">
<div class="row">
<label
class="form-group cx-sort-dropdown col-12 col-lg-4 mr-auto"
>
<span>{{ 'productList.sortBy' | cxTranslate }}</span>
<cx-sorting
[sortOptions]="model.sorts"
(sortListEvent)="sortList($event)"
[selectedOption]="model.pagination.sort"
placeholder="{{ 'productList.sortBy' | cxTranslate }}"
></cx-sorting>
</label>
<div
*ngIf="!isInfiniteScroll"
class="col-auto"
[attr.aria-label]="
'productList.productSearchPagination' | cxTranslate
"
>
<div class="cx-pagination">
<cx-pagination
[pagination]="model.pagination"
queryParam="currentPage"
[defaultPage]="0"
></cx-pagination>
</div>
</div>
<div class="col-auto ml-auto ml-lg-0">
<cx-product-view
(modeChange)="setViewMode($event)"
[mode]="viewMode"
></cx-product-view>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Legend
Html element with directive