File
Metadata
| selector |
cx-store-finder-list |
| templateUrl |
./store-finder-list.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
hideStoreDetails
|
hideStoreDetails()
|
|
|
|
|
|
selectStoreItemList
|
selectStoreItemList(index: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| index |
number
|
No
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
isDetailsModeVisible
|
Type : boolean
|
|
|
|
locations
|
Type : any
|
Decorators :
@Input()
|
|
|
|
selectedStoreIndex
|
Type : number
|
|
|
|
useMylocation
|
Type : boolean
|
Decorators :
@Input()
|
|
|
import { DOCUMENT } from '@angular/common';
import { Component, Inject, Input, ViewChild } from '@angular/core';
import { PointOfService } from '@spartacus/core';
import { StoreFinderMapComponent } from '../../store-finder-map/store-finder-map.component';
import { ICON_TYPE } from '@spartacus/storefront';
import { StoreFinderService } from '@spartacus/storefinder/core';
@Component({
selector: 'cx-store-finder-list',
templateUrl: './store-finder-list.component.html',
})
export class StoreFinderListComponent {
@Input()
locations: any;
@Input()
useMylocation: boolean;
@ViewChild('storeMap')
storeMap: StoreFinderMapComponent;
selectedStore: PointOfService;
selectedStoreIndex: number;
isDetailsModeVisible: boolean;
storeDetails: PointOfService;
iconTypes = ICON_TYPE;
constructor(
private storeFinderService: StoreFinderService,
@Inject(DOCUMENT) private document: any
) {
this.isDetailsModeVisible = false;
}
centerStoreOnMapByIndex(index: number, location: PointOfService): void {
this.showStoreDetails(location);
this.selectedStoreIndex = index;
this.selectedStore = location;
this.storeMap.centerMap(
this.storeFinderService.getStoreLatitude(this.locations.stores[index]),
this.storeFinderService.getStoreLongitude(this.locations.stores[index])
);
}
selectStoreItemList(index: number): void {
this.selectedStoreIndex = index;
const storeListItem = this.document.getElementById('item-' + index);
storeListItem.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
showStoreDetails(location: PointOfService) {
this.isDetailsModeVisible = true;
this.storeDetails = location;
}
hideStoreDetails() {
this.isDetailsModeVisible = false;
this.selectedStoreIndex = undefined;
this.selectedStore = undefined;
this.storeMap.renderMap();
}
}
<ng-container *ngIf="locations">
<div class="container mb-2">
<div class="row" *ngIf="locations?.pagination">
<div class="col-md-12">
<cx-store-finder-pagination-details
[pagination]="locations.pagination"
></cx-store-finder-pagination-details>
</div>
<div class="text-left cx-back-wrapper">
<button
class="btn btn-block btn-action cx-back"
*ngIf="isDetailsModeVisible"
(click)="hideStoreDetails()"
>
<cx-icon [type]="iconTypes.CARET_LEFT"></cx-icon>
{{ 'storeFinder.back' | cxTranslate }}
</button>
</div>
</div>
<div *ngIf="locations?.stores" class="row cx-columns">
<div class="col-md-4 cx-address-col">
<div class="cx-store-details" *ngIf="isDetailsModeVisible">
<cx-store-finder-store-description
[location]="storeDetails"
[disableMap]="true"
></cx-store-finder-store-description>
</div>
<ol class="cx-list" *ngIf="!isDetailsModeVisible">
<li
*ngFor="let location of locations?.stores; let i = index"
id="{{ 'item-' + i }}"
[ngClass]="{
'cx-selected-item': selectedStoreIndex === i
}"
class="cx-list-items"
>
<cx-store-finder-list-item
[location]="location"
[locationIndex]="i"
[displayDistance]="useMylocation"
[useClickEvent]="true"
(storeItemClick)="centerStoreOnMapByIndex($event, location)"
[listOrderLabel]="
i +
locations.pagination.currentPage *
locations.pagination.pageSize +
1
"
></cx-store-finder-list-item>
</li>
</ol>
</div>
<div class="col-md-8 cx-map-col">
<cx-store-finder-map
#storeMap
[locations]="locations.stores"
(selectedStoreItem)="selectStoreItemList($event)"
></cx-store-finder-map>
</div>
</div>
<!-- mobile tabs for column set only -->
<div *ngIf="locations?.stores" class="cx-columns-mobile">
<ul ngbNav #nav="ngbNav">
<li ngbNavItem>
<a ngbNavLink>
{{ 'storeFinder.listView' | cxTranslate }}
</a>
<ng-template ngbNavContent>
<div class="cx-address-col">
<div class="cx-store-details" *ngIf="isDetailsModeVisible">
<cx-store-finder-store-description
[location]="storeDetails"
[disableMap]="true"
></cx-store-finder-store-description>
</div>
<ol class="cx-list" *ngIf="!isDetailsModeVisible">
<li
*ngFor="let location of locations?.stores; let i = index"
id="{{ 'item-' + i }}"
[ngClass]="{
'cx-selected-item': selectedStoreIndex === i
}"
class="cx-list-items"
>
<cx-store-finder-list-item
[location]="location"
[locationIndex]="i"
[displayDistance]="useMylocation"
[useClickEvent]="true"
(storeItemClick)="centerStoreOnMapByIndex($event, location)"
[listOrderLabel]="
i +
locations.pagination.currentPage *
locations.pagination.pageSize +
1
"
></cx-store-finder-list-item>
</li>
</ol>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>
{{ 'storeFinder.mapView' | cxTranslate }}
</a>
<ng-template ngbNavContent>
<div class="cx-map-col">
<cx-store-finder-map
#storeMap
[locations]="selectedStore ? [selectedStore] : locations.stores"
(selectedStoreItem)="selectStoreItemList($event)"
></cx-store-finder-map>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
<!-- mobile tabs end -->
<div *ngIf="!locations?.stores" class="row">
<div class="col-md-12 cx-not-found">
{{ 'storeFinder.noStoreFound' | cxTranslate }}
</div>
</div>
</div>
</ng-container>
Legend
Html element with directive