Skip to main content

Recipe: Preview and Live Editing

This recipe explains how to set up and use the live preview and editing features for both SAP Commerce (SmartEdit) and Contentful.

SAP Commerce (SmartEdit)​

The integration with SAP Commerce's SmartEdit allows for live editing of your site's components directly from the SmartEdit interface.

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. This is covered in the SAP Commerce Integration Guide.

Contentful​

The integration with Contentful's live preview is handled by the @contentful/live-preview package.

How it Works​

The ContentfulCMSAdapter integrates with the Contentful live preview SDK and automatically adds the necessary data-contentful-* attributes to your components. The getPreviewWrapperComponent method of the adapter provides a wrapper that initializes the preview context.

Configuration​

  1. Install the Contentful Live Preview package:

    npm install @contentful/live-preview

  2. Configure the ContentfulCMSAdapter: Ensure you are using and configuring the ContentfulCMSAdapter in your CMSClient, as shown in the Contentful Integration Guide.

  3. Enable Live Preview in Contentful: In your Contentful space settings, go to "Content preview" and configure the preview URL for your Archibald application.

  4. Using the Preview: When you open a page from the Contentful web app in preview mode, it will be loaded in your Archibald application with the live preview features enabled.