How to integrate Magnolia and commercetools in 5 steps

Published on March 27, 2017 by Guest blogger



Magnolia partner Neofonie explains the benefits of integrating Magnolia with commercetools and gives five easy steps to integrate the two systems to create engaging e-commerce experiences.

Online retailers constantly face the challenge of creating relationships with their customers that will lead to increased purchases. Alongside a well-thought user story, emotional images and stories play an important role. Store systems quickly reach their limits here, as only a handful of page types are possible alongside the product overview and detail pages. Integrating a content management system gives online retailers greater flexibility and room to manoeuver when designing their e-commerce solutions.

In a demo store, Neofonie integrated the commercetools store system with Magnolia, thus combining the benefits of both systems.

Ease of integration

Both systems offer a modular configuration and open interfaces, making it possible to quickly integrate additional components and systems. This allows the incorporation of third-party solutions such as CRM systems, search functions, social media and tracking tools, in order to create a customized online store.

Multi-functionality

commercetools and Magnolia offer a wide range of multi-channel and omni-channel functions. Whether online, mobile or POS, you can reach your potential customers across all sales channels. While the commercetools product information management system forms the basis for managing catalog information for all sales channels, retailers also benefit from the multi-site and multi-language function in Magnolia, which allows expansion and internationalization.

Scalable infrastructure

commercetools' microservices structure makes it possible to flexibly integrate and scale commerce modules. Not only does this make online stores more dynamic and easier to handle, it also enables faster time-to-market. At the same time, the cloud-based Magnolia provides a scalable infrastructure that manages peak loads and downtimes.

Integrating commercetools with Magnolia is child's play, and allows you to exploit the benefits of both systems. Here are the 5 steps for developers to follow.

 

Step 1: Set up Magnolia

Setting up Magnolia for a store solution is not that different from other portal solutions. A computer setup with Docker is a suitable runtime environment that eases horizontal system scaling. Integrating Magnolia with commercetools using the Magnolia connector module usually requires at least the enterprise standard license for the CMS.

Another part of the basic Magnolia setup is defining a page template for the store's home page, which enables the store site pages to be combined in the Pages app.

 

Step 2: Creating a commercetools project

The second step is to create a new project in commercetools. After registration, it is necessary to define an organization within this project. It is also possible to define project developers for the project as a team (see http://dev.commercetools.com/getting-started.html).

Once registration is complete, you can access the developer area from the project dashboard. Here you can see all the information required to configure the commercetools project in the connector.

 

Step 3: Configuring the connector

Once the commercetools connector module is incorporated in Magnolia using the Maven build configuration, the next step is to identify the commercetools API in Magnolia. This is done in the corresponding module configuration.

Here, enter the API base URL, authentication end point and the clientID, clientSecret and projectKey from step 2.

A new app group – "commercetools" – is also available in the App Launcher. Under Setup, you can determine the commercetools project for which you wish to use the store site in Magnolia.

It is also possible to adjust the localization parameters in Setup. The Neofonie demo store initially served only German-speaking markets.

The configuration of the connector module is now complete, and the commercetools functions can now be integrated into Magnolia using a REST client.

 

Step 4: Setting up a commercetools project

In order to integrate the full range of store functions into the store site whilst also displaying product content in the store front, you’ll need to set up the content of the commercetools project.

First, determine the required settings for internationalization, tax and shipping in the commercetools admin section.

Once the basic settings for the store are made, you can start administrating the product data. To do so, define the product types on which the products will later be based. In the demo store for Neofonie, we chose the categories "Apparel" and "Workshop".

A product type defines all attributes and their values that make up a product. In addition, you can determine the attributes to be used for product search.

It’s also possible to create a category tree that can be linked with the products. This allows you to categorize products flexibly and use this categorization to create store features.

Once the product types and categories are defined, you can start managing the products. You can do this intuitively in the "Products" area of the admin interface.

A product can have one or more variants depending on the product types defined, with the first variant always the master variant.

After completing product management, commercetools offers a publication workflow, with which the product content must be made available explicitly via the API. The same mechanism can be used to withdraw products.

 

Step 5: Developing the store front in Magnolia

There are various ways to integrate the product data and structures managed in commercetools with the content from Magnolia:

The commercetools connector module, for example, provides sample page templates for Magnolia that offer core store functions like teasers, product detail pages, user admin, shopping cart and checkout process, along with the required business logic. If these functions and the implementation in the sample template are sufficient for the planned store solution, the only thing left to do is adjust the templates in the front end.

If the store solutions poses more complex demands, a range of additional tools are available in certain page templates via the commercetools TemplatingFunction (ctfn).

To integrate commercetools in the Java-based business logic, the connector module also incorporates the commercetools SDK with which the API is fully displayed.

 

Authors: Sebastian Haftmann and Anja Unterberger-Schneck

Sebastian Haftmann is a project manager at Neofonie, where he advises customers during the planning and implementation of digital solutions for portals, mobile and e-commerce. In recent years he has worked together with Olympus Europe, publisher Wort & Bild Verlag and financial services provider Creditreform, helping them complete complex projects.

Anja Unterberger-Schneck is marketing manager at Neofonie, with over 10 years of experience in the IT sector. Her expertise covers both customer needs and the technical options that go into her work.

 

 



Comments



{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Guest blogger

Magnolia has an amazing community of partners and clients, among them quite a few wordsmiths. From time to time, they put their expertise into blog posts and share them on this platform.


See all posts on Guest blogger

Demo site Contact us Free trial