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 dotenv from "dotenv";
dotenv.config();

- import { sapccConfig } from "./integrations/sapcc";
+ import { sfccConfig } from "./integrations/sfcc";
import { contentfulConfig } from "./integrations/contentful";
import { algoliaConfig } from "./integrations/algolia";

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

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 UnifiedEndpoints } from "./integrations/sapcc/types";
+ export { type UnifiedEndpoints } from "./integrations/sfcc/types";

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

If you 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.

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:

• All API requests are correctly directed to the new backend
• Data normalization is functioning as expected
• The frontend correctly displays data from the new backend

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.