Skip to main content

Drupal Commerce modules for Drupal 8

This is how we support the Drupal community

In 2017 we started to implement our first e-commerce stores in Drupal 8. We realized almost on the first day, that it will be a challenge and we need to figure out many things what we were used in Drupal 7 in routine. But we love challenges, and we decided to give back as much as we can for the community.

In this blog post, I will try to write a summary of things we did do and use in our Drupal Commerce projects and I will also make a teaser of new things coming out from our kitchen.

Before we start, I just want to say big thanks for the whole Studio Present team, because everybody added something to make it happened.

I will start with some useful tweaks.

 

Shipping

Read a blog post Drupal Commerce 2.x and shipping conditions, you can read the step-by-step guide and download a sample module from this link above.

Teaser from a blog post:

By default Drupal Commerce 2.x and Commerce Shipping modules come with two nice conditions Limit by total price and Limit by shipment weight. But in some cases these conditions are not good enough for restricting shipping methods.

 

Sale price

Another useful tutorial on how to set up the sale price, you can read here: Drupal Commerce 2.x and sale price

Teaser from a blog post:

One of the requirements in one of our recent Drupal Commerce 2.x project was that each product should have a sale price field. By default, Commerce 2.x doesn't support this, but adding it is so easy. In this post I will share with you how I implemented this feature. Like anything else in programming there are many different approaches, but to me this seems like the most straightforward.

 

Cheeseburger menu module

This module is not strongly Drupal Commerce related, but we designed it because we needed for our Drupal Commerce projects.

The name came from an internal team joke during the dev phase, then we decided to leave it. At least it is easy to remember.

You can read detailed introduction and instructions on Cheeseburger module page on drupal.org, but if I need to give a sort intro this would be: Cheeseburger menu a highly configurable, universal, Drupal Commerce ready, responsive navigation for Drupal 8.

 

Cheeseburger menu
Cheeseburger menu

You will be able to choose if you want the cart or the phone button to appear in the menu. The phone number is retrieved automatically from the contact details of your store, although it can be overridden if desired.

Taxonomy terms as menu items? Of course!

There is a possibility for you to use the taxonomy as the structure in your Cheeseburger Menu. This feature really comes in handy if you use Drupal Commerce and user taxonomies as the main categorization of your store products.

 

Commerce Smart Importer

Let’s follow the list with something what I really hope that will simplify a lot of people's life. This is our Commerce Smart Importer module. We are in the last test phase and we will roll it out this week. Then I will update this blog post with the link.

The background and why we developed this module is that we needed a universal importer for our clients what is very easy to use, what is dummy proof (or at least try to be), what do not has any dependencies and what concentrates to what is designed for, give a user friendly way to import products to Drupal Commerce 2.x.

Some highlights of the module:

  • mass import of products
  • the module provides the CSV template to minimize the mistakes
  • if the error occurs during import, the Commerce Smart Importer will recognize them and will try to correct them
  • when errors are recognized, the user doesn't need to change the values in the CSV file, corrections could be made on importer user interface
  • it is an out of the box solution for import and will work on all Drupal Commerce sites
  • all the fields will be automatically recognized from the Drupal configuration
  • export products option, possible to export specified categories and fields
  • it is also possible to update existing products, which is useful for mass updates of certain fields
  • you can import and update images too

 

The main screen for importing or updating products
The main screen for importing or updating products

 

Available options after CSV document is scanned by Smart Importer
Available options after CSV document is scanned by Smart Importer

 

 

Notices and errors about specific products. You can override values directly here
Notices and errors about specific products. You can override values directly here
Notices and errors about specific products. You can override values directly here

 

So stay tuned, link on drupa.org is on his way.

 

Dred theme for Drupal Commerce

Now we will jump on something different, something really amazing, something that will simplify the frontend developers life. Dred theme for Drupal Commerce.

Dred is a masterpiece of our frontend and UX ream. First, we did the design, then the frontend team has done their best to complete the theme. There will be a separate and longer blog post as soon as we finish and publish it. But here is the teaser of features and some screenshots.

 

Form components
Form components

 

Dred theme is designed to simplify frontend developers life. We made it primarily for our needs, just imagine, with a simple drush command you can clone the Dred theme and voila you are ready to customize it.

Another cool thing of Dred theme in our case that the processes, code writing style and theme file structure are standardized, so once we use Dred as a starter kit for Drupal 8 projects frontend developers work on same way.

One of the best feature is that Dred has a lot of out of the box configuration. Once you install commerce profile you will get ready made twig + scss + js site parts. For example slider views, product full page with spinner for quantity and lightbox for images of course with swiper included.

If we speak about some other technical stuff, the whole theme follows the BEM structure and it is written modularly. We tried to break down to atomic parts so it is very easy to modify.

The Dred theme itself is a red-white-black colored theme what could be changed with three scss variable.

So it is simple, drupal commerce ready, and easy to use.
In our opinion it will cut in the half the frontend development time.

Here are some screenshots about the theme, but you could also find all the elements on our “take a look” portal, just click here to see all the images.
 

 

Components
Components

https://takealook.studiopresent.com/project/dred

To the end here are 4 more small modules what could be useful in the different case.

 

Commerce quick edit module

This module provides a modal form for editing commerce products. You can use it to quickly edit you products without having to go to the edit form and waste your valuable time. Just click on the quick edit link and make the necessary changes.

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

 

Commerce Shopping Hours

Let's say that for some reason your shop is not open 24/7. Maybe you have a restaurant with a delivery that works only from 9AM to 23PM. In this case, you don't want to accept orders when the shop is closed. This module allows you to define an opening and closing hours for each day of the week. Your customers will still be able to add items to their cart but when they try to checkout they will be redirected to the warning page that displays a custom message and shopping hours. You can also add a block which displays the message and shopping hours, so that your customers know in advance that your shop is closed.

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

 

Commerce Variation Add to Cart

If you want to have a separate add to cart button for each product variation, then this module is for you. Beside showing buttons for each variation, there are additional settings, like an option to display price, currency and quantity. You can also choose which product attributes to show in your add to cart form.

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

 

Commerce Price Updater

Most customers of the company I work for use some sort of product management software for keeping track of their product inventory. All these applications have the option to export product prices to a CSV file, so it is very important to offer our customers an option to easily update prices on their website, without creating complicated and often expensive API integrations. That is the main reason behind creating this Drupal 8 module.

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

 

Drupal Commerce case study

Also worth to mention our latest case study for Stormtextil, where we use Drupal Commerce 2.x with a lot of customisation. Microsoft C5 integration with Drupal 8. Custom Mailchimp integration with Drupal 8 and a custom js product designer.

Read the whole case study on our drupal case studies section, or just click here.

 

Stormtextil case study - Studio Present
Stormtextil case study - Studio Present

 

I hope the above stuff is useful.

Feel free to contact us if you need any help.