AEM and Magento Integration using Commerce Integration Framework
kautuk_sahni
Community Manager
kautuk_sahni
Community Manager
Community Manager01-07-2019
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/
