Swapping E-Commerce Platforms

Learn how to switch your e-commerce platform integration with the Alokai Storefront and Unified Data Layer

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.

Alokai Connect

If you are not familiar with Alokai Connect, consider learning more in the Vue Storefont Connect documentation.

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 { Context, Config, methods, normalizers } from "@vsf-enterprise/unified-api-sapcc";
+ import { Context, methods, normalizers } from "@vsf-enterprise/unified-api-commercetools";

b. Modify the value of the INTEGRATION variable in env.ts:

- const INTEGRATION = "sapcc" satisfies UnifiedStorefrontIntegration;
+ const INTEGRATION = "commercetools" satisfies UnifiedStorefrontIntegration;

c. (Optionally) 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 middleware.config.ts file.

- export const unifiedApiExtension = createUnifiedExtension<Context, Config>()({
+ export const unifiedApiExtension = createUnifiedExtension<Context, Config>()({
  normalizers,
  apiMethods: {
    ...mockMethods,
    ...methods<typeof normalizers>(),
  },
  config: {
-   transformImageUrl: (url) => {
-     // fn implementation, skipped for readability
-   },
    currencies: ["USD", "EUR"],
    defaultCurrency: "USD",
  },
});

mockMethods will be used as a fallback, when a method is not available for given integration. mockMethods implement all the same Unified Methods as the methods object, but they return mocked data. Whenever the e-commerce integration doesn't provide a specific method, the mockMethods will be used instead.

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.