File

feature-libs/storefinder/components/store-finder-store-description/store-finder-store-description.component.ts

Extends

AbstractStoreItemComponent

Metadata

selector cx-store-finder-store-description
templateUrl ./store-finder-store-description.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(storeFinderService: StoreFinderService)
Parameters :
Name Type Optional
storeFinderService StoreFinderService No

Inputs

disableMap
Type : boolean
location
Type : PointOfService

Methods

getDirections
getDirections(location: any)
Parameters :
Name Type Optional
location any No
Returns : string
getFormattedStoreAddress
getFormattedStoreAddress(addressParts: string[])
Parameters :
Name Type Optional
addressParts string[] No
Returns : string

Properties

disableMap
Type : boolean
Decorators :
@Input()
location
Type : PointOfService
Decorators :
@Input()
import { Component, Input } from '@angular/core';
import { PointOfService } from '@spartacus/core';
import { AbstractStoreItemComponent } from '../abstract-store-item/abstract-store-item.component';
import { StoreFinderService } from '@spartacus/storefinder/core';

@Component({
  selector: 'cx-store-finder-store-description',
  templateUrl: './store-finder-store-description.component.html',
})
export class StoreFinderStoreDescriptionComponent extends AbstractStoreItemComponent {
  @Input() location: PointOfService;
  @Input() disableMap: boolean;

  constructor(protected storeFinderService: StoreFinderService) {
    super(storeFinderService);
  }
}
<ng-container *ngIf="location">
  <div class="container">
    <div class="row">
      <article class="cx-store col-md-4">
        <h2>{{ location.displayName || location.name }}</h2>

        <p *ngIf="location.address" class="cx-store-description-address">
          {{ location.address.line1 }} {{ location.address.line2 }} <br />
          {{
            getFormattedStoreAddress([
              location.address.town,
              location.address.postalCode,
              location.address.country.isocode
            ])
          }}
        </p>

        <section class="cx-contact">
          <ul class="cx-list">
            <li class="cx-item">
              <a
                class="cx-link"
                [href]="getDirections(location)"
                target="_blank"
                [attr.aria-label]="
                  'storeFinder.ariaLabelGetDirections' | cxTranslate
                "
                >{{ 'storeFinder.getDirections' | cxTranslate }}</a
              >
            </li>
            <li class="cx-item" *ngIf="location.address?.phone">
              {{ 'storeFinder.call' | cxTranslate }}
              {{ location.address?.phone }}
            </li>
          </ul>
        </section>
        <div class="cx-schedule" *ngIf="location.openingHours">
          <cx-schedule [location]="location">
            <h3>{{ 'storeFinder.storeHours' | cxTranslate }}</h3>
          </cx-schedule>
        </div>

        <div *ngIf="(location.features | json) != '{}'" class="cx-features">
          <div class="row">
            <div class="col-lg-12">
              <h3 class="cx-features-header">
                {{ 'storeFinder.storeFeatures' | cxTranslate }}
              </h3>
            </div>
          </div>

          <article class="row">
            <div
              class="col-lg-12 cx-feature-item"
              *ngFor="let feature of location.features?.entry"
            >
              <div class="cx-feature-value">{{ feature.value }}</div>
            </div>
          </article>
        </div>
      </article>
      <article class="cx-storeMap col-lg-8" *ngIf="!disableMap">
        <cx-store-finder-map [locations]="[location]"></cx-store-finder-map>
      </article>
    </div>
  </div>
</ng-container>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""