Architecting a Better Ecommerce Experience with Adobe Experience Manager’s Commerce Integration Framework
The Commerce Integration Framework (CIF) is a powerful Adobe Experience Manager extension for building integrated and seamless content and e-commerce experiences for customers at every stage of their journey with your brand. In this second blog in our CIF series, we take a deeper dive into the framework architecture and integrations to help you use Adobe Experience Manager with your commerce solution.
In this second installment of our Adobe Experience Manager Content and Commerce series, we’ll describe the functional building blocks of the Commerce Integration Framework (CIF) — a powerful extension for building integrated and seamless content and e-commerce experiences for customers at every stage of their journey with your brand. We’ll introduce you to the architecture and design principles of CIF and some of the integration options you have for using Adobe Experience Manager and your commerce solution together.
If you’re not familiar with Adobe Experience Manager’s Content and Commerce yet, the first blog in this series, Taking a Deep Dive into Adobe Experience Manager’s Commerce Integration Framework, will provide a general overview and introduction to help set the stage for what we cover here. In this blog, we’ll start with the core elements of the CIF.
Core Elements of the Commerce Integration Framework
The three core elements of the CIF are the Commerce Add-on and authoring tools, Commerce core components, and an out-of-the-box accelerator storefront (Venia Storefront).
The Commerce Add-On provides the commerce experience management tools. This tooling is tightly integrated with Adobe Experience Manager Sites and Adobe Experience Manager Assets to bring commerce context into experience pages and associate products with marketing assets in Adobe Experience Manager Author and Publish.
Marketers can use out-of-the-box commerce authoring tools to navigate the product catalog and link experience and content fragments or assets to products using our product and category pickers. Product data is also directly accessible by the marketer via Adobe Experience Managers built in global content search.
Marketers can also access product data directly through the global content search built into Adobe Experience Manager. While editing pages and building experiences, Adobe Experience Manager authors have access to product data from within the Adobe Experience Manager page editor. Like any other asset or content element, authors can search and access products directly and drag and drop them onto the page.
The Commerce Add-On is available for all Adobe Experience Manager deployment models, including Adobe Experience Manager Cloud Service. Once enabled, it will be automatically deployed to all environments with the Cloud Manager program.
You can download the Commerce Add-on from the Software Distribution portal for local development using the Adobe Experience Manager Web SDK or for Adobe Experience Manager 6.5 deployments hosted on-premise or by Adobe Managed Services.
Commerce Core Components
In Adobe Experience Manager, components are the structural elements authors use to build and compose engaging experiences. The CIF Core Components are a set of standardized of Adobe Experience Manager commerce-related components you need to start building your storefront experience quickly, including:
- Product details and lists
- Shopping cart
The CIF Core Components also include marketing components like teasers, carousel, and featured and related products. Using customizable components can significantly reduce the need for custom code in your project, accelerating time to market.
CIF Core Components are reusable and combine Adobe Experience Manager components that are rendered server-side with client-side React components to build flexible and dynamic experiences. Using standardized data models based on Adobe Commerce GraphQL schema, they can be used with Adobe Commerce or third party commerce engines.
CIF Core Components support flexible configurations of dynamic product and category pages, allowing you to set up specialized templates for individual products or product categories.
With Adobe Experience Manager’s Multi-Site Manager, you can use CIF to build complex e-commerce sites selling into multiple geographic regions, each with different languages and currencies. Adobe Experience Manager’s multi-site concept is mapped to the multi-store configuration on Adobe Commerce. An Adobe Experience Manager site can be mapped to one or multiple stores with Adobe Commerce.
Marketers also have access to staged data and product preview from Adobe Commerce from within their Adobe Experience Manager author environment. The commerce authoring tools and CIF Core Components have visual notifications built in to let page editors know about nonpublished products. This feature can be used in combination with Adobe Experience Manager Launches to pre-build experiences for future publication.
Additionally, any product or category can be enriched with extra marketing content from Adobe Experience Manager by using Content Fragments or Experience Fragments allowing marketers to easily build engaging product experiences without any extra development effort.
The CIF Core Components follow the same design principles and patterns used by Adobe Experience Manager WCM Core Components and have internationalization support built in. This gives developers the ability to customize and extend the CIF Core Components at multiple levels and for multiple sites anywhere in the world. Built with SEO in mind, Core Components also allow developers to use different product & category page URL formats based on their needs.
Commerce Integration Framework architecture concepts
The Adobe team has completely redesigned and rewritten CIF using a new end-to-end (E2E) architecture approach and has revamped the design approaches used in previous versions of CIF going back to when it was first introduced in Adobe Communique 5 (Adobe CQ5).
Built on cloud-native principles
CIF is built using cloud native principles and integrates seamlessly with Adobe Experience Manager Cloud Service. A key feature of the new CIF is the separation of responsibilities and source of truth for content and commerce data. While Adobe Experience Manager offers unparalleled capabilities for managing large experiences and terabytes of assets — product catalog management, shopping cart transactions, and other elements of the online shopping experience belong to the commerce solution.
The new architecture of the CIF eliminates the need for import and synchronization of catalog data into Adobe Experience Manager. Instead, the commerce catalog is loaded dynamically from the e-commerce platform based on dynamic Adobe Experience Manager template pages. Commerce transactions are no longer routed through Adobe Experience Manager. Now, they go directly from the end user’s browser to the commerce backend.
This approach supports the different roles involved, allowing merchants and product managers to focus on catalog management while marketers work to create relevant customer experiences in Adobe Experience Manager.
Designed for seamless integration with Adobe Commerce and third party solutions
Another important design goal of CIF is to provide seamless integration with Adobe Commerce seamless as well as third party commerce solutions. By design, CIF is open for all e-commerce backend solutions and can be integrated in a headless manner and accessed via APIs.
Adobe Commerce can be natively integrated with Adobe Experience Manager using CIF. This is because CIF uses the GraphQL schema of Adobe Commerce. Using CIF with GraphQL APIs allows headless communication with Adobe Commerce or third party commerce solutions.
With the commerce product experience management tools and CIF Core Components standardized around Adobe Commerce GraphQL schema, they support enrichment with any kind of content in Adobe Experience Manager by using content fragments or experience fragments together with the commerce catalog data.
Using a standardized Adobe Commerce GraphQL schema CIF allows merchants to grow their projects beyond Adobe Experience Manager and their websites. GraphQL can be easily extended, allowing you to add custom data models and data from additional services, all using a single endpoint, easily.
Other customer and Adobe solutions can access the commerce data via GraphQL as well. This allows customers to build complex omnichannel scenarios and reduce development time to quickly adapt to changing market conditions.
The aim of this blog was to provide you with a better understanding of how CIF’s functional elements, design principles, and architecture provide unparalleled flexibility for integrating Adobe Experience Manager with e-commerce solutions, especially on Adobe Experience Manager as a Cloud Service. In our next blog in our CIF series, we’ll show you how you can use CIF to integrate with Adobe Commerce or a third party solutions.
- Adobe Experience Manager
- Adobe Experience Manager Content and Commerce
- Commerce Integration Framework
- Adobe Experience Manager Sites
- Adobe Experience Manager Assets
- Getting Started with Adobe Experience Manager as a Cloud Service
- Cloud Manager Documentation
- Adobe Experience Manager 6.5 Content and Commerce
- Adobe Experience Manager Component Library
- Web Content Core Components
- Commerce Integration Framework Core Components
- Venia Storefront
- Project Archetype
- Creating Multiple Categories and Product Pages
- Adobe Commerce GraphQL Overview
- Adobe Commerce Multi-Store Setup
- Adobe Experience Manager Launches
- Working with Content Fragments
- Enrich Product Data with Associated Adobe Experience Manager Data (Experience Fragments)
- Customize CIF Core Components
- CIF Advanced URL Configurations
- Getting Started with Adobe Experience Manager Commerce as a Cloud Service
- Introduction to the Adobe Experience Manager as a Cloud Service SDK
- Adobe Managed Services