storefrontapp documentation
  1. Components
  2. CompactAddToCartComponent

File

integration-libs/epd-visualization/components/visual-picking/visual-picking-tab/product-list/compact-add-to-cart/compact-add-to-cart.component.ts

Extends

AddToCartComponent

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector cx-epd-visualization-compact-add-to-cart
templateUrl ./compact-add-to-cart.component.html

Index

Properties
Methods
Inputs

Inputs

product
Type : Product
Inherited from AddToCartComponent
Defined in AddToCartComponent:38

As long as we do not support #5026, we require product input, as we need a reference to the product model to fetch the stock data.
productCode
Type : string
Inherited from AddToCartComponent
Defined in AddToCartComponent:31
showQuantity
Type : boolean
Default value : true
Inherited from AddToCartComponent
Defined in AddToCartComponent:32

Methods

addToCart
addToCart()
Inherited from AddToCartComponent
Defined in AddToCartComponent:140
Returns : void
getInventory
getInventory()
Inherited from AddToCartComponent
Defined in AddToCartComponent:125

In specific scenarios, we need to omit displaying the stock level or append a plus to the value. When backoffice forces a product to be in stock, omit showing the stock level. When product stock level is limited by a threshold value, append '+' at the end. When out of stock, display no numerical value.

Returns : string
ngOnDestroy
ngOnDestroy()
Inherited from AddToCartComponent
Defined in AddToCartComponent:177
Returns : void
ngOnInit
ngOnInit()
Inherited from AddToCartComponent
Defined in AddToCartComponent:86
Returns : void
Protected openModal
openModal()
Inherited from AddToCartComponent
Defined in AddToCartComponent:158

Provides required data and opens AddedToCartDialogComponent modal

Returns : void
Protected setStockInfo
setStockInfo(product: Product)
Inherited from AddToCartComponent
Defined in AddToCartComponent:108
Parameters :
Name Type Optional
product Product No
Returns : void
updateCount
updateCount(value: number)
Inherited from AddToCartComponent
Defined in AddToCartComponent:136
Parameters :
Name Type Optional
value number No
Returns : void

Properties

addToCartForm
Default value : new FormGroup({ quantity: new FormControl(1, { updateOn: 'blur' }), })
Inherited from AddToCartComponent
Defined in AddToCartComponent:54
hasStock
Type : boolean
Default value : false
Inherited from AddToCartComponent
Defined in AddToCartComponent:43
inventoryThreshold
Type : boolean
Default value : false
Inherited from AddToCartComponent
Defined in AddToCartComponent:44
maxQuantity
Type : number
Inherited from AddToCartComponent
Defined in AddToCartComponent:40
modalRef
Type : ModalRef
Inherited from AddToCartComponent
Defined in AddToCartComponent:41
Protected numberOfEntriesBeforeAdd
Type : number
Default value : 0
Inherited from AddToCartComponent
Defined in AddToCartComponent:50
product
Type : Product
Decorators :
@Input()
Inherited from AddToCartComponent
Defined in AddToCartComponent:38

As long as we do not support #5026, we require product input, as we need a reference to the product model to fetch the stock data.
productCode
Type : string
Decorators :
@Input()
Inherited from AddToCartComponent
Defined in AddToCartComponent:31
quantity
Type : number
Default value : 1
Inherited from AddToCartComponent
Defined in AddToCartComponent:49
showInventory$
Type : Observable<boolean | undefined> | undefined
Default value : this.component?.data$.pipe(map((data) => data.inventoryDisplay))
Inherited from AddToCartComponent
Defined in AddToCartComponent:46
showQuantity
Default value : true
Decorators :
@Input()
Inherited from AddToCartComponent
Defined in AddToCartComponent:32
subscription
Type : Subscription
Inherited from AddToCartComponent
Defined in AddToCartComponent:52 
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { AddToCartComponent } from '@spartacus/storefront';

@Component({
  selector: 'cx-epd-visualization-compact-add-to-cart',
  templateUrl: './compact-add-to-cart.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CompactAddToCartComponent extends AddToCartComponent {}

<form *ngIf="productCode" [formGroup]="addToCartForm" (submit)="addToCart()">
  <button
    *ngIf="hasStock"
    class="btn btn-sm btn-primary btn-block"
    type="submit"
    [disabled]="quantity <= 0 || quantity > maxQuantity"
  >
    <cx-icon class="fa fa-cart-plus"></cx-icon>
  </button>
</form>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""