Welcome to the blog that introduces a plugin that allows for integrating Sulu CMS with Sylius. This integration facilitates communication between Sulu CMS and Sylius eCommerce platform through API integration in the shop panel. Such an approach improves the process of managing content within Sulu CMS while leveraging the powerful eCommerce capabilities of Sylius.

However, as the frontend of each store is always personalized, the plugin does not provide ready-made solutions for the page or blocks yet. Instead, an abstraction layer and examples of their usage are provided to create your own pages or blocks.

Before we dive into the integration process, let’s say a few words about Sulu and Sylius.

Quick Jump

What is Sulu CMS?

Sulu is a Content Management System (CMS) designed to help manage various content on websites and mobile applications. In the context of eCommerce, Sulu is widely used to create and distribute content in order to increase the company’s digital presence and provide customers with valuable content. Apart from managing content, Sulu CMS provides valuable features for marketing teams and business owners, for instance, multilanguage and localization tools, Webspaces, and role-based permissions.

What is Sylius?

Sylius is an open-source eCommerce platform based on the Symfony framework. It is a versatile eCommerce solution that can be tailored to various business models and architectures. By utilizing clean, high-quality code, developers leverage it to create unique and future-proof online stores, ensuring efficient development processes and long-term maintainability. Thanks to its API-first approach, Sylius can be integrated with various systems and tools, including CMS systems like Sulu.

Why does Sulu integrate well with Sylius?

Sulu and Sylius are a solid and powerful combination as both are open-source solutions that are based on the PHP Symfony framework. This makes them easier to integrate from the start, and the whole process is more natural. PHP Symfony developers can work on both solutions, which eliminates the need to hire additional programmers, which, in turn, helps to reduce the cost and time required. By having access to the clean code of these solutions, developers can suit the eCommerce website to the exact needs of online businesses. 

How to integrate Sulu with Sylius? 

Installation

Naturally, the first step is installation. To do so, you should work on stable and up-to-date versions of packages. The steps are as follows:

1) Add plugin dependencies to your config/bundles.php file

2) Import the required configuration in your config/packages/_sylius.yaml file

3) Use channel trait in your channel entity

4) Implement \BitBag\SyliusSuluPlugin\Entity\ChannelInterface

5) Add doctrine mapping. Choose XML, attributes, or annotations, depending on what is applicable to your project

6) Lastly, finish the installation by updating the database schema and testing the plugin

A complete guide to the SyliusSuluPlugin installation process is available on our GitHub.

Go to GitHub

Sulu configuration

Keep in mind that the configuration of Sulu requires a headless extension

Then, Webspace should be configured. An example of configuration is available here.

Use cases

Adding page

1. After creating a new page type in Sulu, for example, a page with the type about_us, you have to do a few things to handle this type.

2. Create a new renderer class that implements: \BitBag\SyliusSuluPlugin\Renderer\Page\SuluPageRenderStrategyInterface

3. Register a new class as a service with the tag: bitbag.sylius_sulu_plugin.strategy.page_renderer

4. Add a new template in the correct catalog like you configured in the getTemplate() method. This template will probably be a copy from the Sulu.

5. Choosing the correct renderer is based on the strategy pattern, so make sure that your template code is unique.

Adding Block

Page can be created from the blocks. Each block can contain other properties, so we also use a strategy pattern for the block rendering. To add a new block, follow these steps:

1. Create a new renderer class that implements: \BitBag\SyliusSuluPlugin\Renderer\Block\SuluBlockRenderStrategyInterface

2. Register a new class as a service with the tag: bitbag.sylius_sulu_plugin.strategy.block_renderer

3. Add a new template in the correct catalog like you configured in the getTemplate() method. This template will probably be a copy from Sulu.

4. Choosing the correct renderer is based on the strategy pattern, so make sure your block code is unique.

5. In the page, use a twig extension method to render a block by its type. If everything is correctly configured, the block should be displayed on the page.

Page caching

The cache mechanism is realized by the use of Symfony caching http client. Responses from Sulu are caching per Sylius channel and could be invalidated per channel. Cache purging is available in the channel grid. The cache catalog is defined as the app parameter bitbag.sulu_cache_dir: “%kernel.cache_dir%/sulu”, you can override it as well.

More information about page caching is available here.

Final word

Integrating Sulu CMS with the Sylius platform creates an opportunity to enhance customer experience and many other aspects of running an eCommerce business. Additionally, your team can greatly benefit from this duo, focusing on distributing high-quality content and SEO efforts. Companies that trusted Sulu and Sylius include, for example, BMZ, Mofakult, and Stoeckli. 

The synergy between Sulu’s robust content management capabilities and Sylius’ flexibility and performance means that businesses can offer the best shopping experience enriched with compelling content that drives engagement and conversion. 

Please contact us if you have any questions about Sylius and Sulu integration!