File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-wish-list-item |
| templateUrl |
./wish-list-item.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
isLoading
|
Type : boolean
|
Default value : false
|
|
|
|
isLoading
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
remove
|
Default value : new EventEmitter<OrderEntry>()
|
Decorators :
@Output()
|
|
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { OrderEntry } from '@spartacus/core';
@Component({
selector: 'cx-wish-list-item',
templateUrl: './wish-list-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WishListItemComponent {
@Input()
isLoading = false;
@Input() cartEntry: OrderEntry;
@Output()
remove = new EventEmitter<OrderEntry>();
removeEntry(item: OrderEntry) {
this.remove.emit(item);
}
}
<div class="row">
<!-- Item Image -->
<div class="cx-image-container col-2">
<a
[routerLink]="{ cxRoute: 'product', params: cartEntry.product } | cxUrl"
tabindex="-1"
>
<cx-media
[container]="cartEntry.product.images?.PRIMARY"
format="thumbnail"
></cx-media>
</a>
</div>
<!-- Item Information -->
<div class="cx-info col-10">
<div class="cx-info-container row">
<!-- Item Description -->
<div class="col-md-5 col-lg-5 col-xl-5">
<div *ngIf="cartEntry.product.name" class="cx-name">
<a
class="cx-link"
[routerLink]="
{ cxRoute: 'product', params: cartEntry.product } | cxUrl
"
><h2>{{ cartEntry.product.name }}</h2></a
>
</div>
<div *ngIf="cartEntry.product.code" class="cx-code">
{{ 'cartItems.id' | cxTranslate }} {{ cartEntry.product.code }}
</div>
<!-- Variants -->
<ng-container *ngIf="cartEntry.product.baseOptions?.length">
<div
*ngFor="
let variant of cartEntry.product.baseOptions[0]?.selected
?.variantOptionQualifiers
"
class="cx-property"
>
<div class="cx-label" *ngIf="variant.name && variant.value">
{{ variant.name }}: {{ variant.value }}
</div>
</div>
</ng-container>
</div>
<!-- Item Price -->
<div
*ngIf="cartEntry.basePrice"
class="cx-price col-md-3 col-lg-4 col-xl-4"
>
<div class="cx-label d-block d-md-none d-lg-none d-xl-none">
{{ 'cartItems.itemPrice' | cxTranslate }}
</div>
<div *ngIf="cartEntry.basePrice" class="cx-value">
{{ cartEntry.basePrice?.formattedValue }}
</div>
</div>
<!-- Total -->
<div class="col-sm-8 col-md-4 col-lg-3 col-xl-3 cx-add-to-cart">
<cx-add-to-cart
*ngIf="
cartEntry.product.stock.stockLevelStatus !== 'outOfStock';
else outOfStock
"
[showQuantity]="false"
[product]="cartEntry.product"
></cx-add-to-cart>
<ng-template #outOfStock>
<span class="cx-out-of-stock">
{{ 'addToCart.outOfStock' | cxTranslate }}
</span>
</ng-template>
</div>
</div>
<div class="cx-return-button col-12">
<button
class="btn cx-action-link"
(click)="removeEntry(cartEntry)"
[disabled]="isLoading"
>
{{ 'common.remove' | cxTranslate }}
</button>
</div>
</div>
</div>
Legend
Html element with directive