AEM and Magento Integration using Commerce Integration Framework

[kautuk_sahni]

Experience Manager and Magento are seamlessly integrated using the Commerce Integration Framework (CIF). CIF enables AEM to access a Magento instance and bind the catalog data via GraphQL. It also allows AEM Authors to use Product and Category Pickers and a read-only Product Console to browse through product and category data fetched on-demand from Magento. In addition, CIF provides an out-of-the-box storefront that can accelerate commerce projects.

Architecture

The overall architecture is as follows:

AEM Venia Reference Store-front

The AEM Venia reference storefront is a modern production-ready reference storefront showcasing a basic B2C commerce journey. It can be used to kickstart commerce projects and accelerate projects using AEM, CIF, and Magento. It demonstrates best practices for integrating AEM and Magento and shows how to use the Commerce Core Components. It also provides pre-sales with a reference site to demo the integration between AEM and Magento.

The project is open source and available on GitHub.

AEM CIF Core Components and AEM Authoring

Basic components are provided, common across commerce implementations such as Product Detail, Product List, Navigation, Search, etc. They can be used as-is or be extended.

The AEM CIF Core Components work like the AEM Sites Core Components but are dedicated to commerce specific use-cases.

These components key benefits are:

• They are easy to use in your projects.
• They can be used as-is or with very minimal modifications.
• They provide best practices for connecting with Magento via GraphQL APIs or REST APIs

Components such as Product Teaser and Product Carousel are provided to enable AEM Authors to create Experience pages in AEM, combining marketing and commerce content. These components can be easily dragged and dropped on to a content page created in AEM and linked to specific products or categories using the Product or Category Picker in AEM.All the components are open-sourced on GitHub.

This shows full transparency on changes made going forward and allows you to get the latest version very easily. You can also provide pull requests for improvements and bug fixes that can be incorporated.

AEM Commerce connector for Magento and GraphQL

This connector provides integration of Magento products and categories in the AEM Commerce console as well as authoring features like product and category pickers. It also provides authoring features to display product and category information of data stored in Magento from within AEM by using Magento's GraphQL APIs

• The AEM Commerce console shows a hierarchal view of products stored in Magento organized by category.
• The Product Picker is an AEM Dialog field, similar to the Asset Picker, that would be used with an AEM Component to allow a user to select one or more products.
• The Category Picker is an AEM Dialog field, similar to the Asset Picker or Product Picker, that would be used with an AEM Component to allow an author to select one or more category.

The AEM Commerce connector is expected to be used to enhance the AEM authoring experience with deeper integration with Magento products and categories.

It is open source on GitHub and you are welcome to contribute.

Even if you have very specific use-cases, the connector can be used a reference to build additional extensions to the AEM UI, but keep in mind that any extensions to the AEM UI can have an impact on future upgrades.

Read full article @ AEM and Magento Integration using Commerce Integration Framework

Community Resources:

• How to integrate  Adobe Experience Manager(AEM) with Magento ecommerce platform - part1 - YouTube
• How to integrate Adobe Experience Manager(AEM) with Magento ecommerce platform - part2 - YouTube
• How to integrate Adobe Experience Manager(AEM) with Magento ecommerce platform - part3 - YouTube

Webinar Recording: https://my.adobeconnect.com/p5cqfbrtdbus/

[Sharma_Shruti]

Can anyone please confirm that CIF Connector only works with secured GraphQL endpoint URL as the Magento I am using is currently not secured. While checking the logs, I get the message: HTTP protocol is not supported and while trying with HTTPS, it says - Connection Timed Out.

[venumuvva2019]

Yes i have received the same error. They are not supporting http. Have you got your issue resolved?

[mhaack]

Hi, this has been changed with the last release, which introduced a switch to use HTTP only as well. However, this is only recommended for local development or demonstrations. Don't disable HTTPS for production environments. 

[venkateshs73486]

Hi Kautuk,

My customer is planning to use custom integration mechanism b/w AEM and Magento.

Though we have suggested CIF, they have reservations about using it.

Do you have any information on how many customers use CIF and how is the feedback?

That would help us in convincing them.

[Albin_Issac]

Here is another blog with integrating AEM 6.5 with Magneto on-premise through CIF

https://www.albinsblog.com/2019/12/how-to-integrate-aem-with-magento-e-commerce-through-CIF-framewor...

[Lavanya_Pejjayi]

Hello Kautuk_Sahni & All,

I am facing an error in Venia project and other bundles that are related e-commerce integration. 

com.adobe.cq.commerce.magento.graphql,version=[9.0,10) -- Cannot be resolved 

However I have installed graphQL successfully and the graphQL bundle is active.  

Could someone assist me what went wrong.

[mhaack]

This looks like the you used a snapshot version of the Venia reference app, please use a release version: https://github.com/adobe/aem-cif-guides-venia/releases/tag/venia-2021.12.01

[Lavanya_Pejjayi]

Thanks mhaack 🙂.  The bundle is up and active.