Optimizely Graph for Commerce Connect

Prerequisites

• .NET 6
• NodeJS equal or greater than v20.14.0
• yarn
• Optimizely Commerce Connect equal or greater than v14.26.0

Solution structure

• EPiServer.Reference.Commerce.Site – The site where Optimizely Graph is installed. Commerce data is synced to the Optimizely Graph server from here.
• Optimizely.Graph.Commerce – The connector for Commerce Connect and Optimizely Graph. This project is packed in a Nuget package.
• ClientApp – React client application for consuming Optimizely Graph. This is a small sample client app for querying data, using facets and search phrases.

Get started

1. Install Optimizely.ContentGraph.Cms.
2. Install Optimizely.Graph.Commerce.
3. Add the following code snippet to ConfigureServices method in Startup.cs:
   C#

   services.AddContentDeliveryApi();
   services.AddContentGraph(x =>
   {
       x.IncludeInheritanceInContentType = true;
       x.PreventFieldCollision = true;
   });
   services.AddCommerceGraph();
   

4. Add namespace.
   C#

   using Optimizely.Graph.Commerce;
   

5. Add Optimizely setting as the same level as Episerver in appsetting.json.
   JSON

   "Optimizely": {
     "ContentGraph": {
       "GatewayAddress": "https://cg.optimizely.com",
       "AppKey": "{your-app-key}",
       "Secret": "{your-secret}",
       "SingleKey": "{your-single-key}",
       "AllowSendingLog": "true"
     }
   }
   

6. Build the solution.
7. Prepare the database.
8. Run the site. The first time the site is ran the site executes data migration and the homepage displays when done.
9. Go to GraphQLAdmin to clear all previous synced data. Go to the Optimizely Graph content synchronization job to start syncing data. Go to GraphiQL to write queries to fetch data.

Aggregate data for product content

With Optimizely Graph for Commerce Connect, you can aggregate propety values from product variations. For example, aggregate the Size and Color from VariationContent to Sizes and Colors for ProductContent by inheriting from the ProductAggregationContentApiModelBase class.

[ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
public class SizeContentApiModel : ProductAggregationContentApiModelBase<string, GenericProduct, GenericVariant>
{
    public SizeContentApiModel(ContentTypeModelRepository contentTypeModelRepository, IContentLoader contentLoader)
        : base(contentTypeModelRepository, contentLoader)
    {
    }

    public override string Name => "Sizes";

    protected override Expression<Func<GenericVariant, string>> VariationProperty => (x) => x.Size;
}

[ServiceConfiguration(typeof(IContentApiModelProperty), Lifecycle = ServiceInstanceScope.Singleton)]
public class ColorContentApiModel : ProductAggregationContentApiModelBase<string, GenericProduct, GenericVariant>
{
    public ColorContentApiModel(ContentTypeModelRepository contentTypeModelRepository, IContentLoader contentLoader)
        : base(contentTypeModelRepository, contentLoader)
    {
    }

    public override string Name => "Colors";

    protected override Expression<Func<GenericVariant, string>> VariationProperty => (x) => x.Color;
}

The ProductAggregationContentApiModelBase class is in Optimizely.Graph.Commerce package, so you can create the class from your commerce site and inherit this class.

References

See the Product Listing Page - using Graph blog post for information.