Adobe Tech Blog
Published in

Adobe Tech Blog

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).

Commerce Add-on

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.

Finding product data is easy with CIF pickers.

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.

Authors can find and use product data directly within the Adobe Experience Manager page editor.

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
  • Checkout

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.

Some of the Commerce Core Components available in CIF.

A full list of all Commerce, along with Adobe Experience Manager’s Web Content Management (WCM) Core Components, can be found in the Adobe Experience Manager Component Library.

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.

Summary

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.

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe Developers on Twitter for the latest news and developer products.

Resources

  1. Adobe Experience Manager
  2. Adobe Experience Manager Content and Commerce
  3. Commerce Integration Framework
  4. Adobe Experience Manager Sites
  5. Adobe Experience Manager Assets
  6. Getting Started with Adobe Experience Manager as a Cloud Service
  7. Cloud Manager Documentation
  8. Adobe Experience Manager 6.5 Content and Commerce
  9. Adobe Experience Manager Component Library
  10. Web Content Core Components
  11. Commerce Integration Framework Core Components
  12. Venia Storefront
  13. Project Archetype
  14. Creating Multiple Categories and Product Pages
  15. Adobe Commerce GraphQL Overview
  16. Adobe Commerce Multi-Store Setup
  17. Adobe Experience Manager Launches
  18. Working with Content Fragments
  19. Enrich Product Data with Associated Adobe Experience Manager Data (Experience Fragments)
  20. Customize CIF Core Components
  21. CIF Advanced URL Configurations
  22. Getting Started with Adobe Experience Manager Commerce as a Cloud Service
  23. Introduction to the Adobe Experience Manager as a Cloud Service SDK
  24. Adobe Managed Services

--

--

--

News, updates, and thoughts related to Adobe, developers, and technology.

Recommended from Medium

How to Adapt John D. Rockefeller’s Sales Pitch for Your Business

Spotify Ad Studio Platform Is Now Available in Ghana

Tips for Writing Excellent Amazon Product Description

The Best PR Lessons I Learned in 2017

“How I Run 9 Different Profitable YouTube Channels and Make 6 Figures From Them”

Writing for the world in real time

20 Email Marketing Influencers To Learn From In 2019

5 Things You Should Know While Hiring for Content Marketing Teams

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Markus Haack

Markus Haack

I'm a software engineer, passionate about Home Assistant and automating our house. In my professional life I’m working on commerce and content topics at Adobe.

More from Medium

Mutation Testing Setup Microservices-Sonar

Which is more secure? Symmetric or Asymmetric

Managing Confluence Permissions

UML Design Basics -part 2-