Server-side API integration
Describes how to integrate the Optimizely Product Recommendations server-side API to Optimizely Customized Commerce.
Note
Sample code in this article is taken from Quicksilver templates. The Quicksilver Customized Commerce sample site and installation instructions are available for download from GitHub.
Preparation
See Customized Commerce API overview  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 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.
@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.
[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.
[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.
@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.
[HttpGet]
public async Task<ActionResult> Index(FashionPackage currentContent, bool useQuickview = false)
{
...
await _recommendationService.TrackProduct(HttpContext, currentContent.Code, useQuickview);
...
}
Then add the \_recommendationService.TrackingProduct() method.
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.
[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.
@section RightMarginRecommendations
{
@{
Html.RenderAction("Index", "Recommendations", new
{
recommendations = Model.AlternativeProducts});
}
}
@section BottomRecommendations
{
@{
Html.RenderAction("Index", "Recommendations", new
{
recommendations = Model.CrossSellProducts
});
}
}
Updated 9 months ago