#BitBagBlog

Written by experts with pleasure. Of course.

How to provide an awesome B2C solution on top of Sylius

Mikołaj Król (bitbager), Jul 26, 2018

eCommerce came a long way since it started ruling the world of sales. Brands are trying to convince their potential customers to buy their goods in many ways. With a modern platform like Sylius, the sky could be the only limit for developers to implement key features that can power up a business.  I will describe how you can use it to provide an awesome B2C experience and what plugins & tools you can use to achieve it.

Custom template

You want your store to look beautiful, don’t you? Customers are used to nice and simple layouts that make their purchases easier. Also, mobile devices compatibility is a must have as more than a half purchases in 2018 are made from mobile devices. Default Sylius template might not be that beautiful as it is prepared to be customized. If you want to provide the UI rapidly, you can use this link to search through nice templates in ThemeForest. Purchasing the templates from a marketplace saves you a lot of time and does not require hiring a graphic designer and a front-end developer. Most of them will make some adjustments to fit the default Sylius functionality, but I bet that even a back-end developer who knows Twig (Symfony templating engine) is able to provide an awesome user experience within two weeks. Once you get your HTML files, you will need to take a look at this guide. I would not suggest working with Sylius themes unless your store does not require different user experience for multiple channels. I am mentioning it because it is not the case in most projects, however, I see that still many people do use them, just in case. Overengineering is an antipattern, especially in Sylius. Even when it comes to the template development.

Sometimes a ready-to-use template is not enough. Although it is the cheapest way to enable a nice look&feel in a web store, keep in mind that it won't be 100% unique to the business. The best user interface could only be provided by a specialist, who can create an interface based on your business profile and customer needs. This includes business audit, target group and similar business patterns research, dedicated graphics projects and last but not least, preparing assets pack with ready to integrate HTML, CSS and JS files.

If you don’t like the idea of using Twig combined with jQuery and you’d rather use Vue, React, Angular or any other JS library/framework, you can install the SyliusShopApiPlugin. It is a nice addition to a standard app, which contains a great DDD oriented architecture. It is highly flexible and format agnostic. The package author is Łukasz Chruściel, Sylius core team member.

Also, Progressive Web App term is something you definitely should consider. We are even building a Sylius2VueStorefront connector, which will integrate with another great Open Source project - VueStorefront. Check it out, we love it!

Content management

Default Sylius standard app does not come with a content management system. Don’t worry - we’ve taken care of it. As Sylius does have an awesome dev-oriented plugin environment, it was quite easy to develop a CMS plugin. We released its first version almost one year ago and now, a 2.0 tag has been released. The plugin also has a demo with some examples of how you can use it. For instance, you can create some blocks and then hardcode them on the homepage & contact page. You can also add some link to the previously created pages in your footer. If adding everything to the admin both on your local and prod environment seems boring to you, you can write some custom fixtures. I encourage you to read the plugin documentation for more. We are working hard to make the plugin flexible and ready to integrate with Pimcore. Once we achieve it, I'm sure that we will share this experience with the community. 

When it comes to content management, we also need to mention guys from Netgen who created eZ Platform integration. Because Open Source is awesome, you will find it on their GitHub. They also recorded a webinar, where they shared some experience they gained during such integration.

Newsletter

Newsletter marketing is one of the most powerful ways to increase sales in general, especially in the eCommerce industry. It became a standard that eCommerce websites do have newsletter automation software integration. 

Sylius customer model by default has a field called $subscribedToNewsletter. Customer itself has a set of event listeners that allows you to write a nice & simple lister, which can check whether the new or existing customer has subscribed to newsletter or not. These events are sylius.customer.post_register and sylius.customer.pre_update.

When it comes to the right choice for a newsletter automation system, you should consider MailChimp. MailChimp is the world’s largest marketing automation platform.

It’s like a second brain that helps millions of customers—from small e-commerce shops to big online retailers—find their audience, engage their customers, and build their brand.

~MailChimp themselves

We have created a MailChimp integration for Sylius, which you can adjust into your app within a few minutes. You will find more about it on our GitHub, right here.

Payment gateways

Sylius uses Payum library for handling payments.

Payum is one of the most popular bug-free solution that has over 1 000 000 downloads already. It is friendly for all top PHP frameworks and was successfully installed and tested by thousands of developers worldwide.

~Someone from Payum community, I guess

Due to an easy and generic algorithm, it allows many ready payment gateways wrapped in Payum to be implemented without a high budget. Adapting a new payment gateway might take up to a few days or even a few hours if it only requires Sylius specific customizations. This means that without a huge budget you can implement almost 50 different payment gateways. The list can be found on their official GitHub.

Sylius by default supports PayPalExpress and Stripe Checkout gateways.

By the time I write this blog, Sylius supports:

If somehow I missed your plugin, write me on [email protected].

Shipping WebServices

Many eCommerce websites ship their goods via courier services. Printing a shipping label, exporting the shipping data to a third-party service can be taken by a good ERP software, but sometimes the project does not require one. You can use BitBagShippingExportPlugin to write a nice bridge between Sylius admin and the shipping provider API. It allows you to configure the provider API gateway, some additional data, export the order data and save the shipping label if required. There is also a working DHL24PL integration, which you can take as an example or even install if it fits your requirements. We were inspired by the way Payum handles payments. That's why same general rules apply to the philosophy behind this package - it's flexible and allows you to integrate easily with every web service.

SEM

