---
title: Server-side API integration
slug: commerce-connect-13/docs/server-side-api-integration
docTags: 
createdAt: 2026-07-23T09:44:51.000Z
---

:::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 [API overview](docId\:L46ZYnXYmBbJ8lnogp0d5) for the initialization steps, then continue with the steps below.

### 1. Define the recommended sections

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

- UpperRecommendations
- LeftMarginRecommendations
- RightMarginRecommendations
- BottomRecommendations

to 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, 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, 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 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.TrackingProduct()** 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 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
        });
    }
}
```