We use cookies to improve your experience on this website.
You can always change the settings in your browser if you want to.
According to recent statistics, more than 50% of traffic on the internet is now generated by mobile phones. Any retail business that targets a large number of users needs to offer a smooth mobile experience. Investing in mobile-first technology has a high chance of paying off, but the integration with existing technologies can be challenging.
Is it possible to merge a standard, heavy e-commerce platform with a lightweight mobile front-end? Can we create a smooth mobile interface without rewriting the entire software architecture?
We decided to address these questions by integrating the well-known platform Episerver Commerce with the progressive web application (PWA) Vue StoreFront.
Nowadays, e-commerce solutions are often built on top of CMS platforms. There are two main types of CMS architecture:
E-commerce solutions are usually extensions of standard CMS platforms that offer dedicated functionalities for the retail industry, in addition to standard content-management capabilities. Examples of these functionalities are a product catalogue, order management, payments and many others.
A progressive web application (PWA) is an extended web application that imitates a native app for Android and iOS devices. It creates a more consistent and uninterrupted user experience by saving the users’ products offline and synchronising the cart with the server later, once the user is back online.
PWA applications are usually smaller than their native counterparts. They are easier to develop and maintain, because they share the code with the web application and you can easily share and install them on mobile home screens. That being said, PWAs do have a high-learning curve and they lack access to specific native technologies such as Bluetooth.
The goal of this case study was to embed a smooth mobile experience into an existing e-commerce platform. Therefore we decided to analyse the Vue Storefront technology and check how well it integrates with an enterprise-scale e-commerce CMS, such as Episerver Commerce. We started by analysing the context and available technology.
Most clients fall into one of these two groups:
There are several possible approaches in terms of technology:
The best approach depends on the type of client, the available budget and the required level of customisation.
At Making Waves we have often used the first three approaches, both for internal and for client projects. This time, we decided to implement the last approach – adding a PWA application to an existing e-commerce platform.
Implementing a custom front-end layer for a headless CMS solution is the most common way to go. We wanted to focus on adding an additional, parallel mobile interface to an existing platform.
Retail in 2019 is truly amazing, when done right, from the perspective of customers and from the perspective of brands themselves. The level of convenience that online retail presents is unparalleled.
As consumers, we are spoilt for choice not just in terms of products to choose from, but from how we get to experience the purchasing process.
As brands, technology and a shift in consumer preferences, has led to us being able to communicate and interact with our audience in unprecedented ways.
In the past decade alone, it's hard to think of anything that has been more disruptive and influential to both consumers and brands, than Artificial Intelligence (AI), Machine Learning (ML) and the Internet of Things (IoT). The advent of the smartphone era, led by the convenience of shopping online through mobile sites and apps, has ushered in a meteoric rise in commerce conducted online.
Episerver
www.episerver.com
Mobile usage is growing year by year, as well as Retail eCommerce Sales. However, these two don't exactly relate to each other. The amount of time we spend with our smartphones does not match up with the number of transactions finalized on them. According to all the available data, the mobile conversion is much lower than desktop conversion, and this discrepancy, called the mobile gap, is a growing challenge for retailers.
Adding mobile-first solutions is a must for any eCommerce company since the mobile channel drives sales and brand loyalty, probably even more than desktop. That's the moment where PWA shows its true strength.
Vue Storefront
www.vuestorefront.io
For our case study we selected the Episerver Commerce CMS and Vue Storefront PWA.
Episerver Commerce is an e-commerce module based on the Episerver CMS. It has a great track record in providing e-commerce solutions to B2B and B2C companies of different sizes.
EPiServer is the dominating CMS platform in Scandinavia, with a very strong partner network and large customer base Many businesses have seen a double or even triple-digit increase in conversions in just few years, which is the highest ROI in the industry. We chose it because of our long expertise with the platform.
Vue Storefront (VSF) is one of the most complete PWAs (Progressive Web Applications) for e-commerce platforms on the market. It works on both iOS and Android phones and can transform any commercial platform into a smooth and pleasant experience.
The diagram below illustrates how VSF is connected to an e-commerce system.
VSF applications operate as an add-on module to an existing e-commerce CMS. It consists of a back-end connector and a front-end application.
The connector synchronises data from the original CMS database to a dedicated VSF database. The VSF database can be a NO-SQL database or an elastic search database, depending on the type of connector. This first part of the connector makes it possible to read e-commerce data such as products and orders.
The second part of the connector provides an API to communicate with the CMS back-end. It allows data to be written to the original e-commerce database.
The final element of the VSF architecture is the PWA application, written in the programming language Vue. VSF comes with a template that can be customised and developed to meet the specific business requirements and reflect your user experience strategy.
Our Vue Storefront for Episerver Commerce project is open-source and publicly available at Github. See our Github repository for more details.
Are you interested in learning more about the Vue Storefront & Episerver Commerce integration or testing our demo site?
Contact us and we'll be more than happy to get in touch and talk about the details or present our demo solution with all features available.
To integrate Vue Storefront with Episerver Commerce, we implemented a custom connector and added it to our Episerver solution.
The connector consists of two parts: ApiBridge and DataExporter.
Although the implementation example is based on the Episerver demo project Quicksilver, both ApiBridge and DataExporter were developed with customisation in mind.
The diagram below presents the general architecture of the connector.
The commerce data are stored in the Episerver platform but are additionally made available through Elasticsearch, to be queried by the modern VSF front-end. This modular approach with a clear separation between the data layer and the presentation layer allows better scalability and facilitates future site maintenance.
Data storage/persistence
A great advantage of the PWA architecture is that the data are stored and synchronised in multiple places. It is not lost even when you go offline:
Implemented features
The product includes the following features:
We see several advantages of using this PWA solution:
There are also a few challenges to bear in mind:
Vue Storefront is a promising but complex technology. The approach can be especially useful for clients who use e-commerce systems that already come with a VSF connector, such as Magento and Shopware. In other cases, it may be a better choice to use a headless e-commerce CMS such as Virto Commerce.
In the case of Episerver Commerce, we managed to successfully integrate VSF and deliver a functioning mobile application. We have analysed the potential benefits and costs of applying this solution within the Episerver CMS. Our conclusion is that VSF gives added value to fresh Episerver installations that can still adjust their data model to the VSF requirements.
For Episerver setups with a custom data model - a better, more customisable and simpler approach would be to use an existing Content Delivery API that comes with Episerver.
We are happy to analyse your individual needs and help you find the best solution for your business goals within your technological and business contexts.