Swapping eCommerce Platforms

Alokai Storefront is primarily an e-commerce accelerator built on top of the Alokai Connect technology. It's designed to help you either switch e-commerce platforms or to develop storefronts for multiple platforms simultaneously.

This guide will walk you through the steps required to switch your e-commerce platform integration with the Alokai Storefront.

Overview

By using the Unified Data Layer and normalized data structures, you can switch your e-commerce platform integration without having to overhaul your frontend application.

Instead of using platform-specific data and methods for fetching, creating, and updating data, the Unified Data Layer provides a consistent API for all e-commerce platforms.

This means, that you can change the underlying e-commerce backend without making significant changes to your frontend code.

Step-by-Step Guide to Switching Platforms

1. Update Middleware Configuration

Navigate to the apps/storefront-middleware/middleware.config.ts file.

a. Replace the import statements to use the Unified API for your new e-commerce platform.

import type { MiddlewareConfig } from "@alokai/connect/middleware";
import { config as sapccConfig } from "./integrations/sapcc"; 
import { config as sfccConfig } from "./integrations/sfcc"; 
import { config as contentfulConfig } from "./integrations/contentful";
import { config as algoliaConfig } from "./integrations/algolia";

export const config = {
  integrations: {
    algolia: algoliaConfig,
    cntf: contentfulConfig,
    commerce: sapccConfig, 
    commerce: sfccConfig, 
  },
} satisfies MiddlewareConfig;

b. Switch the commerce on the types level:

The frontend apps require types from the Middleware to properly work. So with switching the config, we need to update the types as well.

export type * from "./integrations/sapcc/types"; 
export type * from "./integrations/sfcc/types"; 

c. Switch the branch of the CMS system (optional):

If you are not changing the CMS platform, you probably have a separate branch prepared to work with new ecommerce platform. So, you need also to switch this branch, for e.g. in Contenful you just need to update the CNTF_ENVIRONMENT variable.

CNTF_ENVIRONMENT="sapccv2"
CNTF_ENVIRONMENT="sfccv2"

d. Adjust the unified API extension configuration:

If your prior integration (like SAP commerce cloud) used a specific methods to perform tasks like transforming image URLs or filtering facets, you may need to remove or adjust these configurations in the config.ts file in the proper directory in the integrations directory.

e. Enable B2B methods (if applicable):

If you're switching to (or adding B2B support onto an existing) SAP Commerce Cloud integration, override the Unified Methods with the B2B implementation shipped in the @vsf-enterprise/unified-api-sapcc/b2b subpath:

import { createUnifiedExtension } from '@vsf-enterprise/unified-api-sapcc';
import { methods as b2bApiMethods } from '@vsf-enterprise/unified-api-sapcc/b2b'; 

export const unifiedApiExtension = createUnifiedExtension({
  config: {
    defaultCurrency: "USD",
  },
  normalizers: {
    addCustomFields: [{}],
  },
  methods: { 
    override: { 
      ...b2bApiMethods, 
    }, 
  }, 
});

As some of the SAP Commerce Cloud API endpoints are the same for B2C and B2B, b2bApiMethods only overrides the implementation for:

• getCustomer
• loginCustomer
• updateCustomer
• addCartLineItem
• updateCartLineItem

As the B2B methods implement the same contract of the Unified Methods as B2C methods, there is no need to change the Storefront code.

2. Validate the Integration

After making the necessary changes to your configuration, it's essential to verify that the Alokai Storefront communicates correctly with the new e-commerce backend.

• Restart application with yarn dev command and check if there are no errors.

Ensure that:

3. Review and Update Alokai Storefront Features

Different e-commerce backends might offer various features. Ensure you review any custom functionality or features specific to your previous backend and adapt or remove them as necessary for the new platform.