Online store on Drupal 8 - Drupal Commerce

It’s been two years since the première of Drupal 8. We already got used to the differences between versions 7 and 8, and a lot of websites were created based on D8. Many Drupal 7-based websites are applications that use Drupal Commerce – an e-commerce module for Drupal. Many of the applications were set-up with the Commerce Kickstart distribution, which was based on this add-on. What’s the way to do it with D8? For a long time, only the alpha version was available, then a beta version was released. On the 20th of September 2017, we saw the release of version 2.0. As of today, the current version is 2.9. We'll see what’s new in DC and how it works with D8. For testing purposes, we are going to use DC 2.9 and Drupal 8.5.9 with Droopler distribution (a Drupal distribution created by us to build corporate websites).

Set-up and requirements

According to the manual, it is recommended to install Drupal using Composer; set-up requires Drupal 8.5 or newer. We did not have any issues with the installation process. To install the newest DC, we used the following command:

composer require "drupal/commerce"

DC requires several additional modules (Address, Entity, Inline Entity Form, Entity Reference Revisions, Profile, State Machine). When using Composer, you don’t have to worry about installing them manually, as they will be added automatically. After successful set-up, the list of modules will grow by 12 new entries.

Functionality, modules and innovations

We have launched all the modules for the purpose of testing. The Commerce icon appeared on our main menu. At first glance, you can see a number of options that were not included in the standard version for D7. This includes:

• Store types
• Product attributes
• Promotions
• Order types
• Order item types
• Checkout flows
• Product variation types.

Store and Store types

It allows you to define store types your website, “online” is added by default. Adding more store types may be useful if you have a network of brick and mortar stores or branches in different countries. These stores may have a country-specific offer but use the same database of all products kept in one place. You should remember that a product may belong to one or more stores; however, an order placed by the user is always assigned to one store.

Another interesting option is the possibility of creating stores by users on your website, allowing vendors to open their online stores on your platform, as well as create and sell their own products, just like ETSY. You can find out more about that functionality from Drupal Commerce documentation.

Product attributes

Allows you to add attributes to your products. There are three display options available: Select list, Radio button and Rendered attribute. These attributes can be assigned to types and used when adding new products.

Promotions

DC provides you with a sub-module that allows you to add bonuses and discounts. The discount can be set for specific products or the entire order. The discount may be either a fixed amount or a percentage, and they can be assigned to a role, a shipping address, or an e-mail address. You can also limit promotions and special offers to a maximum order value or currency. In addition, you have the option to add start and end dates, limit the number of uses and decide whether a discount can be combined with other promotions. Admittedly, this is a great convenience. Compared to other e-commerce systems, these are the things that should already be standard. In D7, it was not so obvious, and it could cause quite a headache.

Order types

Another new thing in DC is a new approach to orders. You can now create several order types with different shopping paths, or even showing a shopping cart in a different way. This is quite an interesting solution and it will certainly be useful for more complex projects, where products require a different business approach. Each type can have its own unique fields and rendering methods.

Checkout flows

As mentioned above, in addition to the order types, you can set up many different shopping paths. They may vary depending on the type of order placed. The entire order process is displayed using plug-ins. By default, you can take advantage of Multistep; however, you can add your own plug-in and use it, for example, for one of several shopping paths. This is quite an interesting approach, thanks to which you won’t have to alter the single default path. You can check out how to create your own flow plug-in here: https://docs.drupalcommerce.org/commerce2/developer-guide/checkout/create-custom-checkout-flow

Order item types

One could say that this is something like “Line item” from D7 – an item that stores order data and products, you can also define your own fields for storing other information.

Commerce 8 in action

Let's see how commerce works in practice.

Adding a product

As you can see, you can use the attributes and variations of the products that you have created earlier. Let’s add a product with several options to choose from.

Product sheet

Cart

The standard cart is a block with views, which can be easily and freely configured, like in D7.

Payments

We have included the default test payments available in the module for the purpose of our tests. If you want to use a ready-made gateway, you can go with:

PayPal - https://www.drupal.org/project/commerce_paypal - beta1

Tpay - https://www.drupal.org/project/commerce_tpay - rc2

Shipments

You can take advantage of a shipping module – Commerce Shipping beta4.

https://www.drupal.org/project/commerce_shipping

It is integrated with the physical model, thanks to which you can use automatic conversion of sizes and scales to the final shipping cost.

As for the shipment integration, I only managed to find an Alpha3 version for FedEx.

https://www.drupal.org/project/commerce_fedex

In addition, DC developers used the Address module.

The address fields are supported for more than 200 countries. They include locations, regions, voivodeships, Länder and so on from most countries of the world. In addition, you can create custom “Address zones” and assign special properties such as special shipping prices, taxes, etc.

Summary

Drupal Commerce has a number of basic functions and many interesting innovations operational and working, which is, of course, a huge advantage. In addition, the developers decided to provide users with more configuration options by default, compared to the D7 version. A typical site builder might have issues with building a store for a client, due to the lack of D7 modules and the fact that the majority of them is in alpha or beta version, which means that they may be unstable. If you don't develop advanced modules for the D8, it can be a huge obstacle, otherwise, you might have to develop them yourself.

What was great about DC was the fact that we were able to configure and set the basic functions of our store in a short time without any problems. More and more modules are released, and a large number of them is already available in stable versions. That is why the combination of Drupal 8 and Drupal Commerce is a tool that gives a lot of possibilities for implementing interesting projects.

You might ask whether you should go for a proven Commerce with D7 duo or try the innovations introduced in D8.

The answer is... It depends on the project, your development resources, as well as time and budget for developing elements that are not available or do not work properly with D8. It is worth mentioning that pages based on Drupal Commerce receive SPLASH AWARD on a regular basis. Since 2014 the competition names the best Drupal sites. More on this topic here: https://www.emerce.nl/wire/frmwrk-wint-tweede-prijs-drupal-splash-awards

However, as of now, the project looks promising and we keep our fingers crossed for the further development of Commerce. If you need more information about DC, feel free to visit

• Documentation: https://docs.drupalcommerce.org/
• Our blog post about Drupal commerce attributes
• Check out our offer of Drupal Commerce services

We also encourage you to read other articles on our blog!