HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback


Note

Sample code in this article is taken from Quicksilver templates. The _Quicksilver_ Commerce sample site and installation instructions are available for [download from GitHub](🔗).

## Preparation

See [Commerce Cloud API overview](🔗) for the initialization steps. Then, continue with the steps below.

### 1. Define the recommended sections

In the _Views/Shared/\_Layout.cshtml_ view, add following sections:

  • recommendations-upper

  • recommendations-left

  • recommendations-right

  • recommendations-bottom

Example:



### 2. Add the client-side tracking script

To the _Views/Shared/\_Layout.cshtml_ view, add following @using statement to the top of file.



Then, add @Html.LoadTrackingAPI() to the <HEAD> tag, like this.



### 3.  Configure the template engine to render recommended data

This section provides an example of using the _mustache.js_ template engine to render recommended data. The following code resides inside a partial view named \_Views/Shared/\_\_ _RecommendationsTemplates.cshtml._



### 4. Render recommendation templates

In the _Views/Shared/\_Layout.cshtml_ view, render the templates created in step 3.



### 5. Render the page tracking script

To the _Views/Shared/\_Layout.cshtml_ view, add following code to render the page tracking script.



After that, the page should look like this.



## Track with custom attributes

This section explains how to create, send, then consume recommendations on a page with custom attributes. This integration is applied to a Product package page.

### 1. Create product tracking data



### 2. Add a custom attribute



### 3. Send a tracking request and receive recommendations



In the view _Views/Packages/Index.cshtml_, use these settings to render more than one recommendation section.



The section mapping defines options to render the recommended data.

  • The first section mapping:

    • Type of productAlternativesWidget

    • Maximum items are 2

    • The HTML tag with the CSS class is recommendations-right

  • The second section mapping:

    • Type of\*\* \*\*productCrossSellsWidget

    • No maximum

    • The HTML tag with the CSS class is recommendations-bottom