Blog posts by Marcus Hoffmann2023-05-25T22:26:25.0000000Z/blogs/marcus-hoffmann/Optimizely WorldImproved headless functionality in Customized Commerce/blogs/marcus-hoffmann/dates/2023/5/improved-headless-functionality-in-customized-commerce/2023-05-25T22:26:25.0000000Z<p><strong>Did you know that with the release of Content Delivery Commerce API 3.7 we have massively improved the out of the box headless capabilities of Customized Commerce v14?</strong></p>
<p>Since before the Content Delivery API were already supporting Catalog data, enabling you to fetch products using our Rest API. We also supported some of the basic commerce operations such getting markets, prices etc.</p>
<p>When it comes to Rest APIs for Customized Commerce, we also had the Service API since before. This API supports all commerce related features like getting products, customers, creating carts and orders etc. But the intention of this API is for integration purposes, even if it could be used for headless scenarios.<br /><a href="https://docs.developers.optimizely.com/customized-commerce/v1.3.0-service-api-developer-guide/docs" title="https://docs.developers.optimizely.com/customized-commerce/v1.3.0-service-api-developer-guide/docs">https://docs.developers.optimizely.com/customized-commerce/v1.3.0-service-api-developer-guide/docs</a></p>
<p>Feedback has been clear from you partners for a long time, and we understand your needs and where the market and trends are going. Today we need to be able to serve not only web, but also other channels, such as mobile apps. Also, the majority of new ecommerce sites on our platform are using Javascript frameworks, such as React, for their frontend. But you as a partner always needed to wrap much of our .Net APIs in your own Rest APIs for full ecommerce support.</p>
<p>The newly released Content Delivery Commerce API now adds all Commerce related headless APIs you need. Easy to use since it extends the the Content Delivery APIs we already got, and you already are familiar with. <br /><a href="https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce" title="https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce">https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce</a></p>
<h2>API overview</h2>
<p><img alt="Rest-APIs.png" src="/link/9dbe4395ddbe47b28540d623ef760a26.aspx" width="700" height="395" /></p>
<ul>
<li>Carts – create, modify, fetc, convert to purchase order</li>
<li>Customers – create, update, set password etc</li>
<li>Inventory – get status per SKU</li>
<li>Markets – get markets with all their settings such as languages, currencies, payments etc</li>
<li>Payments – fetch payment methods, assign to carts, process payments etc</li>
<li>Pricing – get different price options for a SKU</li>
<li>Warehouse – get available warehouses</li>
<li>Orders – search orders, update orders etc</li>
</ul>
<h2>Installation and configuration</h2>
<p>1. Install the nuget package from: <br /><a href="https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce" title="https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce">https://nuget.optimizely.com/package/?id=EPiServer.ContentDeliveryApi.Commerce </a></p>
<p>2. Add the API configuration to your startup.cs:<br />You need to set services.AddCommerceApi<SiteUser>(...) and services.AddOpenIDConnect<SiteUser>(...). <br />Refer to Foundation code for example implementation (yes, the API is already installed in Foundation):<br /><a href="https://github.com/episerver/Foundation/blob/main/src/Foundation/Startup.cs" title="https://github.com/episerver/Foundation/blob/main/src/Foundation/Startup.cs">https://github.com/episerver/Foundation/blob/main/src/Foundation/Startup.cs</a></p>
<h2>Test using Postman</h2>
<p>Let's see this in action using Postman. We will use the Cart API in our demo together with the existing APIs for login and fetching a variant/SKU. </p>
<ol>
<li>The scenario is to login as a customer</li>
<li>Find a product (SKU)</li>
<li>Add it to cart</li>
<li>And then convert the cart to a purchase order</li>
</ol>
<h3>API reference: </h3>
<p>You can find the v3 API reference here: <br /><a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/content-delivery-class-libraries-and-apis" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/content-delivery-class-libraries-and-apis">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/content-delivery-class-libraries-and-apis</a> </p>
<h3>1. Login and create token:</h3>
<p><strong>POST:</strong> https://{{siteurl}}/api/episerver/connect/token/<br />(See <a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/api-authentication" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/api-authentication">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/api-authentication</a>) <br /><strong>Body:</strong> grant_type, client_id, username, password <br /><strong>Response:</strong> access_token<br /><img alt="1-login.png" src="/link/6dfdb5e5c1b749c6817dce8c8290142e.aspx" width="900" height="570" /></p>
<h3>2. Get variant to add to cart</h3>
<p>To add a variant to cart you need the Guid for the variant/SKU.<br /><br /><strong>GET:</strong> https://{{siteurl}}/api/episerver/v3.0/search/content/{{searchterm}}<br />(See <a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/content-delivery-api-and-commerce" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/content-delivery-api-and-commerce">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/content-delivery-api-and-commerce</a>) <br /><strong>Header:</strong> Authorization with value “Bearer <access_token>”<br /><strong>Response:</strong> The variant as Json<br /><img alt="2-get-variant.png" src="/link/8b1b3245064544dfa11d68b3f997082e.aspx" width="900" height="575" /><br />In this example we use the ID of first Variant/SKU of the Jodphur boot (50__CatalogContent), which is available in the Mosey Fashion Foundation site. <br />We get the Guid "8709E541-11F6-40D5-B488-800B961A1197" back.</p>
<h3>3. Create cart with line item</h3>
<p>When updating a cart, the full cart needs to be posted. In a future release we will hopefully be able to update just a single line item. <br /><strong>POST:</strong> https://{{siteurl}}/api/episerver/v3.0/me/carts <br />The /me/carts/ endpoint will create a cart for myself.<br />(See <a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_mepostby" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_mepostby">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_mepostby</a>)<br /><strong>Header</strong>: Authorization with value “Bearer <access_token>” <br /><strong>Body:</strong> Cart Json, see image and code below. Name, market, currency and shippingMethodId are mandatory to create a cart, but to create an order from it we also need a shipment with a lineitem. <br /><strong>Response:</strong> Our new cart created <br /><img alt="3-create-cart1.png" src="/link/3825bd4364834d25b04968ba8b1c1dfa.aspx" width="900" height="570" /><br /><br /><img alt="3-create-cart2.png" src="/link/20ab67b003a04178beeca8e504af14d9.aspx" width="900" height="575" /><br />You now have a cart with ID 9 above.</p>
<p><strong>Cart Json to post:</strong> <br />The contentId is from the Jodphur Boot and shippingMethodId is from the US standard shipping. Code belongs to the Jodphur Boot SKU as well.</p>
<pre class="language-json"><code>{
name: "Default", market: "US", currency: "USD",
"shipments": [
{
"lineItems": [
{
"quantity": 1,
"code": "SKU-39813617",
"contentId": "8709E541-11F6-40D5-B488-800B961A1197",
"placedPrice": 100
}
],
"shippingMethodId": "72457670-c12d-4270-9b31-1ad06743b7c0"
}
]
}
</code></pre>
<p>You can now find the cart in Order Management / CSR UI: <br /><img alt="3-cart-csrui.png" src="/link/59f5f62e797842b4baa2f9c176424b46.aspx" width="900" height="523" /><br />The shippingMethod used for the cart:<br /><img alt="3-shippingmethod.png" src="/link/9e09ae2aac7e4a91a39d408968e2f9a4.aspx" width="900" height="498" /></p>
<h3>3b. Get cart</h3>
<p>When you want to fetch this cart again for display or to modify. Set the cartid in the url. <br /><strong>GET:</strong> https://{{siteurl}}/api/episerver/v3.0/me/carts/9<br />(See <a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_megetbycartid" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_megetbycartid">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_megetbycartid</a>)<br /><strong>Header:</strong> Authorization with value “Bearer <access_token>” <br /><strong>Response:</strong> The cart as Json</p>
<h3>4. Convert cart to order</h3>
<p>You now have a cart with ID 9, this can now be converted to a Purchase Order. <br />Set the cartId in the url. <br /><strong>POST:</strong> https://{{siteurl}}/api/episerver/v3.0/me/carts/9/converttoorder<br />(See <a href="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_meconverttoorderbycartid" title="https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_meconverttoorderbycartid">https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/reference/cartapi_meconverttoorderbycartid</a>)<br /><strong>Header:</strong> Authorization with value “Bearer <access_token>”<br /><strong>Response:</strong> Our new order created<br /><img alt="4-create-order.png" src="/link/6a28cece2d704e2583723a7a259d5be6.aspx" width="900" height="578" /><br /><br />You now have a Purchase order with order number PO9122.<br /><img alt="4-order-csrui1.png" src="/link/1f794e1a07854e958cb3367cb621d677.aspx" width="900" height="444" /><br /><br /><img alt="4-order-csrui2.png" src="/link/29a3037ea5954b2da0ab75b6e4c98473.aspx" width="900" height="445" /></p>
<h3>Summary</h3>
<p>This was a short intro to the REST Cart API for Customized Commerce. Hope you found it useful and that it gives you some input and ideas of also how to use the other new APIs available. </p>
<h2>Feedback?</h2>
<p>Please leave a comment, or feel free to post any feedback and suggestions of improvements in our feedback portal: <br /><a href="https://feedback.optimizely.com/?project=COM" title="https://feedback.optimizely.com/?project=COM">https://feedback.optimizely.com/?project=COM</a> </p>Get started with Episerver Perform for personalized product recommendations/blogs/marcus-hoffmann/dates/2017/11/get-started-with-episerver-perform-for-personalized-product-recommendations/2017-11-08T12:12:02.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><span>This year, Episerver has released a new suite of personalization products </span><span>combining machine learning, artificial intelligence, and statistical analysis</span><span>. The suite includes Episerver Perform, Episerver Reach, Episerver Advance (beta out Q1 2018), Episerver Insight (beta out now) and Personalized Find. All of them are SaaS services. </span></p>
<p>Personalization has been around a long time in Episerver based on visitor groups. Now the personalization is brought to the individual level. As a visitor to an e-commerce site, you now get automatic product recommendations based on behaviour. This part of our new Personalization suite is called Episerver Perform and is covered in this blog post.</p>
<p>The product recommendations are based on machine learning and behavioural data. Reports today show that visitors want personalization as part of their shopping experience, and that this in turn increases the revenue of the site.</p>
<h2> </h2>
<h2>Create an account and get on-boarded</h2>
<p>First of all, as a partner you can email <a href="mailto:personalization@episerver.com">personalization@episerver.com</a> to get a free demo/test account. Pricing for Episerver Perform is based on traffic, just as our DXC Service, so you only pay for what you need. For a quote contact your partner or customer manager at Episerver.</p>
<p>There is an on-boarding process included before the implementation takes start where Episerver together with you review your site and set up strategies for the recommendations. Our team have deep knowledge of how to setup strategies based on your goals.</p>
<h2> </h2>
<h2>How does it work?</h2>
<p>The personalization process can be described in three parts:</p>
<p>1. Capture - data is submitted to Episerver Perform by sending product data as well as behaviour data such as clicks, carts, orders</p>
<p>2. Analyse - our algorithms analyse product data and customer profiles</p>
<p>3. Visualize - relevant recommendations are sent to the right visitors</p>
<h2> </h2>
<h2>Installation and setup</h2>
<p>There are different ways to integrate Episerver Perform on the site. If you are running Episerver Commerce v11.3 or later there is a native integration supported by adding a nuget package to the site. This gives many advantages and is fast to get started with as the basic job is already done.</p>
<p>If you use an older version of Episerver Commerce, there is a Javascript API and a server-based API to use, but requires more work than the native API. Below will focus on the native integration <em>(a</em><span style="font-style: italic;"> native version of the Javascript API will also be released).</span></p>
<p>Get the nuget packages from here:<br /><a href="http://nuget.episerver.com/en/?search=EPiServer.Personalization.Commerce"><span>http://nuget.episerver.com/en/?search=</span><span>EPiServer.Personalization.Commerce</span></a><span> </span></p>
<p><strong>Note:</strong> the package was earlier called "EPiServer.Recommendations.Commerce" in the beta version, supported from Commerce v10.4. If you already are using this version you need to update to the new version. See Gustavs blog post for more details regarding the new nuget packages and their updates. <br /><a href="/link/a074a9b3cccd4e3494ff44c86188aa6f.aspx">https://world.episerver.com/blogs/the-episerver-personalization-blog/dates/2017/11/new-nuget-packages-for-our-episerver-personalization-suite/</a> </p>
<p>The package will add a couple of appsettings, where you need to configure your account details such as site url and security token.<br /><a href="/link/86a5c5639e3f4892aed28c6766d5bc77.aspx#Installingandconfiguring">http://world.episerver.com/documentation/developer-guides/commerce/personalization/recommendations/#Installingandconfiguring</a></p>
<p>It also creates the scheduled job which will export the product data from Episerver Commerce to Episerver Perform. If you want to customize the export, this is also possible using the new nuget package.<br /><a href="/link/021481efb63f498bac622eb74ec70041.aspx">http://world.episerver.com/documentation/developer-guides/commerce/personalization/customizing-exported-product-information/</a></p>
<h2> </h2>
<h2>Start tracking</h2>
<p>Then you need to add the recommendations to your templates and start tracking visitor behaviour and actions such as pages visited, adding to cart, creating orders etc.</p>
<p>By default, Episerver Perform comes with tracking types and widgets for the Home, Product, Search, Category, and Basket pages. Tracking types describe the various actions that visitors can track (more tracking types are available and can be added to the account).</p>
<p>Widgets describe how recommendations should be displayed. For the various recommendations, the on-boarding process sets out the strategies that apply to each widget. Usually you are working with different strategies on the different pages. </p>
<p>Strategies can for example for the Home page (Start page) be targeted on abandoned or visited products or cross sells on earlier orders. On the Category pages recommendations could for example be items linked to browsing in category or emerging and bestseller products in category. All strategies are based on a set of different algorithms built in to Episerver Perform.</p>
<p>On the Product page, there are two widgets included in the standard package. Strategies for the Product page are often setup as matching or alternative products. For a fashion site, it could also be popular cross sells. On the Basket or Checkout page recommendations are often setup as items linked to basket items or items of lower value to push the customer over the limit for free shipping.</p>
<p>Based on the strategies given the recommendation engine will give relevant suggestions for all visitors based on their individual behaviour!</p>
<p>As described above, the exact strategies are defined per site as part of the on-boarding process. The strategies can then be changed or updated as time goes on.</p>
<p><img src="/link/3d08700d692944699294f4e252253435.aspx" width="800" alt="Image perform-recommendations.png" /></p>
<p><span>Tracking can be done both by adding a tracking attribute to the controller actions and by calling the tracking service directly. Tracking of specific actions needs to be done by calling the tracking service, for example adding to cart, or creating an order. Tracking of browsing a category or a product is easiest </span><span>achieved </span><span>by just adding the tracking attribute to the controller. </span></p>
<p>See examples for more details:<br /><a href="/link/86a5c5639e3f4892aed28c6766d5bc77.aspx#Trackingandrecommendations">http://world.episerver.com/documentation/developer-guides/commerce/personalization/recommendations/#Trackingandrecommendations</a></p>
<p>Our demo site Quicksilver found on Github has all this functionality already included to start from.<br /><a href="https://github.com/episerver/Quicksilver">https://github.com/episerver/Quicksilver</a></p>
<h2> </h2>
<h2>Reports and merchandizing capabilities</h2>
<p>From the Personalization Portal (menu integration in CMS to be released soon) you get various types of reports on orders, revenue, products sold and much more based on the recommendations given from Episerver Perform.</p>
<p><img src="/link/9db480c4221141abb12d43757d8de8df.aspx" width="800" alt="Image perform-dashboard.png" /></p>
<p>There are statistics based on page types (tracking types) and widgets. You can for example see which products are high converting vs low converting based on their traffic, and take different actions based on this. </p>
<p><img src="/link/13bc50b529da42a7b8d999e34ab2d301.aspx" width="800" alt="Image perform-stats-converts.png" /></p>
<p>In Episerver Perform there is also a merchandizing functionality where you can override the recommendations given. For the different widgets, you can create rules that push specific products or products with specific attributes on the different positions of the recommendation widgets.</p>
<p><span>This is really functionality where Episerver Performs stands out from its competitors! You can combine the </span><span>strength </span><span>of the AI with the flexibility to also do merchandizing together with the recommendations. </span></p>
<p><span><img src="/link/5fe65574d88a4361b12b33cdb0118c2f.aspx" width="800" alt="Image perform-merchandizing.png" /></span></p>
<p>Besides the Personalization Portal, as a Episerver Personalization customer, you will also get a monthly report with a summary of the result from your personalization. </p>
<p>Send an email to <a href="mailto:personalization@episerver.com">personalization@episerver.com</a> today to start testing Episerver Perform! Or <a href="http://www.episerver.com/contact/new/contact-us/">contact Episerver to find out more</a>.</p>
<p>This was an introduction to Episerver Perform. Episerver Reach will give you the same functionality to use in your email marketing. That will be covered in another blog post.</p>
</body>
</html>