Deep dive into a seamless customer experience with AEM using Adobe’s CIF
As we already know, the power of AEM in a digital world. It offers many capabilities to its customers to build their website quickly and faster to the market, including many features that reduce the complexity of authoring or core components that reduce the need for custom code, accelerating the time to market for brands.
With the ever-increasing demand for integration of AEM and commerce framework, Adobe has developed a framework that can help you connect AEM with any commerce (Adobe commerce, hybris, etc.) engine. This framework is known as CIF (Commerce Integration Framework).
CIF extends the Experience Manager with commerce capabilities and standardizes the integration with a commerce engine. It connects AEM with the commerce engine to provide seamless content and commerce experience.
Key Feature of CIF
- It extends the AEM authoring experience which gives many capabilities such as introducing a product tab in the side panel, category, and product picker resource type for dialogs. These all features can be explored from here.
- CIF provides out-of-the-box commerce core components that reduce the need for custom code, accelerating the time to market for brands. These components can be extended using a sling delegation pattern.
- AEM standard archetype provides the option of including changes for commerce projects, including CIF core components and other supporting configurations by default. This can be done by selecting option Y for the includeCommerce field while creating an archetype from here.
- This framework can connect to any commerce engine(Adobe commerce, Hybris, etc.), but please note that Adobe commerce is default supported with standard functionality that is already part of CIF. If you need to connect to any other commerce engine or extend CIF, it can be achieved using Adobe IO (or any serverless solution) for API mapping. The same can be referred from the below diagrams:
(For Adobe Commerce)
[Reference: https://experienceleague.adobe.com/docs/experience-manager-65/assets/AEM_Magento_Architecture.png?lang=en]
(For Non-Adobe Commerce Engine)[Reference:https://experienceleague.adobe.com/docs/experience-manager-65/assets/AEM_nonMagento_Architecture.png?lang=en]
- The AEM Venia reference storefront is a modern production-ready reference storefront showcasing a basic B2C commerce journey. The code can be accessed from here.
Refer to this blog to go into greater detail about our practical experience with CIF. Here we will set up Adobe Commerce (community edition), and AEM with venia open source codebase.
