Drupal 8 Commerce

Posted onby admin

In this first in a series of Drupal Commerce Guides, we work through setting up the relevant Drupal CMS modules and taking the first steps in our e-commerce site creation tutorial. To get started, we need to understand what Commerce's Product and Product Types are, as well as how to implement them. Understanding Products and Product Types. Let’s say you own a boutique with an online e. This guide covers installing Drupal Commerce, an e-commerce implementation designed specifically for Drupal.At the end of this guide you will have a Drupal Commerce site, GitHub repository, and Circle CI configuration for testing.

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. When we started developing Commerce 2.x for Drupal 8, we ported over Inline Entity Form and the previous approach to managing products, but now we’re ready to take another step forward to advance the usability and performance of product management. If you get this far you have install a complete shopping cart (Drupal 8 + Drupal Commerce). But we are not done yet. It seems this script is a little dated so it installs Drupal 8 but we want Drupal 9. To do this, open up /mystore/composer.json. Delete these lines.

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.

Commerce

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

Commerce

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.

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

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.

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.

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.

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.

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.

Drupal Commerce Module

Commerce Price Updater

Drupal 8 Commerce Get Order Items

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.

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.

I hope the above stuff is useful.

Drupal 8 Commerce Theme

Feel free to contact us if you need any help.