Drupal CMS e-Commerce Module Basics

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, I 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. I 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.

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

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.

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.

Site Appearance

To illustrate how the e-Commerce module can be utilized, I will create a simple e-commerce site. First I 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, I will use "E-commerce Unlimited Ltd.".

It is mandatory to add an email address. For test development on a local instance of Drupal, any valid email address will do. I will not bother with a site slogan or mission statement. You can set those for your own online store, if desired. But I 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.

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, I will stick with the default Drupal theme, named "garland". But I 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 you will see that Garland is currently enabled and set to be the default theme.

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

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

Site Home Page

To conclude this initial setup of the site, I 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 I had installed and enabled the e-Commerce module. The default value, "Not a product", is what I want for the home page. In the "Publishing options" section, I specified that this new page be promoted to the front page.

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

You will notice that the Navigation menu contains a single menu item, for the Products page, which currently is empty. I 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, I will only use tangible products.

Now I can begin creating the 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, I will allow products to be purchased by both registered and anonymous users, and I will enable inventory control, so customers can see how many units are 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, I 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 I 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.

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.

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

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.

Then check the 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).

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.

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.

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

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.

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 I 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.