Shared optimizely cart between non-optimizley front end site

E-commerce ecosystems often demand a seamless shopping experience where users can shop across multiple sites using a single cart. Sharing a cart between an Optimizely site and a non-Optimizely site can be a challenge, but it's achievable with the right strategy. Here's a guide on how to set this up.

Overview

The goal is to enable users to share their cart and product information seamlessly across platforms. We achieve this by creating APIs that interact with the cart and product information. I've not added API's here.This implementation covers two scenarios:

1. Logged-In Users
2. Anonymous Users

1. Handling Logged-In Users

For logged-in users, leveraging their SSOID ensures that their context, including customer information and cart data, is consistent across sites. The SSOID is passed in the request header from the front end to the API.

Implementation Steps

1. Capture SSOID from Header
   Use the Request.Headers to extract the userId (SSOID) in the backend.

   Request.Headers.TryGetValue("userId", out var ssoId);
   

2. Fetch Customer Contact
   Using the SSOID, retrieve the logged-in user's context and cart data.

   private static CustomerContact GetCustomer(string ssoId)
   {
       var currentContact = CustomerContext.Current.CurrentContact;
       if (string.IsNullOrEmpty(ssoId))
           return currentContact;
   
       currentContact = CustomerContext.Current.GetContactByUserId($"String:{ssoId}");
       return currentContact;
   }
   

3. Sync Cart DataWith the CustomerContact object, the cart data can be fetched and synced between the sites.

Key Notes

• Ensure that the SSOID is securely transmitted in the header.
• Proper error handling is crucial to avoid unexpected failures if the SSOID is missing or invalid.

2. Handling Anonymous Users

Anonymous users lack a consistent SSOID, but their session can still be tracked using a cookie (EPiServer_Commerce_AnonymousId).

Implementation Steps

1. Capture Anonymous ID from Cookies
   Extract the cookie value that stores the anonymous user ID.

    Request.Cookies.TryGetValue("EPiServer_Commerce_AnonymousId", out var cookieValue); 

   Use Anonymous Cart
   With the cookieValue, fetch the anonymous user's cart from the backend.

2. Share Cart Across Sites
   Sync the cart data between the sites using the retrieved anonymous user ID.

Key Notes

• Cookies must be configured for cross-domain access if the sites are hosted on different domains.
• Ensure proper handling of cookie expiration and invalidation scenarios.

API Design

Below is a high-level example of how the API endpoints could look:

Get Cart for Logged-In User

Endpoint: GET /api/cart/loggedin

Header:   userId: <SSOID>

Get Cart for Anonymous User

Endpoint: GET /api/cart/anonymous
Cookie:

EPiServer_Commerce_AnonymousId=<cookieValue>

Response Example

Both endpoints would return the cart in a standardized format, e.g.:

{
    "items": [
        {
            "productId": "12345",
            "name": "Product A",
            "quantity": 2,
            "price": 50.0
        },
        {
            "productId": "67890",
            "name": "Product B",
            "quantity": 1,
            "price": 25.0
        }
    ],
    "total": 125.0
}

Conclusion

By leveraging SSOID for logged-in users and cookies for anonymous users, we ensure a seamless shopping experience across sites. With a robust API that interacts with the cart and product information, users can enjoy a unified cart system, enhancing user satisfaction and driving conversions.

Note:- This is the work only when all sites share the same top main domain.