Going Headless with Magento Commerce

Headless Commerce is not only the “talk of the town”, but according to Gartner it is passing the “hype” peak cycle into real usage scenarios that enable new experiences and integrations. There are already real-life examples of clients such as Nestle’s Babynes who use an “Internet of Things” approach to connect an Internet-enabled device, tracking app and Magento store to get to know clients preferences and serve them in the best way possible. On top of that, more and more customers are using Magento’s PWA to provide app-like experiences on mobile devices.

From an architecture standpoint, most sites are currently traditional or monolithic; in Magento’s case, the site is utilizing the responsive Magento Luma frontend. Meanwhile, Headless can be separated into two categories: decoupled using the PWA architecture and a fully headless approach with a custom front-of-glass approach. 

The roadmap features an array of separate microservices that are provided on GraphQL. This is not replacing any of the existing Magento features, but rather an optional add-on for clients looking to build custom services on the existing Magento framework.

The roadmap focuses on adding the remaining APIs especially for B2B functionalities, and some of the remaining B2C functionalities. Once this is done, Magento will be fully enabled for a PWA/headless commerce approach. This will be a game changer especially for both B2C and B2B companies, enabling PWA and headless experiences that used to take a lot of effort (which translated into larger costs) with a short time-to-market.

In practice, Isobar implemented the headless approach for BenQ, where Adobe Experience Manager was used as the CMS, while Magento was used as the commerce engine. Our team used Magento’s  REST APIs to synchronize shopping cart information, product price, header & footer details, and inventory with AEM.

By using both AEM and Magento, BenQ was able to:

  • Access a rich content and multimedia editor with AEM.
  • Utilize a comprehensive and customizable transactional engine with Magento.
  • Integrate across BenQ’s legacy and new 3rd party systems.
  • Use a global codebase across multiple markets and various brands.

To summarize, here are the advantages and disadvantages of each approach:

Monolithic/Traditional Approach

Headless Approach