MASSIVE ART_Daniel Mathis_640x640circle
Daniel Mathis
Sulu Core developer and gaming enthusiast.
@Prokyon4
2020-12-15

SuluThemeBundle 3.0 — Symfony 5 support and SyliusThemeBundle integration

After just over a year, we are happy to release the SuluThemeBundle 3.0. This version includes Symfony 5.0 support and integrates the SyliusThemeBundle created by the team of the eCommerce platform Sylius

What is the SuluThemeBundle?

With the SuluThemeBundle, you can give each of your webspaces a different look and feel. You can add several themes, and give each webspace its own one. This multi-theme functionality is achieved by rendering different Twig templates and asset files depending on the webspace being rendered.

In our Case Studies section, you can find an excellent multi-portal and multi-webspace example. Rhomberg-Sersa is an international company that represents multiple brands, each with a different color scheme and logo. This use case is a perfect match for the SuluThemeBundle. The gallery above demonstrates some of Rhomberg Sersa Rail Group's color schemes and logos.

Symfony 5 support and SyliusThemeBundle integration

The previous versions of the bundle used the LiipThemeBundle to handle the various themes. Unfortunately, the LiipThemeBundle is not Symfony 5 compatible and is no longer maintained. Therefore we replaced it with the SyliusThemeBundle, which is already Symfony 5 compatible. A big shoutout to liip for maintaining their bundle for several years!

Similarly to the LiipThemeBundle, the SyliusThemeBundle handles the loading of the correct files for the individual theme to provide a different look and feel on each webspace. As a bonus, the bundle supports advanced features like theme inheritance. The SyliusThemeBundle provides excellent documentation about installing and configuring the bundle. You can read more about it here. We would also like to thank the Sylius team for their commitment to the open source ecosystem—you guys are amazing!

Due to the change to the SyliusThemeBundle, we had to accept some breaking changes and make a new major release. To upgrade to the new major version, you can read all about the breaking changes in the UPGRADE.md file.

 

Installation and configuration of the SuluThemeBundle 3.0

The first step is to install or upgrade the bundle to version 3.0. This can be achieved with the following command:

composer require sulu/theme-bundle
Install the SuluThemeBundle

Next, you have to register the bundle and configure the integrated SyliusThemeBundle. Detailed information about the configuration can be read in the bundle documentation. After you have implemented all necessary configurations and created your first theme, you can easily enable it for each webspace through the webspace configuration:

<!-- ./config/webspaces/example.xml -->
<webspace xmlns="http://schemas.sulu.io/webspace/webspace"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://schemas.sulu.io/webspace/webspace http://schemas.sulu.io/webspace/webspace-1.1.xsd">
    <name>example.com</name>
    <key>example</key>
    ...
    <theme>vendor/theme-name</theme>
    ...    
</webspace>
Adding a new theme to the webspace

We depend on our community!

An active and supportive community is what makes an open-source product like ours sustainable. We need your feedback to make further improvements and develop a great product. If you find any issues or have new ideas, feel free to create an issue or a discussion on Github.  You can also contact us anytime via our Slack channel.

If you like the bundle, don’t hesitate to give it a ⭐ on Github.