How to provide an awesome B2C solution on top of Sylius
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 critical 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.
You want your store to look beautiful, don’t you? Customers want to use nice and simple layouts that make their purchases easier. Also, mobile devices’ compatibility is a must-have as more than half of purchases in 2018 are made from mobile devices. The default Sylius template might not be that beautiful, but you can easily customize it. If you want to provide the UI rapidly, you can use this link to search through lovely 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. Still, I bet that even a back-end developer who knows Twig (Symfony templating engine) can provide an excellent 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 experiences for multiple channels. I am mentioning it because it is not the case for 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 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. It includes business audit, target group, and similar business patterns research, dedicated graphics projects, and, last but not least, preparing assets packs 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 instead use Vue, React, Angular, or any other JS library/framework, you can install the SyliusShopApiPlugin. It is an 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, the Sylius core team member.
Also, the 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!
Default Sylius official 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 links 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 fantastic, you will find it on their GitHub. They also recorded a webinar, where they shared some experience they gained during such integration.
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. The customer itself has a set of event listeners that allows you to write a nice & simple listener, 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 to your app within a few minutes. You will find more about it on our GitHub, right here.
Still not sure if B2C on Sylius is right for you? Let’s have a FREE consultation and talk about your case.
Sylius uses the Payum library for handling payments.
Payum is one of the most popular bug-free solutions 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 a smooth 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. It means that without a huge budget, you can implement almost 50 different payment gateways. The list you can find 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 to me on
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. The way Payum handles payments inspired us. That’s why the same general rules apply to the philosophy behind this package – it’s flexible and allows you to integrate easily with every web service.
Search Engine Marketing is a hot topic nowadays, isn’t it? Fortunately, most of the integrations could be done by just adding a pure 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 fantastic!
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 the BitBagSyliusCmsPlugin block with the content in it.
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 the Sylius app. If you don’t know what platform.sh is, in a big shortcut, it’s a great hosting platform with an excellent 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 have 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 vast 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. For integration, you can use AMQP or HTTP protocol, or a manual import/export workflow. The last one is currently supported by a generic SyliusImportExportPlugin written by the FriendsOfSylius community.
Some time ago, we announced a beta version of SyliusInvoicingPlugin. It’s a nice and simple to use an extension, that allows your user to provide a VAT number for billing address during the checkout. Afterward, 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 invoicing module in the core, and we don’t face a massive interest in this package so far.
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 key-value storage like Elasticsearch. The way it works is straightforward – the 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:
- BitBagCommerce/SyliusElasticsearchPlugin, a flexible plug’n play integration with Twig, based on FOSElasticaBundle
- Sylius/SyliusElasticsearchPlugin, more API oriented integration based on ONGR ES integration
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 our friends from Locastic and us.
- For wishlist, use our SyliusWishlistPlugin
- For product comparing, use Locastic’s SyliusComparerPlugin
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 adequately used with another one or if you need to sell some related products with a discount. Our friends from SolutionDrive created their SyliusProductBundlesPlugin for it, and we can prove that it’s excellent!
The most crucial Agile principle is to deliver 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 about 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-base 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 behavior 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 fantastic test suite, you can 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. Here 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 essential kind of tests – the ones that interact with your app directly, functional tests.
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 a 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 to me on [email protected].