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

File

projects/congarevenuecloud/elements/src/lib/recommended-products/recommended-products.component.ts

Description

The Constraint Rules Recommended Products Component is used for displaying recommended products for items in cart.

Preview

Usage

Example :
import { RecommendedProductsModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [RecommendedProductsModule, ...]
})
export class AppModule {}
Example :
```typescript
<apt-cr-recommended-products
            [productList]="cartProducts"
            [cart]="cart$ | async"
></apt-cr-recommended-products>
Example :

Implements

OnChanges

Metadata

selector apt-cr-recommended-products
styleUrls ./recommended-products.component.scss
templateUrl ./recommended-products.component.html

Index

Inputs

Constructor

constructor(crService: ConstraintRuleService)
Parameters :
Name Type Optional
crService ConstraintRuleService No

Inputs

cart
Type : Cart

Instance of cart.

 
<ng-container *ngIf="(productRecommendations$ | async)?.length > 0">
  <div class="d-flex align-items-center my-3">
    <span> {{'COMMON.YOU_MAY_ALSO_LIKE' | translate}}</span>
    <div class="border-top mt-4 border-gray flex-grow-1 ml-3">&nbsp;</div>
  </div>

  <ul class="list-unstyled">
    <li class="media bg-light my-2 p-2" *ngFor="let product of (productRecommendations$ | async)">
      <img class="mr-3" [src]="product.IconId | image" width="50" height="50"
        alt="{{ 'COMMON.ALT_TEXT_IMAGE' | translate }}">
      <div class="media-body d-flex flex-wrap justify-content-between">
        <div>
          <h6 class="m-0">{{product?.Name}}</h6>
          <small><strong>{{'COMMON.PRODUCT_CODE' | translate}}:</strong>&nbsp;{{product.ProductCode}}</small>
        </div>
        <span class="ml-auto mr-4">
          <strong> {{'COMMON.QTY' | translate}}:</strong>&nbsp;1

          <strong class="ml-2"> {{'COMMON.PRICE' | translate}}:</strong>
          <apt-price [record]="product" [type]="'list'"></apt-price>
        </span>
        <apt-add-to-cart *ngIf="!product?._metadata?.inCart; else inCart" [product]="product"
          btnClass="btn-outline-primary" [trigger]="false" [showQuantityControls]="false"></apt-add-to-cart>
        <ng-template #inCart>
          <i class="fas fa-check-circle mx-5 mt-1"></i>
        </ng-template>
      </div>
    </li>
  </ul>
</ng-container>

./recommended-products.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""