---
title: Server-side API integration
slug: commerce-connect-14/docs/server-side-api-integration
docTags: 
createdAt: 2026-07-23T10:25:32.050Z
---

:::hint{type="info"}
**Note**
Sample code in this article is taken from Quicksilver templates. The *Quicksilver* Commerce Connect sample site and installation instructions are available for [download from GitHub](https://github.com/episerver/Quicksilver).
:::

## Preparation

See [Commerce Connect API overview](docId\:LOvzm1RHzESfoLYq1oJA2) for the initialization steps. Then, continue with the steps below.

### 1. Define the recommended sections

To the `Views/Shared/_Layout.cshtml` view, add the following sections:

- `UpperRecommendations`
- `LeftMarginRecommendations`
- `RightMarginRecommendations`
- `BottomRecommendations`

within the `{'<div>'}` tags defined in the preparation step.

```csharp
...
    <div class="recommendations recommendations-upper">@RenderSection("UpperRecommendations", false)</div>
    <div class="recommendations recommendations-left">@RenderSection("LeftMarginRecommendations", false)</div>
    <div class="recommendations recommendations-right">@RenderSection("RightMarginRecommendations", false)</div>
    <div class="recommendations recommendations-bottom">@RenderSection("BottomRecommendations", false)</div>
    ...
```

### 2. Define the recommendations view

To render the recommendations layout based on the recommended data, create a partial view. In the Quicksilver sample site, this is `Views/Recommendations/_Recommendations.cshtml`.

```csharp
@model EPiServer.Reference.Commerce.Site.Features.Recommendations.ViewModels.RecommendationsViewModel
@foreach (var product in Model.Products)
{
    <div class="jsProductTile product-row__tile" data-recommendation-id="@product.RecommendationId">
        @Html.Partial("_Product", product.TileViewModel)
    </div>
}
```

## Use the CommerceTrackingAttribute

This section explains how to create, send, and then consume recommendations on a page using the `CommerceTrackingAttribute`. In this example, the integration is applied to a `StartPage`.

### 1. Create and send a tracking request

For the controller `Features/Start/Controllers/StartController`, add the `CommerceTracking` attribute to the Index action.

```csharp
[CommerceTracking(TrackingType.Home)]
public ViewResult Index(StartPage currentPage)
{
    ...
}
```

### 2. Consume recommendations

For the controller `Features/Start/Controllers/StartController`, use `GetHomeRecommendations` from `RecommendationsExtensions` to get a collection of recommendation objects for the home page.

```csharp
[CommerceTracking(TrackingType.Home)]
public ViewResult Index(StartPage currentPage)
{
    var viewModel = new StartPageViewModel()
    {
        StartPage = currentPage,
        Recommendations = this.GetHomeRecommendations(),
        Promotions = GetActivePromotions()
    };
    return View(viewModel);
}
```

To the view `Views/Start/Index.cshtml`, add the following to render the recommended data in the `RightMarginRecommendations` section of the page.

```csharp
@section RightMarginRecommendations
{
    @{
        Html.RenderAction("Index", "Recommendations", new
        {
            recommendations = Model.Recommendations
        });
    }
}
```

## Track without using the CommerceTracking Attribute

This section explains how to create, send, and then consume recommendations on a page or an action without using the `CommerceTrackingAttribute`. This integration is applied to a Product package page.

### 1. Create and send a tracking request

For the controller `Features/Product/Controllers/PackageController`, add the following code to the Index action.

```text
[HttpGet]
public async Task<ActionResult> Index(FashionPackage currentContent, bool useQuickview = false)
{
    ...
    await _recommendationService.TrackProduct(HttpContext, currentContent.Code, useQuickview);
    ...
}
```

Then add the `_recommendationService.TrackProduct()` method.

```csharp
public async Task<TrackingResponseData> TrackProduct(HttpContextBase httpContext, string productCode, bool skipRecommendations)
{
    ...
    var trackingData = _trackingDataFactory.CreateProductTrackingData(productCode, httpContext);
    if (skipRecommendations)
    {
        trackingData.SkipRecommendations();
    }
    return await _trackingService.TrackAsync(trackingData, httpContext, _contentRouteHelperAccessor().Content);
}
```

### 2. Consume recommendations

To the controller `Features/Product/Controllers/PackageController`, add the following code to the Index action.

```csharp
[HttpGet]
public async Task<ActionResult> Index(FashionPackage currentContent, bool useQuickview = false)
{
    var viewModel = _viewModelFactory.Create(currentContent);
    ...
    await _recommendationService.TrackProduct(HttpContext, currentContent.Code, useQuickview);
    ...
    viewModel.AlternativeProducts = this.GetAlternativeProductsRecommendations().Take(3);
    viewModel.CrossSellProducts = this.GetCrossSellProductsRecommendations();
    ...
}
```

To the view `Views/Package/Index.cshtml`, add the following.

```csharp
@section RightMarginRecommendations
{
    @{
        Html.RenderAction("Index", "Recommendations", new
        {
            recommendations = Model.AlternativeProducts
        });
    }
}
@section BottomRecommendations
{
    @{
        Html.RenderAction("Index", "Recommendations", new
        {
            recommendations = Model.CrossSellProducts
        });
    }
}
```