Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.

 

PuneetGarg
Dec 3, 2024
  312
(6 votes)

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.

Dec 03, 2024

Comments

David Ortiz
David Ortiz Dec 3, 2024 07:54 PM

Great article!! Thanks for sharing

Sujit Senapati
Sujit Senapati Dec 4, 2024 12:59 AM

Thanks Puneet. When it is SSOId, it usually unique, it can be either an identifier or an email address that is shared between the system. But how would you retrieve and pass in the anonymous id from external site? E.g. user moved to a secondary site and you want to maintain the cart with anonymous id? How will read the cookie from other secondary site?

PuneetGarg
PuneetGarg Dec 4, 2024 01:11 AM

HI @sujit as I mentioned in note section of my blog firstly we need to setup EPiServer_Commerce_AnonymousId cookie at top domain.

Example  :-

front end site is hosted at xyz.testing.com

other site at abc.testing.com

so EPiServer_Commerce_AnonymousId setup at top domain (.testing) and when you load catalog item from api you will get these setup at brower and using that we can use that .

 

Sujit Senapati
Sujit Senapati Dec 6, 2024 11:21 PM

Thanks Puneet. Yes, the request is coming from FE then all the cookies can be accessed and will be able to detect the AnonymousId as well.

Abhi
Abhi Dec 12, 2024 10:45 PM

Nice article !

Please login to comment.
Latest blogs
Image Analyzer with AI Assistant for Optimizely

The Smart Image Analyzer is a new feature in the Epicweb AI Assistant for Optimizely CMS that automates the management of image metadata, such as...

Luc Gosso (MVP) | Jan 16, 2025 | Syndicated blog

How to: create Decimal metafield with custom precision

If you are using catalog system, the way of creating metafields are easy – in fact, you can forget about “metafields”, all you should be using is t...

Quan Mai | Jan 16, 2025 | Syndicated blog

Level Up with Optimizely's Newly Relaunched Certifications!

We're thrilled to announce the relaunch of our Optimizely Certifications—designed to help partners, customers, and developers redefine what it mean...

Satata Satez | Jan 14, 2025

Introducing AI Assistance for DBLocalizationProvider

The LocalizationProvider for Optimizely has long been a powerful tool for enhancing the localization capabilities of Optimizely CMS. Designed to ma...

Luc Gosso (MVP) | Jan 14, 2025 | Syndicated blog