---
title: Server-side API integration
slug: commerce-connect-15/docs/server-side-api-integration
docTags: 
createdAt: 2026-07-30T20:34:41.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 to [download from GitHub](https://github.com/episerver/Quicksilver).
:::

1. See [Commerce Connect API overview](docId\:EduzotMOvnW9kbAZ3b8eo) for the initialization steps.
2. Define the recommended sections. In the `Views/Shared/_Layout.cshtml` view, add the following sections within the `<div>` tags defined in the preparation step:

```html
...
<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>
...
```

3. 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

Use `CommerceTrackingAttribute` to create, send, and consume recommendations on a page. The example below applies the integration to a `StartPage`.

1. Create and send a tracking request. In the `Features/Start/Controllers/StartController` controller, add the `CommerceTracking` attribute to the `Index` action:

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

2. Consume recommendations. In the `Features/Start/Controllers/StartController` controller, 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);
}
```

3. In the `Views/Start/Index.cshtml` view, 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 CommerceTrackingAttribute

Create, send, and consume recommendations on a page or an action without `CommerceTrackingAttribute`. The example below applies the integration to a product package page.

1. Create and send a tracking request. In the `Features/Product/Controllers/PackageController` controller, add the following code to the `Index` action:

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

2. 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);
}
```

3. Consume recommendations. In the `Features/Product/Controllers/PackageController` controller, 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();
    ...
}
```

4. In the `Views/Package/Index.cshtml` view, add the following:

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