Dev GuideAPI ReferenceUser Guide
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