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.