Building multisite solution for TRANSGOURMET
What options has a brand like Transgourmet when building multi-site solution for their clients and employees, to make it easier to run many different websites, with different CMS systems and users with all levels of technical knowledge? 1xINTERNET created a Drupal 8 distribution on which all their websites can run smoothly. The front end was integrated into a design system from Patternlab.
Who is Transgourmet and how we could help?
Transgourmet is a food wholesaler for gastronomy, hotels and bulk consumers with a turnover of more than 3 billion € per year. In 2018 1xINTERNET was asked to review all websites of Transgourmet and their brand Selgros Cash and Carry to create the same technical requirements and standards for them. The task was to create a consistent and flexible solution that would enable the relaunch of all websites of the company. Therefore a robust, secure and efficient CMS should be used, whose development and maintenance can be decoupled in time. For a company like Transgourmet a project like this is an essential part to complete the digital strategy.
Project description
The corporate websites and microsites were previously implemented and maintained by different teams using different CMS solutions. The design was also not standardized between websites. For a homogeneous brand experience, it was necessary to use a common technical style guide. As CMS, a Drupal distribution with decoupled design system was chosen, on whose common code base more than 6 websites were created.
Why Drupal was chosen?
A requirement for selecting a CMS was a cost effective and enterprise grade solution. Transgourmet required a highly flexible and customizable framework, which will be able to grow with the company, rather limiting it by determined features and scope. Drupal was also chosen, because of its open source licence and because it was quickly clear that all requirements could easily be met.
Project objectives and results
The overall goal will always be to increase sales (online and offline) through web - a tight integration between CMS and e-Commerce, high focus on UX, reusability and scalability. The most important goal of the project was to create a re-usable CMS installation (a so-called Drupal distribution) that could be used for all websites. For the functionality of the distribution, the main focus was current and future B2B requirements as well as an intuitive UX and design.
The following requirements should be met as far as possible:
- Customizable front end for the different brand manuals of the pages
- Market selection and associated personalized content
- Industry-specific filter settings for events with regulated registration
- Personalized banners with an easy-to-edit banner admin tool for more than 200 banners
- Recipes with immediate call-to-action in the shop
Drupal 8 Distribution
1xINTERNET created a Drupal 8 distribution (CMS product) on which all websites can run. The frontend was integrated into a design system based on Patternlab. This is used by the Drupal distribution as well as by the B2B headless commerce solution. All websites run independently so that development, maintenance and deployment can be carried out differently for each site. The first relaunch took place in 2019 for Transgourmet.de, followed by 2 more microsites. In August 2020, the relaunch of the corporate website of Selgros.de took place and was a big success.
Challenges
The main challenge was the close cooperation with all stakeholders on the part of Transgourmet, as each website had its own product owner and various requirements. Thus, in addition to the consolidation of all web-related technologies, such as the relaunch, other activities that were used for coordination were also moved to the cloud (hosting, Git, etc.). On the technical side, the challenge was to make the partially obsolete technologies usable. The users are mostly chefs and kitchen managers, who often work with very outdated hardware and limited browser permissions. This added further complexity between modern UX requirements and technical limitations.
Modular architecture
The distribution contains more than 50 individualized modules that can be switched on and off for specific projects.
Examples of modules:
Transgourmet Search
- Not all projects require a search. However, if this is activated, all content types on the specific page, will be indexed
Translations, page specific languages
- Transgourmet operates in many Eastern European countries and Russia, additional languages can be switched on with preconfigured settings
Transgourmet Catalogues
- Flip page catalogues/handouts continue to play an important role in this industry and therefore had to be integrated into the website
Transgourmet Personalization
- Specific websites have B2B-B2C shopping functionalities. These require personalization functions to display target group-specific banners and products
Transgourmet markets and market selection
- Selgros has more than 40 stores in Germany with different advertising, content and events.
Transgourmet Recipes
- Configurable recipes for gastronomy, hotel business and communal catering
In this project a wide selection of modules was combined with each other in a meaningful way to address the requirements of the different websites. In the following, the most important features from the customer's point of view are briefly described.
Events with registration form
Transgourmet offers its customers a variety of events, workshops and in-house exhibitions.These are partly organised in specific and overlapping markets. Therefore an Event Content Type was created, which can contain different events. A sign-up option is provided for each event.
This has enabled Transgourmet to improve the event organization from high email traffic to a modern workflow. Here you can see examples (find a seminar to see the registration).
Catalog Management
As already mentioned, product catalogues/flyers etc. still play an important role in this industry and therefore had to be integrated on the website. Some of these catalogues are created on the website itself, some are integrated by external software via API. In addition to the high number of media assets, further meta descriptions and taxonomy attributions were carried out in the CMS.
See an example.
Recipes
It is common practice for chefs and buyers in the food industry to calculate ingredients depending on the number of people and to use this information to coordinate their recipes and food purchases.The first essential feature, after the basic functions of the CMS, was the development of a recipe portal with direct call-to-action into the shop for recipes or the offered cross- and up-selling products. The shop is a proprietary development, which is achieved by deep-linking.
Community contributions
Within this project many contributions for Drupal modules were also made:
- Google ReCAPTCHA v3
Google reCAPTCHA v3 returns a specific score without the user having to actively interact. Based on this score, submissions are allowed or another CAPTCHA test is performed
- Config Patch Gitlab
If the configurations are changed directly in Drupal UI instead of in the repository, these changes can be sent to Gitlab as a merge request.
- Toastr messages
The Toastr module implements the Toastr.js library. Toastr is a Javascript library for Gnome / Growl Type non-blocking messages.
Hosting / Operations
All websites are hosted on Pantheon.io, Issues and Sourcecode, on Gitlab.com
The design system or the frontend for the websites are hosted in a separate repository. There is a repository for the website itself and a separate repository for all projects based on it. This makes it possible to bring individual features decoupled or integrated into the projects easily.
All operations are fully automated using Gitlab's CI/CD system. Changes in the frontend or the profile are automatically deployed from the test systems of the website. These in turn are automatically made available on the test pages of the projects.
