Product recommendations for SPA using Library v1.5.0

This topic describes the steps to configure product recommendations for Angular SPA channels using Personalization Library version 1.5.0.

As a best practice, it is recommended that the code updates are validated in a non-Production environment before pushing those to the Production website.

Prerequisites

Ensure that you are using Personalization Library version 1.5.0.

Procedure

In your Angular SPA channel, configure the zone on which you want to display product
recommendations.
In your channel (web site), identify the Angular SPA component (YOUR_COMPONENT) for which you want to show product recommendations.
Add the following code snippet to the JavaScript or TypeScript file of YOUR_COMPONENT.

import {OnInit} from '@angular/core';
  import {map, catchError } from 'rxjs/operators';
  import {NgPersonalization} from '@acoustic/personalization';
  export class YOUR_COMPONENT implements OnInit {
     let YOUR_VARIABLE ;
     constructor(private personalizationService: NgPersonalization){
        super();
       }
     ngOnInit() {
        this.personalizationService.onRecommendationsReady(()=>{
          //Repeat this code for each zone to display product recommendations  
          this.YOUR_VARIABLE = this.personalizationService.getRecommendedProducts('ZONE_REGISTRATION_ID',NUMBER_OF_PRODUCTS)
        .pipe(
       map(RESPONSE => {
                if (RESPONSE !== "PRNF404") {
                   // Add code for rendering logic
                    } else {
                  // Add code to handle the error code
               console.log("Personalization:", "recommendation not applied");
             }
       })
   );//End of the code to be repeated for each zone 
    })
  } 
}

In the code snippet:

Note that in this version, the ngOnInit() function introduces a new line of code
this.personalizationService.onRecommendationsReady(()=>
Replace NUMBER_OF_PRODUCTS by the number of the recommended products that you want to display. For example: "10".

Next, open the HTML file of your Angular SPA component (YOUR_COMPONENT). You may follow one of the following approaches.

Approach 1:

Use this approach if your product list rendering is done using a component.

<div id="ZONE_REGISTRATION_ID " wrtp-recommended-zone ="ZONE_REGISTRATION_ID">
     <h4>Title</h4>
     <div *ngIf="(YOUR_VARIABLE | async) as alias_name; else elseBlock;">
     <YOUR_NESTED_COMPONENT *ngIf="alias_name&amp;&amp;alias_name.length;" [YOUR_PROPERTY_BINDING_VARIABLE]="alias_name">
       </YOUR_NESTED_COMPONENT>
     </div> 
  <ng-template #elseBlock >No products found.</ng-template>
  </div>

Approach 2:

Use this approach if the product list rendering is done inside the same zone of YOUR_COMPONENT using the angular FOR loop.

<div id="ZONE_REGISTRATION_ID" wrtp-recommended-zone="ZONE_REGISTRATION_ID">
    <h4>Title</h4>
    <div *ngIf="(YOUR_VARIABLE | async) as alias_name; else elseBlock;">
       <div *ngFor="let item of alias_name">
          <span (click)="trackProduct($event, item.id)">{{item.id}}</span>
       </div>
   </div>
   <ng-template #elseBlock>No products found.</ng-template>
</div>

In both the approaches:

You must include the wrtp-recommended-zone HTML attribute, and its value must be the same as the ZONE_REGISTRATION_ID.
Use the trackProduct($event, product.id) function on the (click) event for each iteration of product rendering on UI for YOUR_NESTED_COMPONENT.