Search Engine Marketing is a hot topic nowadays, isn’t it? Fortunately, most of the integrations could be done by just adding a simple JS in your main layout template or at some step in the checkout. It should not be hard assuming you are using the Sylius Twig template inheritance. But even for some of the most popular SEM tools, our awesome community came up with a set of plugins! Stefan Doorn’s Google Tag Manager and Enhanced Ecommerce Plugin are really amazing!

Tip: For integrations like Google eCommerce tracking, where some dynamic data is required to be passed to the JS code, you can create a Twig extension and add it easily to each place in your app.
Second tip: If you want the JS code to be manageable, you can use BitBagSyliusCmsPlugin block with the <script></script> content in it.

Deployment

As Sylius is a standard Symfony app, you should not have any issues once you had done it before. If not, this tutorial should help you a lot. You might also consider platform.sh hosting which could easily integrate with Sylius app. If you don’t know what platform.sh is, in a big shortcut, it’s a great hosting platform with a great user interface, that at the same time is quite flexible. Take a look at this how-to guide for more information. There is a great case of REISS, a British retailer that runs an advanced eCommerce website on top of Sylius and hosts on platform.sh. More about it here. Of course, you can use each hosting provider you want. OVH, Heroku or Google App Engine might be a nice choice as well. We personally started using Digital Ocean for our demo app and we are quite satisfied with the result so far.

ERP & PIM software

Data management and resources planning is a huge topic. Sylius by default does not even try to include all of its features as a monolithic platform. It prefers to integrate with third-party software like Pimcore, Akeneo (btw, it has an open source integration, check this GitHub organization), Comarch or Subiekt. The integration could be done by using AMQP or HTTP protocol, or a manual import/export workflow. The last one is currently supported by a generic SyliusImportExportPlugin written by FriendsOfSylius community.

Invoicing

Some time ago, we announced a beta version of SyliusInvoicingPlugin. It’s a nice simple to use extension, that allows your user to provide a VAT number for billing address during the checkout. Afterwards, you can download the invoice in the order view as PDF. It’s highly flexible and uses KnpSnappyBundle under the hood - a nice adapter to wkhtmltopdf, the most popular library that converts HTML to PDF format. We are not, however, sure what'd be the future of this package, as Sylius is planning to develop their own invoicing module in the core and we don't face a huge interest in this package so far.

Filtering products

The way you display a list of products is essential for customers that are looking for a specific group of products. I cannot imagine a retail B2C without size and price filter. Filtering many products via a relational database might be overkilling, that is why it is way much better to use a key value storage like Elasticsearch. The way it works is straightforward - Sylius database is replicated to a simple document that can be indexed more easily by an external search engine. Sylius has nice Elasticsearch integrations to make it work. 

So far, there are two of them:

Wishlist & product comparing

Wishlist and product comparing module is a nice way to build more conversions and track the interest in your products. There are already two ready to use integrations written by us and our friends from Locastic.

Product bundling

Bundling products is a great pattern, that allows users to purchase a few products as a pack at once. It's great if your product needs to be used properly with another one or if you need to sell some related products with a discount. Our friends from SolutionDrive created their own SyliusProductBundlesPlugin for it and we can prove that it's great!

Testing

The most important Agile principle is to deliver a software that works and meets business requirements. Nowadays it is almost impossible to provide flexible and scalable solutions without a proper test suite. Test-driven-development is something each developer should be familiar with. The problem is that TDD is more concerned on the development part, whereas BDD outgoes to the set of business. Here is the general overview of BDD that you can find on the official Behat intro page:

BDD is a methodology for developing software through continuous example-based communication between developers and a business, which this application supports. This communication happens in a form that both the business and developers can clearly understand - examples. Examples are structured around the Context-Action-Outcome pattern and are written in a special format called Gherkin. The fact that Gherkin is very structural makes it very easy to automate and autotest your behaviour examples against a developing application. Automated examples are then actually used to drive this application development TDD-style.

 

Sylius has a strong BDD background and is one of the top Open Source projects that use this methodology. What is more, not only the platform uses it, with their amazing test suite, you are able to run the Behat tests in each Symfony app in the same way you do with Sylius. In a nutshell, Behat is a BDD tool that allows you to write a feature that is both readable by development & business and then parse this feature file into automated tests. This is an example feature file:

@shopping_cart
Feature: Adding a simple product to the cart
   In order to select products for purchase
   As a Visitor

   I want to be able to add simple products to cart

   Background
       Given the store operates on a single channel in "United States"

   @ui
   Scenario: Adding a simple product to the cart
       Given the store has a product "T-shirt banana" priced at "$12.54"
       When I add this product to the cart
       Then I should be on my cart summary page
       And I should be notified that the product has been successfully added
       And there should be one item in my cart
       And this item should have name "T-shirt banana"

Taking this approach helps you better understand what the business requirements are, makes you more Agile and what’s more important, gives you a working software in with the most important kind of tests - the ones that interact with your app directly, functional tests.

If you are into BDD in Sylius & Symfony, read our tutorial on how to become a small hero in this area within an hour. We also explained the role of PHPSpec in the BDD process.


Summary

Sylius can provide you a great B2C experience that is easy to customize and due to its stable test background and code quality, it’s pleasure to work with. Installing plugins presented by the community gives you the ability to provide an advanced platform within a few weeks and customize them as the business grows without any problems. We have proven it in many of our projects and if you want us to do it with yours or give you a hand, feel free to message us.

If you are into projects we made and want to talk about what we can do for you, don't hesitate to write me on [email protected].
 

Why it is high time to consider Sylius as the best eCommerce solution for PHP?, Jun 19, 2017 Why Pimcore & Sylius might be your eCommerce dream team?, Jul 30, 2018

Like it? Join our newsletter!