File
Metadata
| selector |
cx-store-finder-search |
| templateUrl |
./store-finder-search.component.html |
Methods
|
findStores
|
findStores(address: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| address |
string
|
No
|
|
|
onKey
|
onKey(event: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
any
|
No
|
|
|
viewStoresWithMyLoc
|
viewStoresWithMyLoc()
|
|
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
searchBox
|
Type : FormControl
|
Default value : new FormControl()
|
|
|
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { RoutingService } from '@spartacus/core';
import { ICON_TYPE } from '@spartacus/storefront';
@Component({
selector: 'cx-store-finder-search',
templateUrl: './store-finder-search.component.html',
})
export class StoreFinderSearchComponent {
searchBox: FormControl = new FormControl();
iconTypes = ICON_TYPE;
constructor(private routingService: RoutingService) {}
findStores(address: string) {
this.routingService.go(['store-finder/find'], {
queryParams: {
query: address,
},
});
}
viewStoresWithMyLoc() {
this.routingService.go(['store-finder/find'], {
queryParams: {
useMyLocation: true,
},
});
}
onKey(event: any) {
if (
this.searchBox.value &&
this.searchBox.value.length &&
event.key === 'Enter'
) {
this.findStores(this.searchBox.value);
}
}
}
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-7">
<div class="form-group search-wrapper">
<input
#queryInput
[formControl]="searchBox"
(keyup)="onKey($event)"
type="text"
class="form-control"
[attr.aria-label]="'common.search' | cxTranslate"
placeholder="{{ 'storeFinder.searchBox' | cxTranslate }}"
/>
<cx-icon
[type]="iconTypes.SEARCH"
[attr.aria-label]="'common.search' | cxTranslate"
class="search"
(keyup)="onKey($event)"
[routerLink]="['/store-finder/find']"
[queryParams]="{ query: queryInput.value }"
[ngClass]="{
'disabled-action': !(queryInput.value && queryInput.value.length)
}"
></cx-icon>
</div>
</div>
<div class="col-md-12 col-lg-5">
<div class="row cx-search-links mb-3">
<div class="col-6">
<button
(click)="viewStoresWithMyLoc()"
class="btn btn-primary btn-block"
>
{{ 'storeFinder.useMyLocation' | cxTranslate }}
</button>
</div>
<div class="col-6">
<button
[routerLink]="['/store-finder/view-all']"
class="btn btn-primary btn-block"
>
{{ 'storeFinder.viewAllStores' | cxTranslate }}
</button>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive