Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. AddToCartComponent

File

projects/congarevenuecloud/elements/src/lib/button/add-to-cart/add-to-cart.component.ts

Description

The Add to cart component is a button associated with controls for updating the quantity of cart line items before they are added to user"s active cart.

When a user clicks on Add to Cart component, a modal window opens up to the user. The modal window displays the selected line item details. These details include item name, product code, quantity, price. A cart total price and checkout button are also shown in the modal window.

The add to cart component also shows a dropdown with further actions that can be taken on the product if it is also an asset.

Preview

Usage

Example :
import { ButtonModule } from "@congarevenuecloud/elements";
@NgModule({
imports: [ButtonModule, ...]
})
export class AppModule {}
Example :
// Basic Usage
```typescript
<apt-add-to-cart [product]="product"></apt-add-to-cart>
Example :
// All input and output options.
```typescript
<apt-add-to-cart
            [product]="product"
            [showQuantityControls]="quantityControlsShowing"
            [disabled]="isDisabled"
            [quantity]="quantity"
            [configurationEnabled]="isConfigEnabled"
            [configurationRoute]="route/to/configure/page"
            [trigger]="willTrigger"
            [btnClass]="classOfButton"
            [size]="lg"
            [assetRoute]="/assets"
            (onAddToCart)="handleAddToCart($event)"></apt-add-to-cart>

Implements

OnInit OnChanges OnDestroy

Metadata

selector apt-add-to-cart
styleUrls ./add-to-cart.component.scss
templateUrl ./add-to-cart.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(cartService: CartService, secondaryCartService: SecondaryCartService, storefrontService: StorefrontService, assetModalService: AssetModalService, araiService: AppliedRuleActionInfoService, revalidateCartService: RevalidateCartService, exceptionService: ExceptionService, router: Router, productOptionService: ProductOptionService, userService: UserService, productService: ProductService, assetService: AssetService)

Constructor for Add to Cart Component for injecting dependencies.

Parameters :
Name Type Optional Description
cartService CartService No

Instance of CartService
secondaryCartService SecondaryCartService No
storefrontService StorefrontService No

Instance of StorefrontService
assetModalService AssetModalService No

Instance of AssetModalService
araiService AppliedRuleActionInfoService No

Instance of AppliedRuleActionInfoService
revalidateCartService RevalidateCartService No
exceptionService ExceptionService No

Instance of ExceptionService
router Router No

Instance of Angular Router
productOptionService ProductOptionService No

Instance of ProductOptionService
userService UserService No

Instance of UserService
productService ProductService No
assetService AssetService No

Inputs

aboEnabled
Type : boolean
Default value : true

Flag defines if ABO is enabled.
assetRoute
Type : string
Default value : ''

A string propery to define the route for the asset page.
btnClass
Type : string
Default value : 'btn-outline-primary'

Bootstrap class to set on this button.
cart
Type : Cart

Optional cart for bundle products. Will override cart input
cartItems
Type : Array<CartItem>

Optional cart item list for bundle products. Will override product input
configurationEnabled
Type : boolean
Default value : true

Flag to enable configuration for this component.
customButtonActions
Type : ButtonAction[]

An array of custom button actions that can be displayed or performed by the component.
disabled
Type : boolean
Default value : false

Flag to disable the button if not valid.
enableOneTime
Type : boolean

Flag to check if enableOneTime is true or false
label
Type : string
Default value : 'COMMON.ADD_TO_CART'

Label to use for this control.
product
Type : Product

Product record associated with this component.
quantity
Type : number
Default value : 1

Initial quantity to set for the component. Defaults to 1.
showQuantityControls
Type : boolean
Default value : true

Flag to show number input beside the add to cart button.
size
Type : "sm" | "md" | "lg"
Default value : 'md'

Define the size of the add to cart input
skipRules
Type : boolean
Default value : false

Rules to be skipped or not.

Outputs

onAddToCart
Type : EventEmitter<Array<CartItem>>

Event emitter called when something is added to the cart.
updateProductQuantity
Type : EventEmitter<ItemRequest>

Event emitter called when quantity is updated.

Methods

addToCart
addToCart()

The method is fired when user clicks on Add to Cart button. Runs a constraint rule engine to look for any product recommendations for the selected cart line item. Fetches the price of the selected line item, opens up a modal window to display the price, quantity and name of the selected line item. The selected item is also added to user's current active cart.

