Adobe Tech Blog
Published in

Adobe Tech Blog

How CIF Integrates with Adobe Commerce and Third-Party Commerce Solutions

Learn about the integration scenarios for Adobe Experience Manager with Adobe Commerce or third-party commerce solutions. To illustrate the flexibility that CIF offers, we describe a number of different integration options below that you can use with Adobe Experience Manager and CIF.

In the first post in this series, we introduced the Commerce Integration Framework (CIF), a powerful Adobe Experience Manager (AEM) extension for building integrated and seamless content and e-commerce experiences. In our second post, we took a deeper dive into CIF exploring its design principles and architecture and the different integrations it provides. In this post, we’ll delve more deeply into those integrations to illustrate the many options you have for using it with your own e-commerce solutions to provide unparalleled customer experiences.

CIF not only offers direct integration with AEM with Adobe Commerce, it also provides an integration layer for third party and homegrown commerce solutions. This is where Adobe Developer App Builder or an alternative integration platform would come into the picture.

Let’s walk through a few of the major scenarios covered in the diagram. The first question is: do you already have Adobe Commerce or plan to set it up? If your answer is “yes” then you have chosen the most straightforward integration architecture since CIF connects AEM directly. From there, you can follow the path below to see the main steps in setting up your integrations, which we will explain in more detail in the next section.

CIF implementation scenarios possible if you already have an e-commerce solution set up.
CIF implementation scenarios possible if you already have an e-commerce solution set up.

If you don’t have an e-commerce solution yet, you have a wider range of options depending on the commerce and product management solution you want and the capabilities of that software. You can see from the diagram below that how you’re managing your product data makes a big difference in the options you have and the amount of work necessary to achieve your objectives.

CIF implementation scenarios possible if you don’t yet have an e-commerce solution.
CIF implementation scenarios possible if you don’t yet have an e-commerce solution.

Different commerce solutions or Product Information Management (PIM) systems have different features and APIs. Depending on your business and company size you might be in the situation to manage your products in a spreadsheet? You can see from the diagram above that CIF provides integration options for all of these different scenarios, allowing you to bring your commerce data and processes into AEM. Now, let’s explore these implementation scenarios in more detail.

AEM + CIF + Adobe Commerce

AEM and Adobe Commerce are seamlessly directly integrated using CIF, which communicates with Adobe Commerce directly via GraphQL. This means no additional integration layer or software is needed.

Integrating Adobe Experience Manager and Adobe Commerce with CIF.
Integrating Adobe Experience Manager and Adobe Commerce with CIF.

For this kind of deployment, the AEM setup is very classic: AEM publish instance and AEM author instance plus AEM Dispatcher. With Adobe Experience Manager as a Cloud Service you’ll get the content delivery network (CDN), the CI/CD pipeline, and auto-scaling of the environment built in. AEM 6.5 deployments are supported. However, we recommend using Adobe Experience Manager as a Cloud Service for this integration to follow Adobe Experience Manager’s cloud native patterns.

On the backend, Adobe Commerce can be operated in Adobe’s own cloud infrastructure or hosted by the customer or a partner. If you host both solutions on cloud platforms, we recommend to co-located them in the same regions of the cloud provider.

All CIF communication with Adobe Commerce happens via GraphQL. These communications can come from both server-side and client-side CIF Core Components or Commerce authoring tools. For the pure commerce integration, no extra modules or extensions are needed for Adobe Commerce. However, using extended commerce features like Product Recommendations or Live Search, which are only available for Adobe Commerce, will require extra modules and configuration.

Multiple layers and options for caching are built into the architecture to reduce the load on the backend commerce system. If hosted in Adobe’s cloud infrastructure, Adobe Commerce provides a CDN that can also be leveraged for GraphQL calls. The CIF Core Components with the underlying CIF GraphQL client also come with optional caching built in. And of course, there are the standard Adobe Experience Manager Dispatcher caching and CDN capabilities built into Adobe Experience Manager as a Cloud Service.

AEM + CIF + third party commerce solutions

