Drupal + Magento Headless Integration: The Perfect Union of Content + Commerce

With digital moving at a rapid pace, online consumers are now looking towards personalization or better experiences while making a purchase. And, with their attention span decreasing by the day, if they do not get the information that they are looking for, be it at the click of a mouse or a swipe of a mobile or a tab, then they quickly move on to another site. Given that, businesses have begun to work towards enhancing the customers buying journey such as improving product descriptions and product videos, customer testimonials, user-friendly GUI, etc. By adding different forms of content, they can also retain customers’ attention spans and help them in their buying decisions.

Then there is Magento – The Undisputed Leader in eCommerce

One of the best e-commerce solutions available is Magento, a name to reckon with. Given its multistore capability, multi-language options, complex configurable products, layered navigation, and more, it scores high when compared to other e-commerce platforms.

Magento is highly scalable. This makes it a perfect option for big e-commerce businesses or businesses with custom selling experiences, custom needs, etc. Being feature-rich, there are varied options available, which store owners can choose from. It allows store owners to host a few products or thousands of products.

Its highly flexible platform enables you to add customized workflows to meet specific business requirements. In addition, Magento gives full control of customer information, inventory, billing, products, and records for multiple websites and stores from a single admin dashboard.

Why Magento Alone Is Not Enough

Despite its myriad benefits Magento lacks in one distinct area: the content management system (CMS). This is because Magento by default provides only a what-you-see-is-what-you-get (WYSIWYG) editor to manage content from either blocks or static pages.  Hence, there is no flexibility to manage this content. Thus, one needs to have good knowledge of HTML because all the design needs to be added in a WYSIWYG editor to manage the content.

Moreover, businesses have not added tools for managing their rich content; rather, they have been more focused on capabilities that would make them scale above their competitors – omnichannel mode of shopping (mobile, kiosks, desktops, point of sale, etc.), order management systems (OMS), improved product information management (PIM), and other capabilities. Given such a limited investment in the content management, businesses began looking for an ideal platform, which would house a strong CMS along with a best-in-class e-commerce system, something that Drupal is better equipped to handle.

Drupal as the Anchor

Drupal has the capability to flawlessly integrate with the e-commerce architecture of a business. For example, Acquia, the leading cloud platform adopted this “Content for Commerce” strategy where their products and Drupal were integrated with their e-commerce platform. Those integrations spanned commerce platforms including IBM WebSphere Commerce, Demandware, Oracle/ATG, SAP/hubris, Magento, and even custom transaction platforms. Other companies following suit included Quicken (Magento), Puma (Demandware), Motorola (Broadleaf Commerce), Tesla (custom to order a car, and Shopify to order accessories).

Given that, integrating e-commerce with a content management system (CMS) serves the purpose. Thus creating a hybrid solution i.e. a hybrid Drupal CMS-Magento e-commerce store, using the headless approach, seemed the most logical solution. Here’s why –

Why Drupal – Magento Headless Integration

With this integration, businesses can now look forward to a powerful and engaging site. Personalizing the content based on demography (Gender, geo-location, age, etc.), customer journey (educating and motivating customers while they are on the site via product showcasing, blogs or vlogs, images, etc.), is now no longer a wish list.

Below are other benefits that come with this integration:

• Two separate platforms exist – one for product management (Magento) and the other for content (Drupal). This makes it easy to manage both i.e. commerce and content independently.
• Content is managed in a more user-friendly and advanced way than Magento’s usual way of doing that in a single editor.
• Content is displayed in a way that there is no, or minimal, overhead in terms of server and database resources on the Magento Store.
• Drupal’s easily scalable and secure platform helps in future scaling and reduces the risk of security breach.
• Other configurations include:
  1. Content types to be shown
  2. How the content should be shown
  3. What the URL aliases should be
  4. Management of content fields

Now that you are aware of the benefits that this integration brings, let’s now look at how the integration process is carried out.

The Integration Method

Below are the easy steps to integrate:

1. Drupal and Magento will be integrated in a headless manner so that for the front-end user, there is only the Magento store, displaying the commerce and the content. To the user, Drupal is invisible.
2. The content is only managed in Drupal, which is automatically displayed in the Magento Store.
3. Magento has a content listing page which lists the content added in Drupal. Each content addition has a full detail page.
4. An API service is created at Drupal’s end, which Magento uses to render the content. Both (i.e. Magento and Drupal) have a respective database and web, and everything is managed at the admin end with several options being available at both ends to configure.
5. Other than content, other areas of the content page such as header, footer, and the sidebar are shown from Magento only. The main content is shown at the Magento store but comes up from Drupal’s end via its API in a headless manner so that for a front-end user, Drupal never comes into the picture. Therefore, any changes that need to be made to the content or any new content to be added, are done through the Drupal admin.

The Integration process assigns a series of logical tasks for both Drupal and Magento, which is specified below:

Drupal: A module is created for bridging Magento with Drupal. It will perform the following tasks:

• Provide admin configuration options to:

1. Choose the content type to return to Magento
2. Supported return formats like XML, JSON, etc.
3. Allow request methods such as post, get, etc.

• Provide the following services to Magento:

• 1. Listing of the selected content-type, which will include selected fields, in a selected order, and selected format.
  2. Detail of the content in the selected format.

Magento: An extension is created for Magento-Drupal integration. This Magento extension includes:

• Admin Configuration: In the Magento admin panel a section is created in the configuration section.
• Magento Front-end: On Magento’s frontend, the Drupal listing will appear on the frontend URL configured in the admin panel. The content will be displayed in the layout format defined in the configuration in the admin panel. When a user clicks on a content link, which, basically, is a Drupal node, on the listing page, the detail page of the content will open. That detail page will be displayed in the layout format defined in the configuration in the admin panel.

Conclusion

With businesses adopting a headless integration for a more enhanced user experience, customers are now able to “find the information they want and when they want it.” Therefore, the integration of front-end and back-end systems may become the sure shot solution, enabling businesses to create a single source of content, and distribute it as required.  Thus, customers can now look forward to more than an omnichannel experience, and businesses can keep enriching their customers’ buying journey via the headless CMS.