Returns : void
changeQty
changeQty(product: Product, qty: number)

The method is fired when user tries to update quantity for given product.

Parameters :
Name Type Optional Description
product Product No

is a instance of Product
qty number No

is of type number, pass the quantity for the product
Returns : void

Properties

isLoggedIn
Type : boolean
Default value : false

Flag to check user is loggedin or not

 
<ng-container>
  <!-- For normal screens -->
  <div>
    <form [ngClass]="inputClass">
      <div class="align-items-baseline d-flex justify-content-center input-group-sm py-1" id="quantity"
        *ngIf="showQuantityControls">
        <label [for]="'quantity' + product?.Id" class="mr-3">{{'COMMON.QUANTITY' | translate}}</label>
        <input type="number" min="1" class="form-control mb-2 w-50" (change)="changeQty(product, quantity)"
          [(ngModel)]="quantity" min="1" name="quantity" [id]="'quantity' + product?.Id" />
      </div>
      <div class="d-flex add-action-container" *ngIf="view$ | async as view">
        <ng-container *ngIf="view?.actions?.length > 0; else disabled">
          <button class="btn btn-block" [disabled]="view?.disabled || view.actions[0]?.enabled === false"
            [ladda]="loading" [attr.data-style]="'zoom-in'" [ngClass]="buttonClass" (click)="view.actions[0]?.onClick()"
            type="button">
            {{view.actions[0]?.label | translate}}
          </button>
          <button type="button" class="btn dropdown-toggle dropdown-toggle-split"
            *ngIf="(isLoggedIn$ | async) === true && view.actions.length > 1" [ngClass]="buttonClass"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <ng-container *ngFor="let action of view.actions; let idx = index">
              <a class="dropdown-item" href="javascript:void(0)" (click)="action.onClick()"
                *ngIf="idx > 0 && action?.enabled">{{action.label | translate}}</a>
            </ng-container>
          </div>
        </ng-container>
  
        <ng-template #disabled>
          <button class="btn btn-block" id="disabled" [disabled]="true" [ngClass]="buttonClass" type="button">
            {{label | translate}}
          </button>
        </ng-template>
      </div>
    </form>
  </div>

  <!-- For small screens// TODO: Commented for demo purpose. Need to revisit-->
<!-- <div class="d-block d-md-none flex-row">
  <form class="d-flex">
    <div class="align-items-baseline d-flex justify-content-center input-group-sm py-1" id="quantity"
      *ngIf="showQuantityControls">
      <label [for]="'quantity' + product?.Id" class="mr-3">{{'COMMON.QUANTITY' | translate}}</label>
      <input type="number" min="1" class="form-control mb-2 w-50" (change)="changeQty(product, quantity)"
        [(ngModel)]="quantity" min="1" name="quantity" [id]="'quantity' + product?.Id" />
    </div>
    <div class="d-flex add-action-container" *ngIf="view$ | async as view">
      <ng-container *ngIf="view?.actions?.length > 0; else disabled">
        <button class="btn btn-block" [disabled]="view?.disabled || view.actions[0]?.enabled === false"
          [ladda]="loading" [attr.data-style]="'zoom-in'" [ngClass]="buttonClass" (click)="view.actions[0]?.onClick()"
          type="button">
          {{view.actions[0]?.label | translate}}
        </button>
        <button type="button" class="btn dropdown-toggle dropdown-toggle-split"
          *ngIf="(isLoggedIn$ | async) === true && view.actions.length > 1" [ngClass]="buttonClass"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
          <ng-container *ngFor="let action of view.actions; let idx = index">
            <a class="dropdown-item" href="javascript:void(0)" (click)="action.onClick()"
              *ngIf="idx > 0 && action?.enabled">{{action.label}}</a>
          </ng-container>
        </div>
      </ng-container>

      <ng-template #disabled>
        <button class="btn btn-block" id="disabled" [disabled]="true" [ngClass]="buttonClass" type="button">
          {{label | translate}}
        </button>
      </ng-template>
    </div>
  </form>
</div> -->
</ng-container>

<apt-product-configuration-summary
  *ngIf="renderConfiguration && configurationEnabled && (product?.HasOptions || product?.HasAttributes)"
  [product]="product" [quantity]="quantity" #productConfiguration></apt-product-configuration-summary>

./add-to-cart.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""