There are many use cases for third party commerce. The most obvious one is where a brand has built its online store with Adobe Experience Manager and a third party commerce solution. Another might be for a brand to showcase a product catalog on its website. With the flexibility that the CIF integration layer provides, catalog data can be retrieved from a product information management (PIM) system or any other database.

Integrating Adobe Experience Manager and third party commerce solutions with CIF.
Integrating Adobe Experience Manager and third party commerce solutions with CIF.

The setup for Adobe Experience Manager integrated with third party commerce solutions looks very similar to the previous one using Adobe Experience Manager together with Adobe Commerce. In fact, the Adobe Experience Manager part is exactly the same.

The difference in the setup for third party commerce solutions is the GraphQL API and data mapping part. Third party commerce or PIM systems have their own proprietary APIs and data models. The GraphQL mapping layer is responsible for transforming GraphQL queries into backend calls for the respective commerce system. The response data from the backend commerce engine is mapped into the Adobe Commerce GraphQL schema and sent back to the client. For the CIF Core Components, this is absolutely transparent because the common interface is the GraphQL schema.

Currently, most third party integrations map GraphQL calls into REST API calls. While we see a clear trend in commerce vendors providing GraphQL support, not all vendors are there yet.

This integration pattern can be applied for standard commerce solutions (commercial or open source) and for homegrown, in-house commerce services as well. And, Adobe has already helped to support a number of different customers with a variety of unique setups that are now using this integration pattern.

AEM + CIF + a product catalog database

This usage pattern is similar to the previous one but with one major difference: it is only suitable for product showcases, brand pages, or similar use cases without shopping functionality.

While this is a simplified version of the previous setup, it has its raison d’etre. There are three major use cases that benefit from this pattern:

  • Websites, for example manufacturing brands, that are only showing the products but not selling them online. These do not need a full-featured ecommerce setup.
  • Migration scenarios where customers previously managed (mostly smaller) product catalogs directly in Adobe Experience Manager or with Excel or CSV files.
  • As a proxy database setup if your PIM system doesn’t have APIs for direct data access.

With these use cases, there are no services providing commerce transactions, so shopping functionality like cart and checkout flows or customer account management aren’t possible.

Integrating Adobe Experience Manager and product catalog database with CIF.
Integrating Adobe Experience Manager and product catalog database with CIF.

The Adobe Experience Manager setup for these kinds of use cases is very classic, similar to the previous integration options. On the commerce side the commerce solution gets replaced with a product database. The product and catalog data in this scenario is provided by some database.

There are multiple options for a product database:

  • Classic relational databases like Postgres or commercial solutions
  • NoSQL databases like Azure Cosmos DB, AWS DynamoDB, MongoDB
  • Search and index based solutions like ElasticSearch

If Adobe Developer App Builder is chosen as an integration platform, you already get access to a cloud database or file storage layer via the Adobe I/O State library or Adobe I/O Files library.

For a smaller product catalog an online spreadsheet that can be accessed via some API like Google Sheet or Microsoft Excel will work as well. Even Airtable can be connected with CIF to provide product data.

Technical integration

While brands have several options to implement the GraphQL mapping layer for CIF, in our architecture diagrams, we used Adobe Developer App Builder as the integration layer to implement and run the GraphQL mapping layer for CIF because it is the most commonly used integration platform in CIF projects.

Adobe Developer App Builder provides a complete framework for building and deploying custom applications on Adobe’s serverless Adobe I/O Runtime platform and is available to all Adobe Experience Manager customers.

Using Adobe Developer App Builder

Together with Adobe Developer App Builder, CIF provides tools for creating a GraphQL API mapping layer for your commerce solution. Using App Builder, projects can implement the API translation layer between the commerce backend APIs and the Adobe Commerce GraphQL schema following this pattern.

Adobe maintains a third party GraphQL reference integration as a ready-to-use App Builder application blueprint. Our reference integration is implemented in JavaScript as a set of functions for Adobe I/O Runtime to provide a full working GraphQL service. The project follows App Builder best practices and can directly be deployed using the Adobe I/O CLI tool. The GraphQL implementation can handle product catalog queries for products and categories. Some cart queries and mutations with mock implementations for illustration are implemented as well.

