Installation
By default, Alokai integration for SmartEdit is meant to be used as a Storefront module. However, it can also be installed in any Next or Nuxt application.
Requirements
- Server Middleware application (latest version),
- SmartEdit included in your SAP Commerce Cloud project,
- Node.js version
22.14.0
or higher, - @vsf-enterprise NPM registry access.
Bootstrapping SmartEdit
Before you start using our SmartEdit integration, you need to bootstrap your SAP Commerce Cloud environment with SmartEdit. This includes configuring SmartEdit in your SAP Commerce Cloud project, setting up the necessary permissions, and preparing your storefront for SmartEdit integration.
The bootstrapping process includes configuring SmartEdit in SAP Commerce Cloud, setting up storefront permissions, and preparing your application for SmartEdit integration. For detailed instructions, please refer to our Bootstrapping SmartEdit guide.
Installing dependencies
In your Server Middleware application, install the following dependencies:
yarn add @vsf-enterprise/smartedit-api
Configuring Server Middleware
The next step is configuring the SmartEdit integration in the Server Middleware.
Key concept - Server Middleware
Middleware concept is described in detail in our Key concepts: Server Middleware docs.
Add the following configuration to your Server Middleware configuration file. Replace the placeholders with your SAP Commerce Cloud API data.
import type { Integration } from "@vue-storefront/middleware";
import type { MiddlewareConfig as SmarteditMiddlewareConfig } from "@vsf-enterprise/smartedit-api";
export default {
integrations: {
smartedit: {
location: "@vsf-enterprise/smartedit-api/server",
configuration: {
api: {
uri: "<your_sapcc_api_uri>",
baseSiteId: "<your_base_site_id>",
catalogId: "<your_catalog_id>",
catalogVersion: "<your_catalog_version>",
defaultLanguage: "<your_default_language>",
defaultCurrency: "<your_default_currency>",
},
} satisfies Integration<SmarteditMiddlewareConfig>,
}
}
};
Configuring Alokai SDK
The last step in the process is configuring Alokai SDK for SmartEdit in your frontend application.
Key concept - SDK
SDK core is described in detail in our SDK docs.
Add the following configuration to your SDK modules:
import { defineSdkModule } from '@vue-storefront/next';
import { smartEditModule } from '@vsf-enterprise/smartedit-sdk';
export const smartedit = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
buildModule(smartEditModule, {
apiUrl: `${config.apiUrl}/smartedit`,
ssrApiUrl: `${config.ssrApiUrl}/smartedit`,
defaultRequestConfig: {
headers: getRequestHeaders(),
},
}),
);
export * from './smartedit';
// ... other module exports