Drupal CMS e-Commerce Module Basics

This article was published by DeveloperTutorials.com, , as a feature tutorial.

Regular e-commerce shopping carts work fine if the functionality of the store site is limited to listing products, allowing customers to purchase them, accepting credit card payments, and all of the other e-commerce features offered by these shopping cart solutions. But what if you also want to support collaborative editing of content, community forums, and other capabilities that could help increase traffic to your site, but are usually only found in content management systems (CMSs)? Is it possible to combine the best of both worlds — shopping carts and CMSs?

Fortunately, the answer is yes, if you choose a world-class CMS such as Drupal as a foundation for your site. All of the functionality of Drupal is organized into modules, some of which are built into any initial installation (known as "core" modules — some of which are required for Drupal to function). There are even more third-party modules created by outside developers, and most of those are made freely available. Some of them are intended for making a Drupal-powered website able to operate as an online store, and of these, the e-Commerce module is the most capable and widely known. However, the online documentation for the module is quite lacking, which is typical of open source projects that exist only because one or a few developers can find the spare time to devote to the project, with little time left over for external documentation.

In this tutorial, we will explore how to create an online store using Drupal and the e-Commerce module — specifically, installing the necessary components, listing products for sale, setting tax rates, and other critical e-commerce tasks.

Setting Up Drupal and Its Modules

To get started, you need to have available a working installation of the most recent stable version of Drupal 5.x, which is currently Drupal 5.7. We will be using the 5.x series, rather than the more recent 6.x series, because the e-Commerce module does not yet have a release for Drupal 6.x (one is under development at this time). In addition, your Web development environment will need technologies required by Drupal itself, namely, PHP and either MySQL or PostgreSQL.

After you have set up a verified installation of Drupal 5.7, create the administrator account for the site, if you have not already done so. This would also be a good time to go into the administration section (Administer > Site configuration) and enable clean URLs if desired, set the default time zone, and set the site information, including the name of your site, the contact email address, the site slogan, and the footer message (for a copyright notice, for instance).

You will also need to download the 5.x version of the e-Commerce module.

e-Commerce module releases
Figure 1. e-Commerce module releases

Lastly, download a module upon which the e-Commerce module depends, the Token module.

Token module releases
Figure 2. Token module releases

They should be unzipped into a directory you will need to create, sites/default/modules (starting from your root Drupal directory). When you are finished, that module's directory should contain two subdirectories: "ecommerce" and "token".

Go to Administer > Site building > Modules, where you should see the Token module listed in the Other category. Enable it first, because the e-Commerce module depends upon it.

Token module enabled
Figure 3. Token module enabled

A much more dramatic change to the Modules page, is the five newly-added module categories for the e-Commerce module: E-Commerce Core, Customer Interface, Payment Methods, Product Types, and Uncategorized. At this stage, you only need to enable the Store module in the "E-Commerce Core" section.

e-Commerce Core modules enabled
Figure 4. e-Commerce Core modules enabled

Site Appearance

To illustrate how the e-Commerce module can be utilized, we will create a simple e-commerce site. First we will give the site a name, which will appear in the Web page title and in the header at the top of every page. Go to Administer > Site configuration, and set the site name. In this case, we will use "E-commerce Unlimited Ltd.".

Site name
Figure 5. Site name

It is mandatory to add an email address. For test development on a local instance of Drupal, any valid email address will do. We will not bother with a site slogan or mission statement. You can set those for your own online store, if desired. But we will add a copyright notice as part of the footer of every page. Note that the copyright notice, like most other text entry fields, can accept HTML markup by default — in this case, an HTML entity reference for the copyright sign.

Footer message
Figure 6. Footer message

Save your changes by clicking the "Save configuration" button at the bottom of the page. (Do this for all subsequent configuration changes within the Administer area of Drupal.)

Next, to keep things simple, we will stick with the default Drupal theme, named "garland". But we will modify it by replacing the image of Druplicon, the Drupal mascot, with the image of a dollar sign. Go to Administer > Site building > Themes, where are you will see that garland is currently enabled and set to be the default theme.

Garland theme configure
Figure 7. Garland theme configure

