CoreMedia is a powerful content management system that can easily integrate with commerce systems to provide seamless augmentation of commerce shop systems. We provide the integration code for the open-source Magento system as an example of this.
Magento <=> CoreMedia
We’ve used the open-source Magento Commerce Platform to illustrate the LiveContext Fragment connector. The integration works both ways: there is an extension in the CoreMedia workspace which connects to the commerce system and makes it possible to extend and edit product catalog content within CoreMedia Studio and there is a CoreMedia widget which is installed on the commerce side to accept web content fragments delivered by CoreMedia.
Features of the integration
Content delivery: In this integration, we are relying on the commerce system for delivering the content pages. CoreMedia is used to augment content and deliver HTML fragments and pictures which are included in the storefront.
Catalog integration: Once the CoreMedia system has a connection to the commerce system, the commerce content (like products and categories) will be visible in the CoreMedia Studio. It is possible to browse through the catalog using list views and thumbnails or to search for content.
View and edit commerce content: On opening category or product detail pages in Studio, there is a panel with editable information and a panel for previewing the content. Editing the content automatically updates the preview with the changes.
Fragment templates: Using CoreMedia’s Frontend Developer Workflow, you can efficiently develop a theme to render fragments on the CoreMedia side.
Further integration points: With a bit more effort, one can take advantage of many exciting CoreMedia features, such as personalization, user reviews and comments, asset management, etc.
Technical Aspects of the Integration
The Magento integration described in this article is based on the product CoreMedia LiveContext 3. The existing IBM extension has been replaced with the Magento extension. A detailed documentation of how to connect a Magento system with CoreMedia and vice versa is described on the CoreMedia Labs Github repository wiki.
Components and Communication
The CoreMedia Fragment Connector for Magento is based on the Widget-Approach. Magento supports widgets that can be placed on the content, category, and product pages. By adding the CoreMedia widget in the content section of the Magento administration, the storefront will be augmented.
On the CoreMedia side (Studio/CAE) the communication with Magento is supported by implementing the CoreMedia Commerce API which will retrieve all necessary information from Magento using the Magento REST API.
The integration comes with an additional preview CAE extension that supports link building for the Studio preview and augmented pages. To keep this integration simple, the live CAE is not provided.
The integration is a commerce led scenario where the commerce system is rendering the actual pages. The actual Magento session is not known to the CAE but can be provided by customizing the LiveContext Fragment connector.
Studio Extension and Demo Content
By implementing the CoreMedia Commerce API and providing the corresponding “LiveContext” settings document in the content repository, the Magento product catalog will automatically be shown in the Studio library.
The Magento extension contains the “Luma” demo site content that should be imported to the content repository and provide all required configurations. Additional Studio plugins are not required for this integration.
The integration supports the regular CAE web development workflow (see our frontend developer documentation).
Interested in a deeper understanding of commerce integrations in CoreMedia? See what we’ve cooked up for you in our CoreMedia Labs.
Github project: Coremedia-Magento Extension as source code
Technical wiki: Instructions on integrating Magento into CoreMedia LiveContext 3.
Videos: Magento integration demo in CoreMedia Studio
Testsystem: CoreMedia fragments for vanilla Magento Luma Systems (see Technical Wiki for details)