Vue Storefront is now Alokai! Learn More
Swapping E-Commerce Platforms

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.

Overviewri:link

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 Platformsri:link

1. Update Middleware Configurationri:link

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 Integrationri:link

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 Featuresri:link

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.