Skip to main content

Integration Guide: SAP Commerce

This guide explains how to set up the default CMS integration with SAP Commerce (formerly Hybris), which is included in the @archibald/commerce package.

1. Server-Side Configuration​

On the server, you need to register the CMSModule with the CommerceCMSProvider. This provider is the default and is designed to work with the SAP Commerce OCC APIs.

// src/shop/server/module/server.tsx
import { CMSModule } from '@archibald/cms';
import { CommerceCMSProvider } from '@archibald/commerce/cms';
import { CoreServer } from '@archibald/server';

export class Server extends CoreServer {
    public async initModules() {
        const { hybris } = this.configService.get();
        await this.registerModules([
            new CMSModule({
                provider: new CommerceCMSProvider({ config: hybris.api })
            }),
            // ... other modules
        ]);
    }
}
  • Localization: The CommerceCMSProvider automatically handles multi-language content. It uses the user's session to determine the correct language and passes the appropriate parameters to the OCC APIs. You do not need to do anything special in your components.

2. Client-Side Configuration​

On the client, configure the CMSClient to use the CommerceCMSAdapter.

// src/shop/client/api/creators/cms.ts
import { CMSClient } from '@archibald/cms';
import { CommerceCMSAdapter } from '@archibald/commerce/cms';
import { api } from 'shop/client/api';

export default new CMSClient({
    adapter: CommerceCMSAdapter,
    api,
});

Remember to also provide this client to your app using the ProviderComposer as shown in the Connecting a Custom CMS guide.

3. SmartEdit (Live Editing) Integration​

How it Works​

The CommerceCMSAdapter automatically adds data-smartedit-* attributes to your CMS components when the application is viewed inside the SmartEdit iframe. SmartEdit uses these attributes to identify editable components and trigger real-time updates.

Configuration​

To enable SmartEdit integration, you must provide previewOptions when creating your CMSClient, as shown below. See also the Preview & Live Editing recipe.

// src/shop/client/api/creators/cms.ts
import { CMSClient } from '@archibald/cms';
import { CommerceCMSAdapter } from '@archibald/commerce/cms';
import { api } from 'shop/client/api';

export default new CMSClient({
    adapter: CommerceCMSAdapter,
    api,
    previewOptions: {
        // This is required for SmartEdit integration
        scriptPath: 'https://<your-hybris-domain>/smartedit/smartedit-injector.js',
        // You may also need to whitelist the SmartEdit domain
        authorizedUrls: ['<your-hybris-domain>']
    }
});

Once this is configured, the CommerceCMSAdapter handles the rest of the integration automatically when a valid preview ticket is present in the URL.