AEM and Adobe Commerce Integration Using Commerce Integration Framework aem-framework

The Experience Manager and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). CIF enables AEM to directly access and communicate with the commerce instance using Adobe Commerce’s GraphQL APIs.

Minimum supported GraphQL API version is 2.3.5. Certain features are only supported in newer versions or just in the Adobe Commerce edition.
GraphQL is currently used in two (separate) scenarios in Adobe Experience Manager (AEM) as a Cloud Service:

Architecture Overview overview

The overall architecture is as follows:

CIF Architecture Overview

Within CIF, there is support for server-side and client-side communication patterns.
Server-side APIs calls are implemented using the built-in, generic GraphQL client in combination with a set of generated data models for the commerce GraphQL schema. Also, any GraphQL query or mutation in GQL format can be used.

For the client-side components, which are built using React, the Apollo Client is used.

AEM CIF Core Component Architecture cif-core-components

AEM CIF Core Component Architecture

AEM CIF Core Components follow very similar design patterns and best practices as the AEM WCM Core Components.

The business logic and backend communication with Adobe Commerce for the AEM CIF Core Components is implemented in Sling Models. In case it is necessary to customize this logic to fulfill project-specific requirements, the delegation Pattern for Sling Models can be used.

The Customizing AEM CIF Core Components page has a detailed example and best practice on how to customize CIF Core Components.

Within projects, AEM CIF Core Components and custom project components can easily retrieve the configured client for an Adobe Commerce store associated with an AEM page via Sling Context-Aware configuration.

Search search

CIF provides out-of-the-box a Search Core Component that is a server-side rendered search experience based on Commerce GraphQL API. Commerce customers have the option to use Live Search instead. Follow this link to learn more about the CIF - Live Search integration.