Combining TYPO3 and Magento to Create an Enterprise E-Commerce Solution

Nowadays, a lot of companies are not satisfied with just a simple webshop or a simple website. Customers want a total solution to meet both their software needs as well as giving them the option to create a platform that inspires visitors to buy their products. At present, there is no enterprise open source solution for this, and that’s why we, that’s MaxServ, have been busy combining two top-notch systems, namely TYPO3 and Magento. The idea? To get both TYPO3’s enterprise CMS functions and Magento’s enterprise webshop functions to work together.

In the past, there have been various options for achieving this outcome. Specific TYPO3 extensions have been programmed to integrate webshop functions into TYPO3. And TYPO3 and Magento integrations have even been available too.

But...there were often problems with the given extensions and integrations. They were either not flexible enough or not stable enough for the amount of visitors to the websites of our clients. We needed a solution that that would scale well and deliver both options to all of our users.

The requirements

In order to form a solid base for the functionalities and features to be included, we first defined the requirements:

TYPO3 CMS v8 LTS

Magento 2 – open source

Scalable solution

Easy to use

The road to our solution

As an open source company working with both TYPO3 and Magento, there was no doubt about which software we wanted to use. We started looking for an open source initiative that was able to combine TYPO3 CMS 8 and Magento 2 and discovered that Neusta had been working on an integration of those two systems.

Initially collaborating seemed to be a good idea, but in the end, we decided against using Neusta’s solution. There’s a simple reason for this. Their solution is based on several techniques that we don’t usually use in our company. And we just don’t like integrating exceptions into our systems, as they tend to complicate things further down the line.

So we added so some more requirements to our list. We wanted our solution to be:

based on Apache

based on MySQL

and to use Apache Solr as a search engine

Based on all of these these requirements, there was no solution to be found. So we decided to make one ourselves!

The solution

As mentioned above, the solution is based on TYPO3 and Magento. As you probably know, Magento delivers an out-of-the-box system where you can have a website up and running fairly quickly as all of the main features are already shipped.

These solutions are based on Javascript and it is not possible to use Magento in a headless-state without refactoring these Javascript files. “Headless” in this context means without a graphical user interface. With TYPO3 on the other hand, this is possible.

We wanted to stay as close to the core of both systems as possible and decided to have Magento be responsible for rendering the frontend and let TYPO3 be the content provider of Magento.

And this is what we came up with. When someone visits the website, Magento first asks TYPO3 if there is a content page with this URL. If TYPO3 has a TYPO3-only page for this URL, Magento returns TYPO3’s content. If it isn’t a TYPO3-only page (e.g. category pages, product pages, or checkout pages), Magento renders the Magento page and asks TYPO3 for content at several places in the Magento template. This way, you can insert banners and enriched content within the checkout process, for example.

Of course, everything is cached, so these calls to the system aren’t made every time the site is visited. When a change is made in TYPO3, it invalidates the Magento cache. In this way Magento gets fresh data when the next visitor comes by. As it checks if a page is available in TYPO3, it’s ever so flexible.

Red = Magento / Orange = TYPO3

Special feature: the so-called “slider”

The solution is highly customizable in that you can define exactly how much of Magento’s and how much of TYPO3’s functionality gets used for each and every project. Our sales team calls this “the slider”.

Depending on how much of each software’s functionality is used, the (virtual) slider is positioned more to one side or to the other. In some projects the slider will be more towards content (TYPO3) and in another project more to e-commerce (Magento).

Sneak preview

At the end of June, Mathias Schreiber (CEO of TYPO3 Gmbh), Ben Marks (Evangelist Magento Inc.) and our friends from Yoast visited our office, to discuss our open source activities of the past year with regards to TYPO3 and Magento.

We presented 2 brand new extensions, Yoast SEO for TYPO3 and Yoast SEO for Magento 2, and also gave them a sneak preview of our “TYPO3-Magento solution”. They were all really happy with the solution, just like we are. For us, it was a great confirmation, showing that we are on the right track and confirming our chosen path. Besides that, it was great to bring the TYPO3 and Magento community together.

The first two projects are online

Since then we’ve been working hard to finish our first two projects. One has it’s main focus on content, the other on e-commerce.

We launched montel.nl at the beginning of this month, a website of a company selling sofas in stores all over the Netherlands. They wanted their website to be inspiring to visitors and, of course, to show their visitors the wide range of sofas they sell. Visitors can now create their own moodboard on the site, send it to one of the stores, and then arrange to have a meeting there with one of the stylists. In this case, the so-called “slider” is positioned more on the content side of things.

Meanwhile, the second project has also been completed: we launched the Atami shop last week. Here the “slider” is almost completely on the e-commerce side of things.

For us, this was the goal. Both types of websites can use the same method.

Early Access Program (EAP)

As we don’t want to keep this know-how to ourselves, but also want to earn some money on it, as a return on our investment, we will start an early access program later on this year. Needless to say, we want the system to be stable and so we’ll integrate it into at least one more website before doing business.

If you are interested in our steps towards EAP, please register at maxserv.com/mate. As soon as we have more information, we will inform you.

If you have questions about our product or would like us to present this innovative solution at a conference, then please feel free to contact me. We have also opened a Slack channel #typo3-magento on https://typo3.slack.com to answer any questions.

Thanks for reading! If you’ve enjoyed this or one of my previous posts on this site, consider leaving a comment or sharing this post with a friend!

About the Author

Richard Haeser

Lead development, MaxServ, Waalwijk, the Netherlands

Richard is working with TYPO3 on a daily basis since 2010. He is an active member of the (Dutch) TYPO3 community and speaks on several events about several topics and organized the first Dutch TYPO3 Contribution Bootup Day. Besides his passion for TYPO3 he is a husband and father of 2 kids. In his spare time he is putting even more time into TYPO3 by contributing to several extensions and expanding the Dutch community.