The diagram below illustrates the architecture of this reference implementation. It shows how the GraphQL introspection is performed in order to build the final schema in its entirety. The dispatcher action provides catalog related parts of the schema via so-called local resolvers while the cartResolver action (remote resolver) contributes some cart related functionality. The full schema is aggregated with the dispatcher action code and sent to the client. While not shown, the dispatcher action can also cache the generated GraphQL schema because there’s no need to regenerate for each and every introspection call.

GraphQL introspection with an abstract architecture.
GraphQL introspection with an abstract architecture.

This next implementation diagram of the GraphQL reference illustrates how the GraphQL query execution works. Again, the cart part of the query is delegated to the cartResolver while the catalog related parts of the query are handled by the local resolvers of the dispatcher action. Local and remote resolvers both perform the backend calls to the commerce systems or database and then map the response back into the Adobe Commerce GraphQL schema. All the JSON responses are merged by the dispatcher action in order to build the full response.

The GraphQL query execution flow.
The GraphQL query execution flow.

We frequently update the reference project on GitHub to be compliant with the latest Adobe Commerce GraphQL schema. Starting with this blueprint, the GraphQL schema can be extended and customized by adding custom data models or load data from additional services, all using a single endpoint.

Partners are using it, following our best practices, to build CIF integrations for major commerce vendors like SAP Commerce (Hybris).

Using alternative integration platforms

You can also integrate a commerce or database solution into CIF using your own infrastructure or by relying on one of the major cloud providers. The most common interface between CIF on the Adobe Experience Manager side of the commerce solution is still GraphQL and the Adobe Commerce GraphQL schema. Depending on the requirements and solutions you may already be using, you might use one of the two common approaches, both of which are illustrated in the diagram below.

Option A — The approach shown below is very similar to the usage of Adobe I/O Runtime except that I/O Runtime gets replaced by some alternative integration layer like MuleSoft or AWS. We’ve seen our customers use this approach when they were already using one of these or a similar integration platform and had developers trained to use it.

Options for using CIF to integrate Adobe Experience Manager and a third party solution on your own infrastructure.

Option B — Is an integration option when you have in-house commerce solutions or third party solutions where you are able to run custom code. The GraphQL API then can be implemented directly within the commerce solution using the tools and programming languages the commerce solution provides.

Brands have a lot of flexibility with Adobe’s CIF for AEM. With CIF, AEM integrates seamlessly with Adobe Commerce, making it the easiest solution for creating unparalleled e-commerce experiences. However, CIF along with the use of Adobe Developer App Builder can makes it easier than ever to create those experiences with other e-commerce solutions by providing many different integration options for using most any third party solution with AEM.

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. Taking a Deep Dive into Adobe Experience Manager’s Commerce Integration Framework
  2. Architecting a Better Ecommerce Experience with Adobe Experience Manager’s Commerce Integration Framework
  3. Adobe Experience Manager
  4. Adobe Commerce
  5. Adobe Developer App Builder
  6. Adobe Experience Manager Cloud Service
  7. GraphQL
  8. Product Recommendations for Adobe Commerce
  9. Live Search for Adobe Commerce
  10. Overview of Adobe Experience Manager Dispatcher
  11. Adobe Commerce GraphQL schema
  12. Adobe I/O: Dealing with Application State
  13. Adobe I/O: Setting Up Your Environment
  14. CIF GraphQL reference implementation on GitHub
  15. CIF Graphql Hybris Integration Project on GitHub

--

--

--

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

Recommended from Medium

Paid Udemy Courses for FREE with Coupons!

Two months in the making: what I learned and took away from this experience

Flutter | Jumping dots progress indicator

Programmers Aren’t Supposed to Be Socially Awkward

🟥Arth_2.0🟥

NLP, first steps using spaCy

7 Commands on GIT

Cloud Computing and Big Data Recipe Is Your Secret to Success

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

Don’t forget to make the best logger you can.

Discover the PandaDoc API with Postman

Why you should decide to do API Management

Make an ESLint plugin for your team