Click the "configure" link. For the color set, we will choose "Ash".

Garland color set
Figure 8. Garland color set

In the Toggle display section, disable the mission statement and shortcut icon, because we do not have either for the sample site we will be building.

Site Home Page

To conclude this initial setup of the site, we will create a home page. Go to Create content > Page, and set the title and body text to whatever would be best for your store. You will note that there is a new section, Product, that did not become part of the regular Page options until we had installed and enabled the e-Commerce module. The default value, "Not a product", is what we want for the home page. In the "Publishing options" section, specified that this new page be promoted to the front page.

If you now log out of the Administer area, your site should look similar to the screenshot below.

Home page
Figure 9. Home page

You will notice that the Navigation menu contains a single menu item, for the Products page, which currently is empty. We will rectify that momentarily.

Adding Products to Your Store

Before you can start creating your product catalog, you will need to enable the e-Commerce modules corresponding to the product types that you wish to offer. Go to Administer > Site building > Modules, and in the "E-Commerce Product Types" section, enable the appropriate modules. For the purposes of this tutorial, we will only use tangible products.

Product type modules
Figure 10. Product type modules

Now we can begin creating our product lineup, with each product simply being another content element within Drupal. Go to Create content > Product > Shippable Product (i.e., a tangible product), and add as many new products as you wish. The purposes of the various options should be obvious. For most of the options, the default values will work fine. In our example, we will allow products to be purchased by both registered and anonymous users, and we will enable inventory control, so customers can see how many units we have available for sale. However, there is no need for the site administrator or product creation date to be listed, so in the "Authoring information" section, we will blank out the author name and date/time stamp. For all subsequent products, only the author name will need to be blanked. If you do not want the products listed on your home page, indicate that in the publishing options section, which is what we will do. Note that even if you blank out the author name and date when creating a product, they are still included in the product listing on the home page, but not the Products page.

After creating a few products and then logging out, your products page should look something like the following screenshot.

Products page
Figure 11. Products page

Checkout and Payments

In order to ship to customers the products that they have ordered, you will need to capture their shipping information. To do that, you can use the Address module in the E-commerce Customer Interface.

Address module enabled
Figure 12. Address module enabled

In order to accept payments from customers, you need to enable at least one of the Payment Methods modules. To keep our example simple, we will use the C.O.D. module, so we can accept checks sent through the mail and credit card information provided over the phone.

Payment Methods modules enabled
Figure 13. Payment Methods modules enabled

Now go to Administer > E-Commerce configuration > C.O.D, and confirm that the default cash on delivery options are acceptable, or modify them otherwise.

COD options
Figure 14. COD options

Then check the PayPal options.

PayPal options
Figure 15. PayPal options

As explained on the PayPal options page, you will need to set up a PayPal account, if you have not done so already, in order to accept PayPal payments from customers. In addition, if you want your online store to receive immediate and automatic notification of a PayPal payment, then you need to enable PayPal's Instant Payment Notification (IPN) feature.

Now when the customer has finished making their product selections, and they go to check out, they will see COD and PayPal as their payment options (PayPal is the default).

Payment methods
Figure 16. Payment methods

Purchasing

If a customer visits your site's Products page, and clicks on one of the products, they will see an individual product page similar to the screenshot shown here.

Product selection
Figure 17. Product selection

After adjusting the quantity, if needed, the customer can click the "Add to Cart" button, which adds the product to their shopping cart, and takes them to the shopping cart page.

Shopping cart
Figure 18. Shopping cart

The customer can modify the products in their cart, or proceed to the checkout process.

Checkout user
Figure 19. Checkout user

If you have configured the cart to allow purchases by anonymous users (i.e., people not checked into your Drupal site), then the customer can simply enter their email address and continue.

Checkout review
Figure 20. Checkout review

After verifying their order on the review page, the customer would click the "Place your order" button, which, in our example, would take them to the PayPal login page, for the remaining steps, which we won't detail here.

There are plenty of additional features that you can add to your Drupal online store. This tutorial should provide a solid foundation upon which to start building your site, as well as your knowledge of the e-Commerce module, and what it can do for you.

Copyright © 2008 Michael J. Ross. All rights reserved.