Drupal e-Commerce Module Advanced Use

By

As more Web developers choose to utilize content management systems (CMSs) for creating websites, there is a growing interest in using CMSs for types of websites not initially envisioned as content management scenarios. First among these are e-commerce sites, which normally are created using shopping cart systems that generate all of the pages of the site, or "bolt-on" e-commerce services that provide links that the developer uses within a custom-built site.

These two online worlds have been largely separate from one another, because CMSs were never intended for managing product inventory, tracking customer items chosen, allowing checkout with electronic payment, and all of the other functions typically associated with an online store. But all that is changing, as independent developers begin to create powerful e-commerce modules that work within some of the leading CMSs.

One of the most widely known examples of this is the e-Commerce module built for Drupal. It attempts to combine the realms of shopping carts and CMSs, and is already in use throughout the world for a range of online shops.

In this tutorial, we will examine many of the advanced features that one can take advantage of, to make a basic Drupal/e-Commerce store more functional and probably more profitable for you, the store owner. We will assume that you already have Drupal 5.7 and the 5.x version of the e-Commerce module. (For more information on how to get started with these technologies, see my earlier tutorial hosted by DeveloperTutorials.com.)

First go to Administer > Site building > Modules, and confirm that the Token module is enabled, as well as the following: Store and Address, plus the modules supporting the product types that you want to offer and the payment methods you want to make available to your customers.

Shopping Cart Element

With most if not all typical shopping cart solutions, every page contains an element (i.e., a defined region on the Web page) which contains a summary of the current state of the customer's virtual shopping cart. These boxes usually contain a graphic of a shopping cart, as a visual cue, as well as the number of products currently in the customer's cart, the total cost of all the items, and links to go to a more detailed shopping cart page, where changes can be made to the cart's contents.

But with Drupal and the e-Commerce module, by default, there is no such shopping cart element displayed on the pages. We will now learn how to remedy that.

Go to Administer > Blocks, find the "Shopping Cart" block, and assign it to one of the active regions on your page, such as the right sidebar, which is what we will do in our example.

shopping cart box

Product Search

Your online store will certainly not be profitable to you nor pleasing to your customers if they are unable to find the products they are looking for. In fact, probably nothing frustrates prospective customers more than finding a site that promises to make available what they are seeking, and yet makes it impossible for them to actually find those products.

Fortunately, Drupal has solid search functionality built in, and we can take advantage of that for product searching. Admittedly, if your site is only going to be offering a handful of products (or services), and you list all of them prominently on the homepage, there would be no need for a search feature. But for most e-commerce sites, a product search feature will be a welcome part of the site, which most likely will result in increased sales and referrals — especially if every product has its own URL, and people can easily tell others about a product they think would be of interest to them.

To add a search box to your site, go to Administer > Site building > Modules, and enable the Search module located in the "Core - optional" list.

Search module enabled

Next, go to Administer > Blocks, find the Search block, and assign it to an active region. Your choice of course depends upon the design layout that you desire for your site, but a popular choice is to place all of the navigation blocks and their menu items in the left sidebar, and place the shopping cart and search boxes in the right sidebar.

Search box

For illustrative purposes, I have created a few sample products, including a couple "widgets" — all listed on the Products page. Clicking on the name of the first one, takes us to the product detail page, shown below.

widget product page

Entering the term "widget" into our new Search field, and clicking the Search button, we might expect all of the widgets to be found, but they are not.

Search no results

No results are returned because the Drupal search module can only look through pages that have been indexed, and at this point none have — at least for our sample site; you may receive different results if you have indexed your site. If you have not, go to Administer > Site configuration > Search settings, and click the "Re-index site" button (twice, for confirmation), and you should receive notification that the index is scheduled to be rebuilt the next time the cron job is run.

site indexed

Then go to Administer > Logs > Status report, and under "Cron maintenance tasks", click the link to run the cron job manually (assuming that you have not set up your site to do that automatically and frequently).

cron job run

Now when you search for any term in your product listings, the search results will include your matching products.

Search results products

Product Images

Some types of products, such as office and medical supplies, are so standard that exact descriptions alone are sufficient, with no need for product images. But for more consumer-oriented products, a visual depiction of the individual product is essential, and could make the difference between securing a sale or the prospective customer leaving your site for the next one listed in their search engine results.

In Administer > Site building > Modules, enable the Upload module, which will allow us to upload product images.

Upload module enabled

To test this upload ability, go to Administer > Content management > Content, and edit one of your products. Within the product details page, you will see a new expandable section, titled "File attachments".

File attachments

If you use that section to attach a product image file, and save the results by clicking the "Save configuration" button at the bottom of the page, then when you or a visitor to your site views the product listing page, they will see the image file attached.

product listing with image attached

But this method only attaches a link to the image. For the visitor to actually view the image, they have to click the link. This might be acceptable for just a few products, but will soon prove tedious for any prospective customer who wishes to see the images of many products. However, this approach is best for attaching large files to a product, such as a technical specification document in PDF format.

We want the product image displayed within the product page itself. There are several ways that you can do this. The simplest and most manual way, is to copy the URL of the image file, and add that to the product's description. Go back to the "File attachments" section, and underneath the filename entry field, copy the URL of the image file. In our example, the URL is "http://localhost/m_d/_w/Drupal e-Commerce/files/product_image.jpg".

product image URL

Insert into your product description an <img> tag pointing to the product image URL.

product image URL in description

Be sure to specify the "Input format" to be HTML; otherwise, your <img> tag is filtered from the description when you enter it.

widget product page using image URL

The simplest way to place the product image to the left or right of the text, would be to float it. Other CSS techniques can be used to modify the appearance of the image within the product page, as desired.

Another option for adding an image to a product page, is to use the Image module.

Calculating Taxes

In order to include taxes in any customer's order, you first need to enable the Tax API module.

Tax API module enabled

You can then specify a wide range of tax rules depending upon such conditions as product type and customer's shipping location. To do so, go to Administer > E-Commerce configuration > Taxes, and click the "Add tax" link. In our example, we are going to charge 7.25 percent for any California-based customers.

tax rule

The appropriate tax rule will be applied when the customer goes to check out, and the tax will be displayed on the "Border Summary" page.

Shipping Costs

In order to calculate the shipping costs for a customer's order, the Drupal e-commerce module supports two approaches — the Shipping API and Flexicharge. The former works in conjunction with shipping modules, such as those for USPS, FedEx, and UPS in the United States, as well as the postal services of Australia and Canada.

For purposes of illustration, we will try to set up shipping for FedEx and UPS, by also enabling the Shipcalc module, in Administer > Site building > Modules.

shipping modules enabled

Within Administer > E-Commerce configuration, there is now a new section for Shipping. (Oddly, FedEx is not listed.)

shipping configuration

Each shipping method has its own required information, and we won't go into those details here. After you have chosen the shipping methods you want available to your customers, click on the Products link, and designate what types of products you want to associate with the particular shipper, and then what classes of shipping services.

Conclusion

This tutorial, and its prequel, should together be sufficient to assist any reader in developing a virtual store using Drupal and the e-Commerce module, and also show how easy it is to do so.

As of this writing, a version of the module is under development for Drupal 6.x, and it will undoubtedly offer even more capabilities and potential for your online store.

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

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <address> <area> <blockquote> <br> <cite> <code> <dd> <div> <dl> <dt> <em> <fieldset> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <img> <input> <li> <map> <ol> <p> <pre> <span> <strong> <sup> <u> <ul>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
11 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.