<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=278116885016877&amp;ev=PageView&amp;noscript=1">

Customer:
Franchise Operator

 

In partnership with:

Acquia

 

Industry:
Retail

 

Services:

Multisite Build & Delivery

 

Technologies:
Drupal 8 | Magento

 

Tools:

Acquia Cloud Site Factory | Acquia Commerce Manager

 

Platform:

Acquia Cloud

 

Delivering consistent brand experiences

Axelerant teams helped deliver a scalable multisite solution that could keep pace with the customer’s growth. With this, they can now create brand sites that bring together content and commerce capabilities to deliver a seamless user experience.

 

About the customer

 

The customer is an enterprise-level retail megalith composed of some of the world’s most recognized brands and household names. The franchise currently operates internationally across the major countries in the world with:

4000+

stores across 
sectors

90+

consumer retail 
brands

30+ year

history of 
operation

Business challenge

Of the nearly 90 brands in the customer’s portfolio, some were on Drupal, while others used a mix of open source and proprietary CMSs. Not all had a web presence. In a lot of Middle Eastern markets, there are no online stores. Most brands here had physical stores. Others had a web presence, but no eCommerce capabilities.


Given all this, there was a lack of standardization across the brands, both in terms of the customers’ as well as the editors’ experience. It also meant that the client was spending a lot on maintaining and updating these sites, while losing precious time in launching new brands online.


They needed to consolidate the digital experience across their diverse brands. These were their four key goals:

01. Consolidate All Brands

02. Empower Editorial Teams

03. Content And eCommerce 

04. Less Maintenance

They needed to migrate to a single platform that allowed them to effectively serve each brand and its capabilities.

They needed to manage content more efficiently, offer better experiences faster than before, and become more profitable.

Brand sites needed to be enabled with content and eCommerce capabilities to deliver an integrated customer experience.

The customer also needed to be able to significantly lower the cost of website updates and maintenance.

Solution

As technologies, Drupal and Magento are both giants in their own rights, and their combined capabilities offer a lot of potential for customers in need of complex solutions to challenging problems.

In March 2017, Axelerant was brought in to help deliver the solution. The client already had a few sites running on Magento, in-house Magento professionals to handle these sites, and a small team from a Magento solutions partner. 

They now needed a frontend solution that would allow them to launch websites quickly without the need for involving developers. Drupal was chosen as the frontend due to its superior editorial and content management experience. 

Acquia-Retail-Front-End-General-Architecture-Desktop
Acquia-Retail-Front-End-General-Architecture-Mobile

Above: General solution architecture with Drupal frontend

 

Acquia Cloud Site Factory rises to the occasion

Acquia Cloud and Acquia Site Factory hid the provisioning of servers behind a layer so that users don’t need to see the complexity involved. Their user-friendly interface allows sites to be deployed easily and effectively without involving developers. This makes the product a great fit for business owners launching in new regions and demographics.
 

The Drupal-Magento connector

Most brand sites had a static website. These needed to be enhanced by integrating eCommerce capabilities within these sites. For example, a customer reading about a particular piece of merchandise needed to be able to simply click on the image and add it to cart, check out, and make the payment—without ever having to leave the site.

The challenge was to bring the content from Drupal and the product management and retail features from Magento together onto a single interface. To get around this, the Acquia team decided to build an all-new Drupal-Magento connector module, with the Axelerant team participating later on in making modifications and bug fixes.

This demanded close coordination between all technology partners in the projects. Teams from Axelerant, Acquia, Magento, and all the brands worked closely together to build this solution.

Results

Acquia-Retail-FrontEnd-Single-Platform

All Brand Sites On One Platform

The websites for each of the customers 90+ brands and sub-brands are now being powered by Drupal 8.x.

Acquia-Retail-FrontEnd-Simplified-Maintenance_0

Simplified Maintenance

Both maintenance tasks and security updates can be centrally managed within Acquia Cloud Site Factory.

Acquia-Retail-FrontEnd-Lowered-Costs-2

Reduced Total Cost Of Ownership

The created templates allowed for quick provisioning of websites in new markets with little development effort, keeping costs to a minimum.

Config management

This project called for a unique approach. The client had different brands that needed different sites built using the same code base, with the configuration shared between all the sites.

When working with Drupal sites, we would normally use the configuration import and export structure, where we define a separate directory outside of the Drupal layer from which to export all the configuration files. These are then used to build new sites. But as the client had different sites with different kinds of configurations, this would not work.

Instead, the team built a new layer by creating a custom module to override the default configuration, and any other custom module can define configurations to override. On installation of that module, the overridden configuration can also be imported.

Three Layers Of Modules

This called for three layers of modules to be used: commerce modules, global modules with configurations common across all brands, and the brand-specific module. The multisite is initially set up with transactional and non-transactional capabilities, and then other aspects are defined depending on the brand, location, language, etc.

For example, a brand may have a different site set up in each of the four regions where it has a presence. The configuration for these four sites would be similar, except for the currency. How the currency is displayed would be managed via the overridden configurations.

To make this easier to do, the teams made the choice at the start of the project to keep all the sites similar in terms of structure. Any changes in requirements can be managed by altering the configurations. 

Custom theming

The same challenges existed on the Frontend as well. While the sites might have a similar layout and similar placement of the logo, search bar, footer, newsletter block, every brand would have its own style guide, fonts, colors, etc.

The team solved this by having a generic theme which is applied globally for all brands, as well as theme override files on the Frontend, which allow them to tweak certain aspects without having to write CSS. While they do customize specific requirements, 70-80 percent of the theming can be managed effectively in this manner.

APIs for mobile apps

The team created APIs so that mobile apps could receive all the data for the Frontend from these, while the data for the backend comes from Magento.

For all the Frontend aspects, like the product detail page, product search page, product listing page, categories list, etc, the Drupal API is used, but for placing orders or registration the Magento API is used.

Instant search

Acquia-Retail-Front-End-General-Architecture-Desktop

Above: How content is indexed for search

Acquia-Retail-FrontEnd-Searching-Desktop

 Above: How search results are fetched

The search feature on all of the client’s brand websites was initially implemented using Drupal and Solr. It was later replaced with Algolia and React, as these offered:

  • Instant search compared to Solr—it's now possible to search from any page without the user having to leave the page they are on
  • Better user experience for the user
  • Easily configured queries and highlights
  • Configuring search is now easy for the marketing team
  • Personalization per user is now possible
  • Now that the search is decoupled, it is easy to replace parts of the application
  • Optimized use of infrastructure resources—with Solr, most of the infrastructure resources were being exhausted
  • Now, instead of being limited to 36 results, users can see more than 150 results

Single-Page Checkout

Acquia-Retail-FrontEnd-Checkout-Desktop

Above: Checkout process with Drupal hosting the React application

The checkout feature on all of the client’s brand websites was initially implemented using Drupal. It was later replaced with React, for the following reasons:

  • The whole checkout process is now a single page
  • This helped reduce a significant number of API calls, minimizing the time to load the page in multistep checkout. Previously, editing any information involved moving back and forth, which was time-consuming, as for every such event, there were many API calls needed to reset the steps and information
  • In the future, it’s possible to move from Drupal to an entirely different system
  • This has enabled significant improvements in performance and thus the user experience

Drupal Frontend

The design system is now built in the base theme, which helps reduce the time to roll out new brand websites and make changes to them. It also allows:

  • Conditionally loading assets to help load websites faster
  • Reducing image size by converting images to webp using Cloudflare
  • Building Accelerated Mobile Pages (AMP) compatible theme to help improve Google page rankings
✖