Vue Storefront integration:

Headless solution with Sylius and Pimcore under the hood

ArtNight - Sylius and Vue Storefront integration case study
ArtNight - Sylius and Vue Storefront integration case study
THE CLIENT

ArtNight

ArtNight is a German company founded in the fall of 2016 by David Neisinger and hosted creative experiences. The first installment by ArtNight was all about painting. Under the guidance of an artist, guests create their artwork in local bars and restaurants. The unique feature of ArtNight is the high entertainment factor. Therefore, ArtNight’s events are great opportunities to meet new people or have a lovely evening with friends. Furthermore, the pictures and techniques are taught in a beginner-friendly way so that anyone can create a great picture on their canvas.
A vision is to be the largest company for creative experiences in Europe and creatively connect thousands of people in cities big and small.
Currently, for ArtNight works more than 80 people all across Europe. The company is mainly B2C oriented, but it also provides some services in the B2B model, known as the Private ArtNights.

Painting, baking and DIY...

Right now, it’s not just painting, as it was in the first installment. Except for the ArtNight brand, the PlantNight and the BakeNight are set up. First, one is oriented to give unforgettable experiences related to floristry, handicraft, and DYI ideas. At the same time, the BakeNight is a place where you can get a beginner-friendly baking course with the necessary guidance, a great atmosphere, and having fun. Due to the COVID pandemic situation and limited possibilities to give the clients what they need and want, ArtNight started to provide online events to help people enjoy the art creation safely at home in their tempo.

As a BitBag, we tightly cooperate with the CTO and his technical team. Still, all ArtNight friends help us provide the best software to cover all needs related to the purchase flow, fulfillment processes, and marketing-related parts of the system.

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.

analysis-icon

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?

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.

Currently, two brands are live using the new system: PlantNight, which has less load, and ArtNight, the main client’s brand. The system is stable, and we’re working mainly on new features and improvements related to a bigger scale.

The next brand that will be migrated is BakeNight, but new domain-specific functionalities must be implemented first. We supported the client with all needs related to development, maintenance, and consulting by using our knowledge to propose the best possible solutions.

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 pandemic situation.

The Grand Final

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.

ArtNight

Efficient and modern PWA solution – from WooCommerce to VueStorefront<->Sylius integration

  • Migration from WooCommerce
  • Headless solution with Sylius backend under the hood
  • Pimcore implementation (PIM, CMS, DAM)

User experience in mind

Looking for a similar solution for your eCommerce?

Radosław Żurawski
CSO
Sylius Officialy Trained Partner
Sylius Leading Partner
Sylius Extension Partner
Clutch Top Developer Poland
Vue Storefront Partner
Ibexa eZ partner