Case Study ArtNight: Sylius PWA solution

Problem

The story starts with WooCommerce…

As it can be an acceptable solution for small companies which don’t care much about data consistency and accessibility, when the company started to grow, it was not enough anymore. The website was pretty slow due to the amount of data, structure, and WooCommerce performance overhead. Not satisfactory user experience and the data management issues caused the business to be not scalable, and it could not grow anymore, so it was crucial to move forward. Furthermore, the vision to deliver value to people from all across Europe – and in the future worldwide – was a trigger to explore new possibilities and other options.

…continuing with Vue Storefront as a front-end solution…

The new system could achieve a better user experience in various ways, but the main factor was probably page speed – which can be concluded in two points: make the backend faster and do the same for the shopfront part. The client decided to make a move in this direction.

At first, VueStorefront (frontend based on Vue.js and Nuxt frameworks) was used with the WooCommerce backend, which helped a little, but it was not a long-term solution. Backend had to be changed to something with better architecture, extensibility, and higher performance.

…and scalable back-end (Sylius) and software for PIM.

After research, a Sylius was chosen for a backend solution. At the same time, the shopfront part was intended to be still covered with VueStorefront (with improvements and extensions to fit the business needs). The decision was also made to take advantage of the opportunity to provide a single source of truth and keep the high data consistency level. For this purpose, the Pimcore implementation using PIM, CMS, and DAM modules was chosen.

These steps were a way to follow, to create a fast and scalable application with well-done data and asset management, providing excellent value to all interested parties.

Challenges

Prepare a Sylius <-> VueStorefront integration
Develop business logic to cover all domain-specific needs
Handle multiple types of products with different domain needs and fulfilment
Set up the communication with external services
Provide advanced gift card system
Integrate Byrd fulfillment
Implement three payment methods with a headless approach: the main – Mollie, and two fallbacks – PayPal and Stripe
Enhance Elasticsearch index mappings
Handle multi-channeling for Sylius and VueStorefront

Cover internationalization topics (time zones, translations) within the whole system
Handle video course fulfillment with the LearnWorlds platform
Integrate Facebook Pixel
Use Redis for caching and sessions
Support data migrations
Support the client with system maintenance
Provide knowledge and consulting related to complex solutions and architecture possibilities
Provide backend and frontend developers depending on the client needs
Adapt to changes in business needs due to the COVID pandemic situation

Want to implement the PWA solution in your eCommerce?

Contact us

Solution & Outcome

The first step in our cooperation was to prepare a bridge between Sylius and VueStorefront, which was released as an open-source plugin and shared with the community later on. We were able to provide an expandable application with high maintainability thanks to business logic well covered with tests unit, integration, and the functional ones. Sylius is extended with additional functionalities as enhanced cancellations, internal notes, and improved operation history. Moreover, at least 6 types of products are supported and each of them has a different fulfillment process to cover expected behavior.

Gift card
We prepared an advanced gift card system with customization possibilities which is a significant business part, especially for the PlantNight brand. Gift cards are treated as payment methods; can be downloaded and printed out; in the future physical gift card fulfillment is planned, and we prepared shipping with Byrd.
External services
The communication with external services to synchronize information about products, orders, customers, and stocks or to send notifications from Sylius – is done via Kafka message broker, which is a reliable and scalable way to handle asynchronous messaging – used also by Netflix, Uber, Spotify, and LinkedIn.
Elasticsearch
The client already had an Elasticsearch index mapping structure prepared from the previous implementation of VueStorefront with WooCommerce that we were able to improve by making it as accessible as possible, and by redundant data removal; moreover, data duplication and volume overall was reduced to achieve performance gain.

Multi-channeling
Multi-channeling (multibrand) and internationalization functionalities have had to be covered – due to expected future markets – for the whole system involving Sylius, VueStorefront, Elasticsearch, Pimcore, and – at last, but not least – the Notification Service.
Marketing & video
Integration with the external LearnWorlds platform was prepared to provide the fulfillment for video course products, which now are an important and relevant business part. For marketing needs we provided a Facebook Pixel integration that allows analyzing customers’ website traffic, actions they made, measure advertisements conversion and orchestrate sales processes accordingly.

Next to the main B2C platform, we also prepared a website for B2B sales made in Vue.js and Nuxt frameworks. Thanks to a well-done Agile approach, we efficiently delivered value in various circumstances, especially now when business needs are changing fast due to the global COVID-19 pandemic situation.

Results

The client has a platform with a fast and reliable Sylius as a headless backend under the hood. VueStorefront – used as the frontend – is a PWA application that can be run like a native application on mobile devices. These two factors improve site accessibility, performance and give a fantastic user experience. Everything is well integrated, stable, and scalable. It can grow with the business – to a certain extent – without any additional actions. Moreover, an additional B2B site was prepared by our frontend developer to cover market needs in this area.

Together with our ArtNight friends, we also prepared Sylius integration with Vue Storefront 2 , and we plan to use it with the client’s customized application in the near future. The new version has additional features and simplified architecture, essential for such a complex system with many services.

Our Case Studies

Planeta Huerto (Carrefour Group)

Advanced Sylius-based eCommerce System with Pimcore Integration

Integration with Pimcore
Blog page implemetation - our Sylius CMS Plugin‍
Payments integration - Adyen, Aplazame