World is now on Opti ID! Learn more

Manoj Kumawat
Jun 1, 2022
  35
(0 votes)

Working with product recommendations - Wishlist Recommendations

One of the useful features of Optmizely personalized contents is Product Recommendations. With Optimizely Product Recommendations, you can provide a personalized shopping experience for visitors to your e-commerce website. Personalization is based on website interaction such as order history, visitor profiles, and intelligent algorithms to suggest products of interest. A developer must first configure the tracking, personalization service, and recommendation widgets, then you can start working with Product Recommendations to define recommendations strategies using the Personalization Portal

A couple of days ago we integrated a widget for wishlist, Where users would see product recommendation based on their wishlist history. Below are the steps how you can do it step by step. This is the same configuration you can follow to create other widgets. 

Step 1 - Login to Personalization portal > Product Recommendations > Widgets > Create a new widget
For us this was wishlistWidget we needed on wishlist page. 

Step 2 - Configure the type of recommendations you would like to display on your website 
The algorithms are set to show Popular  only 3  recommendations. That way it would show us only 3 product recommendations.

Code > Wishlist > enable tracking 

private readonly TrackingDataFactory _trackingDataFactory;
private readonly ITrackingService _trackingService;
private readonly ServiceAccessor<IContentRouteHelper> _contentRouteHelperAccessor;

public async Task<TrackingResponseData> TrackWishlist(HttpContextBase httpContext)
{
      var trackingData = _trackingDataFactory.CreateWishListTrackingData(httpContext);

      return await InternalTrackAsync(trackingData, httpContext);
}

private async Task<TrackingResponseData> InternalTrackAsync(CommerceTrackingData commerceTrackingData, HttpContextBase httpContext)
{
	if (commerceTrackingData == null || httpContext == null)
	{
		return null;
	}

	var scope = _trackingDataFactory.GetCurrentTrackingScope();

	if (!string.IsNullOrEmpty(scope))
	{
		return await _trackingService.TrackAsync(commerceTrackingData, httpContext, _contentRouteHelperAccessor().Content, scope);
	}
	else
	{
		return await _trackingService.TrackAsync(commerceTrackingData, httpContext, _contentRouteHelperAccessor().Content);
	}
}

Next > Get recommendations

using EPiServer.Personalization.Commerce.Tracking;

public static IEnumerable<Recommendation> GetRecommendations(this TrackingResponseData response, ReferenceConverter referenceConverter, string area) => response.GetRecommendationGroups(referenceConverter)
									.Where(x => (!string.IsNullOrEmpty(area) && x.Area.IsEqual(area)) 
									|| string.IsNullOrEmpty(area))
									.SelectMany(x => x.Recommendations);

This will fetch you configured recommendations on personlization portal. Similarly we can get recommendations wherever required. 

Here is the useful resource for enabling tracking for wishlist in commerce - https://github.com/episerver/Quicksilver/blob/master/Sources/EPiServer.Reference.Commerce.Site/Features/Cart/Controllers/WishListController.cs 

Thank you for reading.

Jun 01, 2022

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |